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('<table><thead><tr><th>Items
Available</th></tr></thead><tbody></tbody></table>');
$('item_id',xml).each(function(){
$('#itemtable'+idsource+'
tbody').append('<tr><td>'+$(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 = '<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/
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
