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?
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.
#crimes to load until after #result loads. It's unclear from the question exactly what the OP is looking for.
after this runs, but I was adding my note when you posted your comment, so I too am not totally sure what the OP wanted.
.load() call that will be run after the first AJAX request is complete. Inside that function you can run another .load() function call.Just add another load() to the click function.
$(function() {
$(".loadlink").click(function(event) {
event.preventDefault();
$("#result").load($(this).data('url'));
$("#crimes").load('page3.php');
});
});
when you click a link with the loadlink id. The period notation denotes that you are looking for elements with theloadlinkclass.