How to start with AJAX/JSON in Zend?

Question

I am working on some projects as a developer(PHP,MySQL) in which AJAX and jQuery is already implemented. But now I want to learn implementation of AJAX and jQuery stuff. Can anyone tell me the exact steps with explanation?

I have created a project in Zend. There is only one controller(IndexController) and two actions(a and b) in my project now. Now I want to use ajax in my project. But I don't know how to start. I read some tutorial but unable to completely understand.

I have index.phtml like this:

<a href='index/a'>Load info A</a>
<br/>
<a href='index/b'>Load info B</a>

<br />
<div id=one>load first here<div>
<div id=two>load second here</div>

Here index is controller in links. a and b are actions.

now I have four files like this:

a1.phtml

I am a1

a2.phtml

I am a2

b1.phtml

I am b1

b2.phtml

I am b2

I think you have got my point.

When user clicks first link (Load info A) then a1.phtml should be loaded into div one and a2.phtml should be loaded into div two

When user clicks second link (Load info B) then b1.phtml should be loaded into div one and b2.phtml should be loaded into div two

Will someone help me? Thanks

Answer 1

I don't know anything about Zend(-controllers) but if you just want to load a1/a2/b1/b2.phtml I think this will help:

Put the following code in the section of the page. It will need the jQuery library to be included.

<script type="text/javascript" src="path/to/jquery-1.4.2.min.js"></script>

The version doesn't have to be 1.4.2 but I've tested the code with that.

I've put explanation in the comments.

<script type="text/javascript">
jQuery(document).ready(function(){ // This function will be executed when the page is loaded
    jQuery('#linkA').click(loadInfoA); // Here a 'click' event is registered on the links
    jQuery('#linkB').click(loadInfoB); // When the user clicks on of the link the functions (loadInfoA, loadInfoB) will be executed
});

function loadInfoA(event){ // This function will load the info from a1.phtml and a2.phtml
    event.preventDefault(); // This is to prevent the link (index/a) from being followed
                            // Otherwise the user would be leaving the page and a1/a2.phtml wouldn't
                            // be loaded into the divs
    jQuery.ajax({ // This is the main AJAX magic read more about it here: http://api.jquery.com/jQuery.ajax/
        url: 'a1.phtml', // this is the page that will be loaded: a1.phtml
        success: function(data){ // this function will be executed when the data is loaded from the server
            jQuery('#one').html(data); // This will take div-one and put the from a1.phtml data in it
        }
    });
    jQuery.ajax({
        url: 'a2.phtml', // a2.phtml will be loaded
        success: function(data){
            jQuery('#two').html(data); // This will take div-two and put the data from a2.phtml in it
        }
    });
}
function loadInfoB(event){ // This function does the same as loadInfoA except that it will load b1/b2.phtml
    event.preventDefault();
    jQuery.ajax({
        url: 'b1.phtml',
        success: function(data){
            jQuery('#one').html(data);
        }
    });
    jQuery.ajax({
        url: 'b2.phtml',
        success: function(data){
            jQuery('#two').html(data);
        }
    });
}
</script>

I've edited your HTML slightly so that jQuery can register a click event on the links

<a href='index/a' id="linkA">Load info A</a>
<br/>
<a href='index/b' id="linkB">Load info B</a>
<br />

<div id="one">load first here</div>
<div id="two">load second here</div>

PS: This is my first contribution on Stack Overflow. Please let me know if it was helpful, or what could be improved