[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
[email protected]
http://jquery.com/discuss/