Jim, split it up for readability, this uses the same function I had before.
find() within the scope of the current jQuery object, which in our case
$(this) = <item>...</item>, so find() will look within this element for
elements 'item_id' and 'item_name'. Hope this helps.
$(function(){
$.get('getItems.php',{cat_id:idsource},function(xml){
$('#itemtable'+idsource).append('<table><thead><tr><th>Items
Available</th></tr></thead><tbody></tbody></table>');
$('item',xml).each(function(){
var item_id = $(this).find('item_id').text();
var item_name = $(this).find('item_name').text();
var row = '<tr><td>'+item_id+'</td><td><a href="itemdetail.php
?item_id='+item_id+'">'+item_name+'</a></td></tr>
$('#itemtable'+idsource+' tbody').append(row);
});
});
});
- jake
On 3/6/07, Jim Wharton <[EMAIL PROTECTED]> wrote:
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);
}
})
.-*** Message Scanned by Alachua County McAfee Webshield Appliance ***-.
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
