AJAX help...

[MagSafe]

Hi all,

I'm having a bit of trouble with this AJAX function i'm writing. I'm trying to create a table that lists pages and have a feature similar to Spotlight where it will re-order to table everytime you type in a keystroke.

I've got the basic's working so far, it'll recognise that you've entered a keystroke, generate an xml file and then start to output the results from the xml into the table. But for some reason, I can't get the table to output properly.

My problem is that it'll show the table's header when there are no results (which is what should be happening), but then only show the last couple of columns in only 1 row, rather than it looping through a few of them.

I think it's something to do with the loop, but I just can't seem to figure it out, hopefully someone here can help :)

Oh, and its not returning any error codes :confused:

sample xml
<admin>
<page>
<pageID>1</pageID>
<pageTitle>Home</pageTitle>
<pageCatAssoc>1</pageCatAssoc>
<pageKbCat>0</pageKbCat>
<pageSearchable>yes</pageSearchable>
</page>
</admin>

javascript function
var xmlHttp

function instantSearch()
{
// put GetXmlHttpObject function into variable
xmlHttp = GetXmlHttpObject()

// inform user if browser doesn't support AJAX
if (xmlHttp == null)
{
alert ("Your browser does not support this feature");
return;
}

var query = document.getElementById('instantSearch').value;

// build url
var url = "instantSearch.asp";
url = url + "?q="+query;
//url = url + "?type=pages";
url = url + "&sid="+Math.random();

var pages

xmlHttp.open("GET",url,true);

// use asp file to run sql query
xmlHttp.onreadystatechange=function(){
if (xmlHttp.readyState == 4)
{
var xml = xmlHttp.responseXML;
var page = xml.documentElement.getElementsByTagName("page");

var pageID = xml.documentElement.getElementsByTagName("pageID");
var pageTitle = xml.documentElement.getElementsByTagName("pageTitle");
var pageCatAssoc = xml.documentElement.getElementsByTagName("pageCatAssoc");
var pageKbCat = xml.documentElement.getElementsByTagName("pageKbCat");
var pageSearchable = xml.documentElement.getElementsByTagName("pageSearchable");

var pages = "";
document.getElementById("content").innerHTML = pages;

// start table
pages = pages + "<table cellpadding=\"0\" cellspacing=\"0\" class=\"adminTable\">";

// output table header
pages = pages + "<tr class=\"header\">";
pages = pages + "<td>Page Title</td>";
pages = pages + "<td>Menu</td>";
pages = pages + "<td>Category</td>";
pages = pages + "<td>Searchable?</td>";
pages = pages + "<td colspan=\"3\">Options</td>";
pages = pages + "</tr>";

for (var i = 0; i < page.length; i++)
{
pages = pages + "<tr>";

//output the page title
pages = pages + "<td>";
pages = pages + pageTitle[i].childNodes[0].nodeValue;
pages = pages + "</td>";

//output the page's associated menu category
pages = pages + "<td>";
pages = pages + pageCatAssoc[i].childNodes[0].nodeValue;
pages = pages + "</td>";

//output pages associated knowledge base category
pages = pages + "<td>";
pages = pages + pageKbCat[i].childNodes[0].nodeValue;
pages = pages + "</td>";

//output a tick if page is searchable
pages = pages + "<td style=\"text-align: center;\">";
pages = pages + pageSearchable[i].childNodes[0].nodeValue;
pages = pages + "</td>";

//output edit button
pages = pages + "<td>";
pages = pages + "<a href=\"javascript:EditShowMe('" & pageID[i].childNodes[0].nodeValue & "')\" title=\"Edit\">";
pages = pages + "<img src=\"../gfx/adminButtons/edit.gif\" alt=\"Edit\" width=\"40px\" height=\"23px\" />";
pages = pages + "</a>";
pages = pages + "</td>";

//output delete button
pages = pages + "<td>";
pages = pages + "<a href=\"pages.asp?deletePage=yes&PageID=" & pageID[i].childNodes[0].nodeValue & "\" onclick=\"return confirm('Are you sure you want to permanently delete the &quot;" & pageTitle[i].childNodes[0].nodeValue & "&quot; page?');\" title=\"Delete\">";
pages = pages + "<img src=\"../gfx/adminButtons/delete.gif\" alt=\"Delete\" width=\"54px\" height=\"23px\" />";
pages = pages + "</a>";
pages = pages + "</td>";

//output view button
pages = pages + "<td>";
pages = pages + "<a href=\"javascript:viewPage('" & pageID[i].childNodes[0].nodeValue & "')\" title=\"View\">";
pages = pages + "<img src=\"../gfx/adminButtons/view.gif\" alt=\"View\" width=\"40px\" height=\"23px\" /></a>";
pages = pages + "</td>";

//end row
pages = pages + "</tr>";
}

pages = pages + "</table>";

// output everything
document.getElementById("content").innerHTML = pages;
}
}

xmlHttp.send(null);
}

function GetXmlHttpObject()
{
var xmlHttp=null;

try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}

return xmlHttp;
}

[MagSafe]

ahh... i just fixed it!

it was such a stupid mistake as well ...after spending practically the entire morning at work trying to get this working, all i did was replace the following...

pages = pages + "<a href=\"javascript:viewPage('" & pageID[i].childNodes[0].nodeValue & "')\" title=\"View\">";

with

pages = pages + "<a href=\"javascript:viewPage('" + pageID[i].childNodes[0].nodeValue + "')\" title=\"View\">";

this is such a cool function though, well worth the aggrovation!

[spotcatbug]

Ha ha ha. Oops. Too much VB in your brain.

[MagSafe]

Ha ha ha. Oops. Too much VB in your brain.

Very, very true ;) :p

I'm currently adapting the CMS i've written in VBScript to mostly AJAX and HTML.

From what i've found so far; AJAX is by far a whole lot better. It makes things so much faster when you only need to load a certain amount of information for the user, instead of writing out everything that they might or might not need.

I don't suppose anyone know's of a way to run a javascript function when the page loads? I don't want to use an onLoad event as I want other things to appear first on the page. Something that I can just place inside a div that launches the javascript function to output the above table.

Thanks :)

[Gargoyle]

The onLoad should be the best method to use since it should only be triggered once the page has been fully loaded.

However, you can just have a script tag at the end of the document that calls the functions. Just make sure that any DOM elements that you try to use in your JavaScript exist on the page at the time you call the function.

[MagSafe]

Thanks for that,

I didn't release that the onload event waits for everything before it to finish loading first, that is brilliant!

It's really useful as well from a usability point of view that you can display a "Loading..." message or graphic to start with so it'll get replaced by the actual content when it's ready.

Thanks again :)