Re: [jQuery] rewriting generic ajax jQuery style

2007-03-12 Thread Jim Wharton 
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 = 
'tabletheadtrthItems Available/th/tr/theadtbody';   
   
// 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 += 'tda 
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 = 
 'h1Loading.../h1'
 }
 if (http.readyState == 4) {
 if (http.status == 200) {
 var xmlDoc = http.responseXML.documentElement;
 var output;
 output = 'tabletheadtrthItems 
 Available/th/tr/theadtbody';
 // 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 += 'tda 
 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

Re: [jQuery] rewriting generic ajax jQuery style

2007-03-06 Thread Sam Collett 
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 = 
 'h1Loading.../h1'
 }
 if (http.readyState == 4) {
 if (http.status == 200) {
 var xmlDoc = http.responseXML.documentElement;
 var output;
 output = 'tabletheadtrthItems 
 Available/th/tr/theadtbody';
 // 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 += 'tda 
 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 = 
 'tabletheadtrthItems Available/th/tr/theadtbody';
 var xmlDoc = 
 xml.documentElement;
 //create rows for each result.
 for (var i=0; 
 ixmlDoc.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 = 'tabletheadtrthItems
Available/th/tr/theadtbody';
  //create rows for each result.

Re: [jQuery] rewriting generic ajax jQuery style

2007-03-06 Thread Jake McGraw 

Or, perhaps even more in line jQuery philosophy (try to reduce code as much
as possible):

$(function(){
   $.get('getItems.php',{cat_id:idsource},function(xml){
   $('#itemtable'+idsource).append('tabletheadtrthItems
Available/th/tr/theadtbody/tbody/table');
   $('item_id',xml).each(function(){
   $('#itemtable'+idsource+'
tbody').append('trtd'+$(this).text()+'/td/tr');
   });
   });
});

Basically, there are a ton of different ways to do this using jQuery.
Additionally, since your delivering such simple data, XML isn't really
necessary, why not use json? PHP 5.2 and greater has a built in
json_encode/decode, which will turn php arrays and objects into json
strings. This will seriously cut down on the amount of information you have
to send. Email me if you'd like more info.

- jake



On 3/6/07, Sam Collett [EMAIL PROTECTED] wrote:


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 = 'h1Loading.../h1'
 }
 if (http.readyState == 4) {
 if (http.status == 200) {
 var xmlDoc =
http.responseXML.documentElement;
 var output;
 output = 'tabletheadtrthItems
Available/th/tr/theadtbody';
 // 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 += 'tda 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 =
'tabletheadtrthItems Available/th/tr/theadtbody';
 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

Re: [jQuery] rewriting generic ajax jQuery style

2007-03-06 Thread Jim Wharton 
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 = 
'tabletheadtrthItems Available/th/tr/theadtbody';   
   
// 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 += 'tda 
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 = 
 'h1Loading.../h1'
 }
 if (http.readyState == 4) {
 if (http.status == 200) {
 var xmlDoc = http.responseXML.documentElement;
 var output;
 output = 'tabletheadtrthItems 
 Available/th/tr/theadtbody';
 // 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 += 'tda 
 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

Re: [jQuery] rewriting generic ajax jQuery style

2007-03-06 Thread Jake McGraw 

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('tabletheadtrthItems
Available/th/tr/theadtbody/tbody/table');
   $('item',xml).each(function(){
   var item_id = $(this).find('item_id').text();
   var item_name = $(this).find('item_name').text();
   var row = 'trtd'+item_id+'/tdtda 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 =
'tabletheadtrthItems Available/th/tr/theadtbody';
// 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 += 'tda
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 = 'h1Loading.../h1'
 }
 if (http.readyState == 4) {
 if (http.status == 200) {
 var xmlDoc =
http.responseXML.documentElement;
 var output;
 output = 'tabletheadtrthItems
Available/th/tr/theadtbody';
 // Create table rows for each record
 for (var i=0; i 
xmlDoc.childNodes.length; i++)
 {
 var linkId

Re: [jQuery] rewriting generic ajax jQuery style

2007-03-06 Thread Jim Wharton 
Ok, here's another question I've got this code working:

$(document).ready(function() {
$('#resultcontainer').accordion();
$(dt).click(function(){
idsource = $(this).attr(id);
$.ajax({
   type: GET,
   url: getItems.php,
   data: {cat_id: idsource},
   dataType: xml,
   success: function(xml){
  //build a table from xml results.
  var output = 
'tabletheadtrthItems Available/th/tr/theadtbody';
  //create rows for each result.
  $(item_id, xml).each(
 function() {
var linkId = 
$(this).text();
output += 'tr';
output += 
'td'+$(this).text()+'/td';
output += 'tda 
href=itemdetail.php?item_id='+linkId+' 
'+$(this).siblings().text()+'/a/td';
output += '/tr';
 }
  )
  output += '/tbody/table';
  
$('#itemtable'+idsource).html(output);
   }
})
}) 
});

I just looked for a nextSibling style analouge in jQuery. Would it be more 
benificial to change the node I am getting out of the XML file and grab both 
its children? or is this method ok?. Which one would be faster? Selecting two 
children? or selecting siblings?

Thanks, 
-Jim


.-*** Message Scanned by Alachua County McAfee Webshield Appliance ***-.
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] rewriting generic ajax jQuery style

2007-03-06 Thread Jake McGraw 

Jim, you can use the siblings() exactly as you put in your code, the only
thing you should watch out for is siblings() will return a group of jQuery
objects, which in your case doesn't matter as item_id only has a single
sibling, item_name. When you chain text() to a group of jQuery objects, only
the first jQuery object returns its text. I'm not up on performance issues
with jQuery, like I said before, there are a couple of ways of doing this,
and you typically (in my experience) won't see performance differences
between methods (say using XPath instead of CSS or find()) until you start
dealing with a large (300+) dataset (at which point I'd forgo ajax and just
deliver using html).

- jake

On 3/6/07, Jim Wharton [EMAIL PROTECTED] wrote:


Ok, here's another question I've got this code working:

$(document).ready(function() {
$('#resultcontainer').accordion();
$(dt).click(function(){
idsource = $(this).attr(id);
$.ajax({
   type: GET,
   url: getItems.php,
   data: {cat_id: idsource},
   dataType: xml,
   success: function(xml){
  //build a table from xml
results.
  var output =
'tabletheadtrthItems Available/th/tr/theadtbody';
  //create rows for each
result.
  $(item_id, xml).each(
 function() {
var linkId
= $(this).text();
output += 'tr';
output +=
'td'+$(this).text()+'/td';
output += 'tda
href=itemdetail.php?item_id='+linkId+'
'+$(this).siblings().text()+'/a/td';
output += '/tr';
 }
  )
  output +=
'/tbody/table';

  
$('#itemtable'+idsource).html(output);
   }
})
})
});

I just looked for a nextSibling style analouge in jQuery. Would it be
more benificial to change the node I am getting out of the XML file and grab
both its children? or is this method ok?. Which one would be faster?
Selecting two children? or selecting siblings?

Thanks,
-Jim


.-*** 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/

Re: [jQuery] rewriting generic ajax jQuery style

2007-03-06 Thread Jim Wharton 
thank you immensely for all your help. I'll start rewriting the accordion code 
in a day or so.
-Jim

-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Behalf Of Jake McGraw
Sent: Tuesday, March 06, 2007 3:30 PM
To: jQuery Discussion.
Subject: Re: [jQuery] rewriting generic ajax jQuery style


Jim, you can use the siblings() exactly as you put in your code, the only thing 
you should watch out for is siblings() will return a group of jQuery objects, 
which in your case doesn't matter as item_id only has a single sibling, 
item_name. When you chain text() to a group of jQuery objects, only the first 
jQuery object returns its text. I'm not up on performance issues with jQuery, 
like I said before, there are a couple of ways of doing this, and you typically 
(in my experience) won't see performance differences between methods (say using 
XPath instead of CSS or find()) until you start dealing with a large (300+) 
dataset (at which point I'd forgo ajax and just deliver using html). 

- jake


On 3/6/07, Jim Wharton  [EMAIL PROTECTED] wrote: 

Ok, here's another question I've got this code working:

$(document).ready(function() {
$('#resultcontainer').accordion();
$(dt).click(function(){ 
idsource = $(this).attr(id);
$.ajax({
   type: GET,
   url:  getItems.php,
   data: {cat_id: idsource},
   dataType: xml,
   success: function(xml){ 
  //build a table from xml results.
  var output = 
'tabletheadtrthItems Available/th/tr/theadtbody'; 
  //create rows for each result.
  $(item_id, xml).each(
 function() { 
var linkId = 
$(this).text();
output += 'tr';
output += 
'td'+$(this).text()+'/td'; 
output += 'tda 
href=itemdetail.php?item_id='+linkId+' 
'+$(this).siblings().text()+'/a/td';
output += '/tr'; 
 }
  )
  output += '/tbody/table';
  
$('#itemtable'+idsource).html(output); 
   }
})
})
});

I just looked for a nextSibling style analouge in jQuery. Would it be more 
benificial to change the node I am getting out of the XML file and grab both 
its children? or is this method ok?. Which one would be faster? Selecting two 
children? or selecting siblings? 

Thanks,
-Jim


.-*** Message Scanned by Alachua County McAfee Webshield Appliance ***-.
___
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/

Re: [jQuery] rewriting generic ajax jQuery style

2007-03-06 Thread Jake McGraw 

No problem, welcome to jquery.

- jake

On 3/6/07, Jim Wharton [EMAIL PROTECTED] wrote:


 thank you immensely for all your help. I'll start rewriting the accordion
code in a day or so.
-Jim

-Original Message-
*From:* [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
Behalf Of *Jake McGraw
*Sent:* Tuesday, March 06, 2007 3:30 PM
*To:* jQuery Discussion.
*Subject:* Re: [jQuery] rewriting generic ajax jQuery style

Jim, you can use the siblings() exactly as you put in your code, the only
thing you should watch out for is siblings() will return a group of jQuery
objects, which in your case doesn't matter as item_id only has a single
sibling, item_name. When you chain text() to a group of jQuery objects, only
the first jQuery object returns its text. I'm not up on performance issues
with jQuery, like I said before, there are a couple of ways of doing this,
and you typically (in my experience) won't see performance differences
between methods (say using XPath instead of CSS or find()) until you start
dealing with a large (300+) dataset (at which point I'd forgo ajax and just
deliver using html).

- jake

On 3/6/07, Jim Wharton [EMAIL PROTECTED] wrote:

 Ok, here's another question I've got this code working:

 $(document).ready(function() {
 $('#resultcontainer').accordion();
 $(dt).click(function(){
 idsource = $(this).attr(id);
 $.ajax({
type: GET,
url:  getItems.php,
data: {cat_id: idsource},
dataType: xml,
success: function(xml){
   //build a table from xml
 results.
   var output =
 'tabletheadtrthItems Available/th/tr/theadtbody';
   //create rows for each
 result.
   $(item_id, xml).each(
  function() {
 var
 linkId = $(this).text();
 output += 'tr';
 output
 += 'td'+$(this).text()+'/td';
 output += 'tda
 href=itemdetail.php?item_id='+linkId+'
 '+$(this).siblings().text()+'/a/td';
 output += '/tr';
  }
   )
   output +=
 '/tbody/table';
   
$('#itemtable'+idsource).html(output);

}
 })
 })
 });

 I just looked for a nextSibling style analouge in jQuery. Would it be
 more benificial to change the node I am getting out of the XML file and grab
 both its children? or is this method ok?. Which one would be faster?
 Selecting two children? or selecting siblings?

 Thanks,
 -Jim


 .-*** Message Scanned by Alachua County McAfee Webshield Appliance ***-.
 ___
 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/


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

[jQuery] rewriting generic ajax jQuery style

2007-03-05 Thread Jim Wharton 
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 = 
'h1Loading.../h1'
}
if (http.readyState == 4) {
if (http.status == 200) {   
var xmlDoc = http.responseXML.documentElement;
var output;
output = 'tabletheadtrthItems 
Available/th/tr/theadtbody';  
// 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 += 'tda 
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 = 
'tabletheadtrthItems Available/th/tr/theadtbody';
var xmlDoc = 
xml.documentElement;
//create rows for each result.
for (var i=0; 
ixmlDoc.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/

Re: [jQuery] rewriting generic ajax jQuery style

2007-03-05 Thread Jake McGraw 

Jim,  could you post a version of the XML data you'd expect?

- jake

On 3/5/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
= 'h1Loading.../h1'
}
if (http.readyState == 4) {
if (http.status == 200) {
var xmlDoc =
http.responseXML.documentElement;
var output;
output = 'tabletheadtrthItems
Available/th/tr/theadtbody';
// 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 += 'tda 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 =
'tabletheadtrthItems Available/th/tr/theadtbody';
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/

___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/