AndyRob7 AndyRob7 - 3 months ago 15
HTML Question

Run JS after div contents loaded from AJAX

There are a ton of proposed answers to my question, but even with all the answers I have found, I can not seem to get any to work. I can make the JS work by adding a delay in execution of the code, but I can't rely on a delay to execute the JS after div has finished loading it's HTML.

I'm creating a page where users can search for an item, and the results are displayed in a

div
using
AJAX
. I need some JS to run after the div's html has finished loading. Some of the results data will be hidden until a user clicks on it. The JS code to accomplish this is what I am trying to run once the div finishes loading.

I have tried the following extensively with no luck anywhere:


  • .load

  • .ajaxComplete

  • .complete

  • .success

  • .done

  • Document.ready

  • I'm sure there are a few others as well, but my brain is just too beat up from dealing with this to remember everything I've tried so far.



My HTML:


<form name ="CardName" method="post" action="">
<div "class="w2ui-field">
<div> <input type="list" Name="CardName" id="CardName" style="width: 80%;"></div>
</div>
<div class="w2ui-buttons">
<input type="submit" name="search" style="clear: both; width:80%" value="Search" class="btn">
</div>
</form>
<div class="Results" id="Results" name="Results"></div>


My JS:


$(function() {
$("#CardSearch").bind('submit',function() {
var value = $('#CardName').val();
$.ajax({
method: "POST",
url: "synergies.php",
data: {value}
})
.success(function(data) {
$("#Results").html(data);
})
.complete(function() {
alert("div updated!"); //Trying to run JS code AFTER div finishes loading
});
return false;
});
});


If there is anything else that could help with this request just let me know!

Thanks in advance!

Answer

Note that success and failure are options that you should provide to the $.ajax call, not the returned promise. Also, bind is deprecated in favour of on since jQuery 1.7. Finally, you need to give the value that you're posting to your PHP page a key so that it can be retrieved via $_POST. Try this:

$("#CardSearch").on('submit', function(e) {
    e.preventDefault();

    $.ajax({
        method: "POST",
        url: "synergies.php",
        data: {
            CardName: $('#CardName').val()
        },
        success: function(data) {
            $("#Results").html(data);
        },
        complete: function() {
            alert("div updated!"); //Trying to run JS code AFTER div finishes loading
        }
    })
});

You can then retrieve the value sent in your synergies.php file using $_POST['CardName'].

If you prefer to use the method provided by the returned promise, you can do that like the below, although the result is identical.

$("#CardSearch").on('submit', function(e) {
    e.preventDefault();

    $.ajax({
        method: "POST",
        url: "synergies.php",
        data: {
            CardName: $('#CardName').val()
        }
    }).done(function(data) {
        $("#Results").html(data);
    }).always(function() {
        alert("div updated!"); 
    })
});