CODEWITHSUNDEEP
javascriptjqueryajax
Thomas Bang
Thomas Bang

Reputation: 3

jQuery Load And Ajax Forms Not Working Together

I've created a news system, where i should be able to edit articles dynamically without redirect, from a modal. Also, i should be able to delete and create articles.

When something is changed, jQuery Load is called, but the problem is when i have to edit the loaded content.

    $("#toolbox-items").load('inc-toolbox');

The above code loads the articles (the file is called inc-toolbox on purpose and works fine).

    $(function () {
        $('form').on('submit', function(e) {
            e.preventDefault();
            var clicked = document.activeElement.getAttribute('name');
            $.ajax({
                type: 'post',
                url: 'process-toolbox',
                data: $(this).serialize() + "&" + clicked + "=success",
                success: function (response) {
                    $("#toolbox-items").load('inc-toolbox');
                    $('.modal-backdrop').remove();
                }
            });
        });
    });

But, when ever something has to be edited or deleted, the whole page reloads and nothing changes, although i'm still able to add things.

The add-button is not loaded dynamically from the script, but is in there from the start.

What in the world might the problem be?

Upvotes: 0

Views: 29

Answers (1)

Anirudha Gupta
Anirudha Gupta

Reputation: 9289

Try code like this

  $(function () {
        $(document).on('submit','form', function(e) {
            e.preventDefault();
            var clicked = document.activeElement.getAttribute('name');
            $.ajax({
                type: 'post',
                url: 'process-toolbox',
                data: $(this).serialize() + "&" + clicked + "=success",
                success: function (response) {
                    $("#toolbox-items").load('inc-toolbox');
                    $('.modal-backdrop').remove();
                }
            });
        });
    });

Upvotes: 2

Related Questions