But that is not enough. Once you got ZF to output the desired response, be it XML or JSON, you need to update your front end to accept that response and make sense out of it. In the video I show how you can grap JSON output with a response JavaScript function and put the variables in their right places on the page.
Key notes in the presentation:
- Setting up action context switcher.
- Creating links using ajaxLink view helper from ZendX_Jquery ...
- ... that invoke the context switcher.
- Review view script to make sure that only final variables are in the view.
- Review view script's design for more comfortable jQuery manipulation.
- Create a callback function in JavaScript that accepts JSON generated by context switcher and ...
- ... applies variables from JSON to the appropriate sections of the page.
Mistake in frontend.js was noted by Yorian
In the video I have <div id="books"> in the loop JSON loop so each book entry becomes an accordion container on its own. To fix that, need to take <div id="books"> outside of the loop. I am also putting all HTML in a string and then appending it at the end becuase if you append <div id="books"> on its own, jQuery parses it as a complete HTML code and puts a self closing /> at the end so the rest of the code breaks. I could, of course, append children but that too complex for this scenario:
1 2 3 4 5 6 7 8 9 10 11 |
function displayBooks(response){ response = JSON.parse(response); $("#booksResponse").html(''); var booksHtml = '<div id="books">'; for(var i in response.books){ booksHtml += '<h3><a href="#">'+response.books[i].title+'</a></h3><div>written by'+response.books[i].author+'</div>'; } booksHtml += '</div>' $("#booksResponse").append(booksHtml); $("#booksResponse #books").accordion({"active":"none", "collapsible" : "true"}); } |
Context Switcher
JSON
ZendX_JQuery ajaxLink
| < Prev | Next > |
|---|
).
