Функция отправки формы повторяется каждый раз, когда она вызывается - PullRequest
Новая
       10

Функция отправки формы повторяется каждый раз, когда она вызывается

0 голосов
/ 22 мая 2019

У меня есть страница datatables с модальным диалогом начальной загрузки в качестве страницы редактирования. Когда пользователь отправляет форму, он повторяет все действия submit(), которые он выполнил с момента загрузки страницы. Ну, это повторяет часть из них.

Эта функция вызывается, когда кто-то редактирует строку таблицы. selectedRow строка данных 

function showEditDialog(selectedRow){
    var selectedRowData = selectedRow.data();
    var selectedRowIndex = selectedRow.index();
    console.log("showing dialog " + selectedRow.index());
    $("#editTitle").text(selectedRowData[0]);
    for(var col = 0; col < columnDefinitions.length; col++){
        //columnDefinitions is an array with metadata about each column
        // jquery wouldn't work for some reason
        document.getElementById(columnDefinitions[col].columnName + "_input").value = selectedRowData[col];
    }

    $("#modalEditDialog").modal();
    var frm = $('#editForm');
    frm.submit(function(event){
        console.log("submit " + selectedRowIndex);
        event.preventDefault();
        var theData = frm.serialize();
        $.ajax({
            method: 'POST',
            url: 'update.php',
            data: theData,
            success: function(theReply){
                console.log(theReply);
            },
            error: function(xhr, desc, err){
                alert(err);
            }
        });
        var formInputs = $("#modalEditDialog :input[id$=input]");
        for (var i = 0; i < formInputs.length; i++){
            theTable.cell(selectedRowIndex, i).data(formInputs[i].value);
        }
        $("#modalEditDialog").modal('hide');
    });
}

Когда форма вызывается, данные выбранной строки копируются во входные данные, а затем функция отправки копирует обновленные данные из формы обратно в выбранную строку в таблице, а также обновляет их на сервере.

Все это работает просто так, за исключением того факта, что всякий раз, когда он вызывается, он запоминает все времена, когда он вызывался, а также обновляет строки таблицы с последних времен, за исключением того, что он обновляет их с текущими данными в форма.

Если я смотрю журнал консоли, я вижу это: 

//first time I hit the edit button
showing dialog 1428        tapeDB:183:17
submit 1428                tapeDB:193:21
updated 1428  successfully tapeDB:203:29 //from update.php

//next time I hit the edit button:
showing dialog 1427        tapeDB:183:17
submit 1428                tapeDB:193:21 //WTF?
submit 1427                tapeDB:193:21
updated 1427  successfully tapeDB:203:29 //from update.php

И это кумулятивно, поэтому, если я позвоню еще раз, оно будет применено к трем строкам и так далее. Сначала я подумал, что он также не выполняет вызов ajax, но, вероятно, так и есть, только поскольку информация из формы отправляется, сервер обновляет только одну строку.

Вот как я вызываю диалог редактирования (daataa моя таблица): 

$("#daataa tbody").on('dblclick', 'tr', function(){
    showEditDialog(theTable.row("#"+this.id));
});

1 Ответ

0 голосов
/ 23 мая 2019

Хорошо, причина в том, что у меня довольно простое неправильное понимание javascript.Когда я прикрепляю функцию к кнопке отправки, она прикрепляется каждый раз, когда отображается форма, а это означает, что каждый раз добавляется новая копия функции.Я исправил это, удалив функцию из любых предыдущих экземпляров, например так: 

var frm = $('#editForm');
frm.off("submit"); //detach any existing submits.
frm.submit(function(event){…
...