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/
