I am not a programmer but a designer and after a lot of trial and
error using examples I got this code working. I have been studying
JQUERY for a week and want to use it in place of my original AJAX, but
I am confused as to the best methods to use to get the same capability
and most efficient response.
Is there an easy way to transition my existing AJAX script into what
is obviously the more efficient JQUERY methods. I essentially have a
set of category buttons (images in a class) called from a MySQL
database (9 load at start - lev is 1) on selection of a button I call
the database to get the next level of buttons and replace the cat
buttons. I know I need to use the $.getJSON("scripts/getcat.php",
calling my php script which extracts the data from the database and
returns the JSON formatted data.
but cant quite get the placement of var and callback.
MUST BE MUCH EASIER WITH JQUERY Thanks in advance for any for any
guidance.
// selectlist.js
var xmlhttplist;
showList(0,1);
function showList(cat,lev)
{
xmlhttplist=GetXmlHttpObjectList();
if (xmlhttplist==null)
{
alert ("Browser does not support HTTP Request");
return;
}
var url="scripts/getlist.php";
url=url+"?cat="+cat;
url=url+"&lev="+lev;
url=url+"&sid="+Math.random();
xmlhttplist.onreadystatechange=stateChangedList;
xmlhttplist.open("GET",url,true);
xmlhttplist.send(null);
}
function stateChangedList()
{
if (xmlhttplist.readyState==4)
{
var xmlDoc=xmlhttplist.responseXML;
// Load list
var mainData = "";
var x=xmlDoc.getElementsByTagName("Category");
var lastLev = xmlDoc.getElementsByTagName("Category")
[x.length-1].getElementsByTagName("NextLevel")[0].childNodes
[0].nodeValue;
var currLev = lastLev + 1;
for (i=0;i<x.length;i++)
{
if (i==x.length-1)
{
if (lastLev<1)
{
document.getElementById("home").innerHTML=
"<img class='buttonhomeimage'
src='images/homepage.jpg'
onclick='showList(0,1)' />";
document.getElementById("back").innerHTML=
"<img class='buttonhomeimage'
src='images/back.jpg'
onclick='showList(0,0)' />";
break;
}
else
{
document.getElementById("home").innerHTML=
"<img class='buttonhomeimage'
src='images/homepage.jpg'
onclick='showList(0,1)' />"
document.getElementById("back").innerHTML=
"<img class='buttonhomeimage'
src='images/back.jpg'
onclick='showList("+
xmlDoc.getElementsByTagName("Category")[i].getElementsByTagName
("NextCategory")[0].childNodes[0].nodeValue+
","+
xmlDoc.getElementsByTagName("Category")[i].getElementsByTagName
("NextLevel")[0].childNodes[0].nodeValue+
")' />";
break;
}
}
if (lastLev < 3)
{
mainData +=
"<div class='button9'
onclick='showList("+
xmlDoc.getElementsByTagName("Category")[i].getElementsByTagName
("NextCategory")[0].childNodes[0].nodeValue+
","+
xmlDoc.getElementsByTagName("Category")[i].getElementsByTagName
("NextLevel")[0].childNodes[0].nodeValue+
")'>"+
xmlDoc.getElementsByTagName("Category")[i].getElementsByTagName
("Name")[0].childNodes[0].nodeValue+
"</div>";
}
else if (lastLev == 3)
{
mainData +=
"<div class='listing'
onclick='showList("+
xmlDoc.getElementsByTagName("Category")[i].getElementsByTagName
("NextCategory")[0].childNodes[0].nodeValue+
","+
xmlDoc.getElementsByTagName("Category")[i].getElementsByTagName
("NextLevel")[0].childNodes[0].nodeValue+
")'>"+
xmlDoc.getElementsByTagName("Category")[i].getElementsByTagName
("Name")[0].childNodes[0].nodeValue+
"</div>";
}
else
{
mainData +=
"<div>"+
xmlDoc.getElementsByTagName("Category")[i].getElementsByTagName
("Name")[0].childNodes[0].nodeValue+
"</div><div>"+
xmlDoc.getElementsByTagName("Category")[i].getElementsByTagName
("NextCategory")[0].childNodes[0].nodeValue+
"</div>";
}
}
// Load main
document.getElementById("main").innerHTML=mainData;
// Load banners
for (i=0;i<7;i++)
{
var pos = "b"+(i+1);
document.getElementById(pos).innerHTML=
"<image
src='images/"+xmlDoc.getElementsByTagName("Banner")
[i].childNodes[0].nodeValue+"' />";
}
}
}
function GetXmlHttpObjectList()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
