Multiple Ajax calls?

Question

How can I update multiple parts from a page with Ajax?

I have two divs and two PHP files. Using jQuery Ajax I want to fill a div with the data recieved from a PHP file and the other with the data recieved from the other.

I am not familiar with ajaxcomplete() function etc. Should I use two functions, or one with paramaters? Please give me some ideas. Thanks.

Answer 1

Its always good to have a single ajax call. You can call a php file that will return content for both the div's.

Div contents can be differentiated using Jquery Ajax Json dataType:

$.ajax({
  url: test.php,
  dataType: 'json',
  data: data,
  success: function(responce){
     $("#firstDivData").html(responce.firstDivContent)
     $("#secondDivData").html(responce.secondDivContent)
  }
});

PHP script: test.php

<?php
  $divContents = array();
  $divContents['firstDivContent'] = "First div content here";
  $divContents['secondDivContent'] = "Second div content here";
  echo json_encode($divContents);
?>

Answer 2

You can simply use two $.load calls, like so:

$("#firstDiv").load("first.php", {someParam: "foo"}, function() {
    // request has completed
});

$("#secondDiv").load("second.php", {anotherParam: "bar"}, function() {
    // request has completed
});