Question

I have on my page (page1.php) a div called result that updates when you click a link with the loadlink id. It sends a url along to page2.php The script is:

$(function() {
  $(".loadlink").click(function(event) {
  event.preventDefault();
  $("#result").load($(this).data('url'));
  });
});

I want it so it also updates another div called crimes after this runs, with data from a url page3.php. How can i change the code to do this?

Answer 1

You can use the callback function of the .load() function to run another AJAX request once this one completes:

$(function() {
    $(".loadlink").click(function(event) {
        event.preventDefault();
        $("#result").load($(this).data('url'), function () {
            $('#crimes').load('page3.php');
        });
    });
});

Note: if the second AJAX request does not rely on the first then you can run them simultaneously (just call them one after another and they will update the DOM whenever then return successfully). You will not know which one will come back first however, that’s the usefulness of the callback function, you will know that one has completed before sending the next request.