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

Answer 1

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]);
        }
    });
});

Answer 2

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+'"/>');
        }
     });

  });

});