0

I'm using jQuery AJAX to reload only a DIV content without refreshing the whole page. The new results will shown in the DIV.

Now the problem is that these results have buttons which use jQuery AJAX as well. When the AJAX loads the DIV content, these buttons can't use AJAX again because the AJAX is not reloaded or something like that(?). It only works fine when the whole page is reloaded but that is not what I want.

How can I use AJAX scripts again when the DIV content is reloaded?

jQuery AJAX script to add result and reload only div with results:

$(document).ready(function(){
    $('#form_disabled_date').submit(function(e){
        e.preventDefault();
        var form = $(this);
        var result = $('#disabled_date');
        var post_url = form.attr('action');
        var post_data = form.serialize();
        $.ajax({
            type: 'POST',
            url: post_url,
            data: post_data,
            success: function(msg) {
                $(result).fadeOut(500, function(){
                    result.load(document.URL +  ' #disabled_date').fadeIn();
                });
            }
        });
    });
});

HTML:

<div id="disabled_date">
   result1 (delete), result2 (delete), result3 (delete) <-- results loaded with PHP
</div>

jQuery AJAX for submit delete button and reload only div with results:

$(document).ready(function(){

$('.form_delete_disabled_date').submit(function(e){

    e.preventDefault();
    var form = $(this);
    var result = $('#disabled_date');
    var post_url = form.attr('action');
    var post_data = form.serialize();

    $.ajax({

        type: 'POST',
        url: post_url,
        data: post_data,
        success: function() {

            $(result).fadeOut(500, function(){
                result.load(document.URL +  ' #disabled_date').fadeIn();
            });

        }

    });

});

});

The results are add by a form with id: "form_disabled_date". The div "disabled_date" is reload with the JavaScript code above. the delete buttons had class: "form_delete_disabled_date".

How can I reload the div content and still use jQuery which is not reloaded?

SOLUTION: I had to change the following code:

$(document).ready(function(){

  $('.form_delete_disabled_date').submit(function(e){
    //code
  });
});

To:

$(document).on('submit', '.form_delete_disabled_date', function(e){
    //code
});

Now the submit event is bind to "form_delete_disabled_date" when the AJAX reloaded the div but not the page. The new results can use the code now.

Jason Aller
  • 3,541
  • 28
  • 38
  • 38
Bas Verhagen
  • 3
  • 5
  • Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) – Taplar Mar 09 '18 at 16:40
  • That's not my solution I think. When a part of the document is reloaded with AJAX, the AJAX is not working any more. It works only when the whole document is reloaded but that is not what I want. – Bas Verhagen Mar 09 '18 at 17:06
  • If your ajax removes the `$('#form_disabled_date')` that has the submit handler bound to it, then that ajax will no longer fire. Thus the binding on dynamic elements possible duplicate. – Taplar Mar 09 '18 at 17:09
  • You mean that I have to bind the submit handler again to $('#form_disabled_date') in the ajax succes? How can I do that? – Bas Verhagen Mar 09 '18 at 17:18
  • *points to that duplicate link* When you do `$(selector).on(event ...)` you are making jQuery associate an event handler to specific elements in the DOM. If those elements are removed/replaced with different elements, those different elements will not have the bindings on them as you did not bind to them. You bound to the old ones. Delegate binding, as detailed in the duplicate answer, is a way to handle this situation. – Taplar Mar 09 '18 at 17:22
  • Yay I understand now! Solution in question above. Thanks Taplar – Bas Verhagen Mar 09 '18 at 18:20
  • Rather than adding the solution to the question you could post it as an answer and mark it as the accepted answer. – Jason Aller May 23 '18 at 22:50

0 Answers0