that actually works quite well. I'll also need to parse the item_name from the
xml. It may benifit me more to yank the parent element and then spit back out
both childNodes... only thing is the second childNode "item_name" will have to
be a link. I suppose I could add an "href" attribute using DOM methods or
simply just screw around with the html that is output.
How do I reference more than one tag in the xml?
Here is my current working code:
$(document).ready(function() {
$('#resultcontainer').accordion();
$("dt").click(function(){
idsource = $(this).attr("id");
$.get("getItems.php", {cat_id:
idsource}, function(xml){
var xmlDoc =
xml.documentElement;
var 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;
});
})
});
I'm not unhappy with it, but I'd like to learn more about how I could do this
in jQuery... I've rewritten this app so many times... once with PHP returning
HTML snips, once with pure DOM (no innerHTML) once with mootools and now I'm
really getting in to jQuery.
Thanks!
-Jim
-----Original Message-----
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
Behalf Of Sam Collett
Sent: Tuesday, March 06, 2007 10:02 AM
To: jQuery Discussion.
Subject: Re: [jQuery] rewriting generic ajax jQuery style
On 05/03/07, Jim Wharton <[EMAIL PROTECTED]> wrote:
> 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
Have you looked at the ajax method? I think this may work:
$.ajax({
type: "GET",
url: "getItems.php",
data: {cat_id: idsource},
dataType: "xml",
success: function(xml){
//build a table from xml results.
var output = '<table><thead><tr><th>Items
Available</th></tr></thead><tbody>';
//create rows for each result.
for (var i=0; i<xml.childNodes.length; i++)
{
var linkId = $("item_id", xml).item(i).firstChild.data;
output += '<tr>';
output += '<td>'+linkId+'</td>';
output += '</tr>';
}
output += '</tbody></table>';
$('#itemtable'+idsource).html(output);
}
})
Or, perhaps even better (a more jQuery way):
$.ajax({
type: "GET",
url: "getItems.php",
data: {cat_id: idsource},
dataType: "xml",
success: function(xml){
//build a table from xml results.
var output = '<table><thead><tr><th>Items
Available</th></tr></thead><tbody>';
//create rows for each result.
$("item_id", xml).each(
function() {
output += '<tr>';
output += '<td>'+$(this).text()+'</td>';
output += '</tr>';
}
)
output += '</tbody></table>';
$('#itemtable'+idsource).html(output);
}
})
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
.-=== Message Scanned by Alachua County McAfee Webshield Appliance ===-.
.-*** Message Scanned by Alachua County McAfee Webshield Appliance ***-.
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
