Jquery/Ajax running before dynamic php content loaded

Question

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!

Answer 1

You need to set:
$.ajaxSetup({ async: false });
and then turn it back on by:
$.ajaxSetup({ async: true });
or use

$.ajax({
async:false
});

Answer 2

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
});