Создайте форму для отправки вызова, вместо этого создайте спецификацию c для отправки по ее идентификатору - PullRequest
0 голосов
/ 18 февраля 2020

Я сделал в проекте много форм с его "" в той части страницы (сгенерированной php), которая добавляет специфическую c функцию к нему для каждого идентификатора формы и работает, например:

$("#fregistrazione").submit(function(event){
...
}

Я сделал то же самое с деталью html, загруженной с запросом ajax, но не работает. Я подумал сделать по-другому с той же функцией, вызываемой многими формами отправки, вместо того, чтобы иметь одну другую, определенную для любой формы при любой форме отправки, вызвать функцию с дополнительным параметром, который выполняет определенные функции формы c с меньшим количеством дублирования кода. но я не могу заставить его работать. Я сделал много попыток, например:

<form id="f_man-marker_edit-marker" method="post" action="#" onsubmit="TM.editMarker(this)">
...

...
TM.editMarker = function(rform){

    // Abort any pending request
    if (request) { request.abort(); }

    let form = $(rform);

    // Let's select and cache all the fields
    let inputs = form.find("input, select, button, textarea");

    // Serialize the data in the form
    let serializedData = form.serialize();

    // Let's disable the inputs for the duration of the Ajax request.
    // Note: we disable elements AFTER the form data has been serialized.
    // Disabled form elements will not be serialized.
    inputs.prop("disabled", true);

    request = $.ajax({
        url: "ajax.php?req=man-marker_edit-marker",
        type: "post",
        data: serializedData,
        dataType: "html"
    });

    request.done(function (response){
        $("#ajaxoutput2").empty().append(response);
        $("#ResultModal2").modal("show");
    });

    request.fail(function (jqXHR, textStatus, errorThrown){
        console.error(
            "Ajax man-marker_edit-marker request failed. The following error occurred: "+
            textStatus, errorThrown
        );
    });

    request.always(function () {
        inputs.prop("disabled", false);
    });

};

, но при отправке перезагрузил страницу с параметрами как "get" в URL и не выполнил функцию редактирования маркера. Может кто-нибудь, пожалуйста, скажите мне, что я сделал неправильно и как сделать правильный вызов функции из формы отправки, вместо этого выполните .submit для любого идентификатора формы, содержащего десятки повторяющихся строк для каждой формы и не работающего, если генерируется кодом, который является получил через ajax запрос? Спасибо за любой ответ и извините за мой плохой engli sh.

РЕДАКТИРОВАТЬ: я сделал то, что предложено ChrisG, и я попытался добавить параметр в TM.editMarker, но я не нашел, как правильно поддерживать событие в первую очередь параметр и добавьте 2 других параметра. Например, добавив 1 параметр:

TM.editMarker = function (e, ajax_request) {
...

Я пытался (даже если IDE дал мне событие как устаревшее):

$('#f_man-marker_edit-marker').on('submit', TM.editMarker(event, 'man-marker_edit-marker'));

А также без, но в обоих случаях не работают.

РЕДАКТИРОВАТЬ 2: решено с помощью:

$('#f_man-marker_edit-marker').on('submit', function(e){
    TM.editMarker(e, $(this), 'man-marker_edit-marker');
});

...

TM.editMarker = function (e, form, ajax_request) {
...

, но я открыт для лучших решений.

1 Ответ

0 голосов
/ 18 февраля 2020

Простой ответ:

Вы манипулировали DOM, поэтому ваш селектор еще не существует при привязке к событию. Используйте родительский селектор, который уже там, как document

$(document).on("submit", "#fregistrazione", function(event){
   event.preventDefault(); // stop the form submitting if needed
...
});

, таким образом, он будет работать

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...