[jQuery] rewriting generic ajax jQuery style
Hi, I'm trying to change a bunch of handwritten Ajax stuff to use jQuery's methods. (I figure, if I'm already including the jquery.js file, I may as well use the heck out of it.)
My current code sends a request to a php page and gets back an xml result I do the standard way of creating a request object(try/catch for MSXML vs XHR)
here is the code to create my request and callback:
var http = createRequestObject(); //this just references that object I just created.
function ajax ( url, callback )
{
http.open ( 'get', url, true );
http.onreadystatechange = callback;
http.send(null);
}
function sendRequest() {
var url = "getItems.php?cat_id=" + idsource;
ajax( url, handleInfo );
}
my handleInfo function does a nice for loop based on an array(object) and generates table html for each "record":
function handleInfo() {
if (http.readyState == 1) {
//document.getElementById("itemtable" +idsource).innerHTML = '<h1>Loading...</h1>'
}
if (http.readyState == 4) {
if (http.status == 200) {
var xmlDoc = http.responseXML.documentElement;
var output;
output = '<table><thead><tr><th>Items Available</th></tr></thead><tbody>';
// Create table rows for each record
for (var i=0; i < xmlDoc.childNodes.length; i++)
{
var linkId = xmlDoc.getElementsByTagName('item_id').item(i).firstChild.data;
output += '<tr>';
output += '<td>'+linkId;
output += '<td><a href="itemdetail.php?item_id='+linkId+'" >'+xmlDoc.getElementsByTagName('item_name').item(i).firstChild.data+'</a></td>';
output += '</tr>';
}
output += '</tbody></table>';
document.getElementById("itemtable" +idsource).innerHTML = output;
}
}
}
Ok, fairly generic routine stuff. Only problem is, I can't bend my mind around the way to do it in jQuery!!! I have started playing around with the .get method:
$(document).ready(function() {
$('#resultcontainer').accordion();
$("dt").click(function(){
idsource = $(this).attr("id");
$.get("getItems.php", {cat_id: idsource}, function(xml){
//build a table from xml results.
var output = '<table><thead><tr><th>Items Available</th></tr></thead><tbody>';
var xmlDoc = xml.documentElement;
//create rows for each result.
for (var i=0; i<xmlDoc.childNodes.length; i++)
{
var linkId = $("item_id", xmlDoc).item(i).firstChild.data;
output += '<tr>';
output += '<td>'+linkId+'</td>';
output += '</tr>';
}
output += '</tbody></table>';
$('#itemtable'+idsource).html(output);
});
})
});
but this seems to cough up errors about linkId not being a function..... Am I at least on the right path?
What this code does is everytime one clicks on a "dt" element, it sends the request based on the id.... (just a number) then it submits the ajax request. I'm really not sure at all how to deal with the object it returns... so that's why you see me treating it just like I would any other xml object.
I'd be happy to post all my code but I don't want to suck up a ton of bandwidth... this being my first post and all that.....
(In a future revision of this code, I'll actually let the accordian wait until the object is returned before I slide it down.....)
Thanks,
-Jim
.-*** Message Scanned by Alachua County McAfee Webshield Appliance ***-.
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/