Question

In my website I will have a “browse catalogue” button, which, onclick will change several elements of the page to display the catalogue element. I dont want a full page reload because several elements such as the nav bars and news feed will stay the same.

My question is how can i change several different divs with ajax onclick?

Essentially im not sure how to do place several different components in different divs across a page.

And i know there’s a limit on simultaneous ajax calls, so im sure the proper way to do it wouldnt be to make a unique ajax call for each of my divs.

A little guidance would be great.

Answer 1

Using jQuery, you can get an json array of elements for each block that needs to be updated:

In your html page:

$.get("page.php?id=42",
   function(result){
     $('#title').text(result['title']);
     $('#description').text(result['description']);
     $('#price').text(result['price']);
   }, "json");

In page.php:

$result = array('title' => 'foo', 'description' => 'bar', 'price' => 3);
echo json_encode($result);
header('Content-Type: application/json');
die();