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; }