0

So basically, I'm making a website with a form inside a modal. After that form submits the data to script.php, whatever script.php sends back is appended to the modal body like so:

// Function to submit data to php
$("#formModificarArticulo").on("submit", function(e) {

    var postData = $(this).serializeArray();
    var formURL = $(this).attr("action");

    $.ajax({
        url: formURL,
        type: "POST",
        data: postData,
        success: function(data, textStatus, jqXHR) {
            $('#divModificarArticulo .modal-header .modal-title').html("Resultado");
            $('#divModificarArticulo .modal-body').html(data);
            $("#submitFormModificar").remove();
            reloadDataTable();
        },
        error: function(jqXHR, status, error) {
            console.log(status + ": " + error);
        }
    });

    e.preventDefault();
});

$("#submitFormModificar").on('click', function() {
    console.log("Submit presionado");
    $("#formModificarArticulo").submit();
});

So, basically, when the user sends data using the form inside the modal, the modal changes to show something along the lines of "Data sent to server successfully".

After the result from script.php is showed to the user and the user closes it, the modal is supposed to revert back to its original state with the form. This is the function where that magic happens:

// Function to reset modal
(function(){

    var template = null;

    $('#divModificarArticulo').on('show.bs.modal', function (event) {
        if (template == null) {
            template = $(this).html();
        } else {
            $(this).html(template);
        }

        $('#divModificarArticulo').modal({ show: false});
    })

})();

The thing is, I can send data pressing the Submit button on the form, the modal brings me the back the results from the server and when I open the modal for a second time the form is back to its original state. For some reason, however, when I press the Submit button for a second time, it doesn't do anything. It's like it's not even pressed.

I'd really appreciate if someone could help me out.

Luciano Porta
  • 5
  • 2
  • `$("#submitFormModificar").remove();` you are removing an element from the dom that you have a click event handler on. – Taplar Jun 22 '18 at 16:18
  • I do, but I only remove it because I'm showing the result of the query so the user sees a message like "Data sent to server successfully." and a Close button. I don't need a submit button for that because the data has already been submited. After the user closes the modal with the result, the modal is supposed to reset to its original state (with the form) bringing the Submit button back. – Luciano Porta Jun 23 '18 at 13:49
  • When you destroy an element, all bindings you put on it are also destroyed. If you do not put them back, they will not exist. – Taplar Jun 25 '18 at 14:22
  • Yes! Just like you were saying, all the bindings on my code were being destroyed, so that's why JS was not picking them up. Thank you so much for taking the time to reply, I really appreciate it <3 – Luciano Porta Jun 26 '18 at 01:57

0 Answers0