How to load more than one DIVs using AJAX-JSON combination in zend?

Question

I am learning AJAX in zend framework step by step. I use this question as first step and accepted answer in this question is working for me. Now I want to load more than one DIVs using JSON. Here is my plan.

IndexController.php:

class IndexController extends Zend_Controller_Action {

    public function indexAction() { }

    public function carAction() { }

    public function bikeAction() { }
}

index.phtml:

<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/ajax.js"></script>

<a href='http://practice.dev/index/car' class='ajax'>Car Image</a>
<a href='http://practice.dev/index/bike' class='ajax'>Bike Image</a>

<div id="title">Title comes here</div>
<div id="image">Image comes here</div>

car.phtml:

<?php
$jsonArray['title'] = "Car";
$jsonArray['image'] = "<img src='images/car.jpeg'>";
echo Zend_Json::encode($jsonArray);
?>

bike.phtml:

<?php
$jsonArray['title'] = "Bike";
$jsonArray['image'] = "<img src='images/bike.jpeg'>";
echo Zend_Json::encode($jsonArray);
?>

ajax.js:

jQuery(document).ready(function(){
    jQuery('.ajax').click(function(event){
       event.preventDefault();

       // I just need a js code here that: 
       // load "Car" in title div and car2.jped in image div when "Car Image" link clicked
       // load "Bike" in title div and bike2.jped in image div when "Bike Image" link clicked

      });
});

I think you have got this. When any link with class='ajax' is clicked then it means its AJAX call. index of array(title, image) in phtml files(car.phtml, bike.phtml) show that in which DIV this content should be loaded.

My Question:

Now how to implement ajax.js to do this job if it gets data in json form?

Thanks

Answer 1

YOu could encode your json to have two values for example {value1:"data",value2:"data2"} Then when your ajax returns you can...

jQuery(document).ready(function(){
  jQuery('.ajax').click(function(event){
   event.preventDefault();
     $.ajax({
        url: '<Link to script returning json data>',
        data:json,   //says we are receiving json encoded data
        success: function(json) {
            $('#div1).html('<img src="'+json.value1+'"/>');
            $('#div2).html('<img src="'+json.value2+'"/>');
        }
     });

  });

});

Answer 2

Encode JSON using the Zend Framework as

echo Zend_Json::encode($jsonArray);

If you are already using JSON for serialization, then don't send the images in HTML tags. The disadvantage of doing that is basically the JavaScript code cannot do much with the images other than sticking it into the page somewhere. Instead, just send the path to the images in your JSON.

$jsonArray = array();
$jsonArray['title'] = "Hello";
$jsonArray['image'] = "<img src='images/bike.jpg' />";

On the client side, the received JSON will look like:

{
    "title": "Hello",
    "image": "<img src='images/bike.jpg' />"
}

So the jQuery code needs to loop through key each, and inject a new image into the div with matching key - "image1" or "image2".

jQuery('.ajax').click(function(event) {
    event.preventDefault();
    // load the href attribute of the link that was clicked
    jQuery.getJSON(this.href, function(snippets) {
        for(var id in snippets) {
            // updated to deal with any type of HTML
            jQuery('#' + id).html(snippets[id]);
        }
    });
});