- Simple AJAX Calls
- Processing XML Responses
- Global AJAX Events
- Summary
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Processing XML Responses
The XML responses returned by the server-side scripts cannot be inserted directly into the web page; you have to use the $.get() method to fetch XML documents and a callback function to process them.
We'll use this approach in the second step of the FAQ application; whenever a category is clicked in the list of categories, the list of questions in XML format is fetched from the server. The client-side code is a bit more complex, as we're fetching the questions only when a category is expanded for the first time; afterwards, the client-side code should handle all the expand/collapse functionality.
To test whether the list of questions for a category has already been fetched, we're checking whether the LI element that contains the clicked link (category name) has a UL successor (list of questions). If so, the expandOrCollapse function displays or hides the questions; otherwise, the jQuery $.get() method is called to fetch the data. The anonymous callback function in the $.get() method call handles the XML processing: It calls the insertQuestions function supplying the original LI element and the returned XML data.
function expandCategory() {
var li = $(this).parents("li:first");
if (!li.length) throw("Expected LI element as parent of A element");
var nxt = li.next();
if (nxt.is("ul")) {
expandOrCollapse(li);
} else {
$.get(this.href + "&mode=ajax",function(data) {
insertQuestions(li,data); });
}
return false;
}
function expandOrCollapse(li) {
var nxt = li.next(); if (!nxt.is("ul")) return;
li.toggleClass("collapsed").toggleClass("expanded");
nxt.toggle();
}
The insertQuestions function uses the jQuery selectors to extract a list of questions from the XML response and .each() method to iterate over them. For each question, an LI element with a hyperlink is created and appended to the UL element, which is finally inserted next to the category title (the original LI element):
function insertQuestions(li,data) {
var ul = $("<ul>").insertAfter(li);
$("Question",data).each(function () {
var q = $(this);
ul.append("<li><a href='answer.asp?question="+
q.attr("id")+"'>"+q.text()+"</a></li>");
});
ul.hide().find("a").click(loadQuestion);
expandOrCollapse(li);
}
You can learn a few useful jQuery tricks from the insertQuestion function:
- The .each() method calls its parameter as an object method. The element in the list over which the .each() method iterates is passed in this variable, which is not directly usable for further jQuery processing. You have to pass the this variable to the jQuery constructor function ($()) to turn it into a jQuery object.
- The .attr() method is used to get the value of an XML attribute, and the .text() method extracts the text children of the XML node.
- Instead of a complex sequence of constructor calls, the LI and A elements are constructed with inline HTML, which is passed directly to the .append() method and thus appended to the UL element.
- The .find() method is used to find all A children of the newly constructed UL element, and the click method is chained after it to set the event handler on all links.