Max Max - 5 months ago 12
Javascript Question

Jquery/Ajax running before dynamic php content loaded

I've got a dynamic page which I'm loading from an external PHP file when the booking link is clicked.

My issue is the jQuery code I need to run straight after it sometimes tries to execute before the PHP page is fully loaded (the follow and remove parts specifically). So when I try load the div, jQuery works sometimes, and other times not.

From what I've seen on other examples

$(document).ready(function()
is supposed to prevent the jQuery executing until the page is fully loaded, however since I'm loading a specific div (content) and not the entire page it seems to not work?

$(document).ready(function(){
$(document).on('click', '.booking', function (){
$('#content').load('calendar.php');

$.getJSON(url,data, function(data) {
$.each(data, function(index, data) {


$("#blocksid"+data.slot_id).css("background-color","#009cd0");
$("#follow"+data.slot_id).hide();
$("#remove"+data.slot_id).show();
});

});
return false;
});
});


Thanks in advance for any assistance!

Don Don
Answer

To achieve what you are expecting in a predicable way you should run dependent javascript code after loading content to div. Just create a call-back function for load method and have your dependent code inside it.

$('#content').load("calendar.php", function() {
  //put the code here, that you need to run after loading content to above div
});