Currently, when a div is clicked, jQuery detects it sends request to fetch data from mysql via Ajax.
What I'm actually fetching is, sub categories for the item clicked and display them in html page.
Now all is done in procedural way, so when another sub level needed to be displayed, I have to copy paste the ajax function. But how do make it into objects so that I don't have to repeat myself?
I just need to know how to bring in OOP into this context..Any help will be greatly appreciated. Thank you.
HTML
<!--append the default top level items starts-->
<div id="default"></div>
<!--append the default top level items ends-->
<hr>
<!--append the default top level items starts-->
<div id="sub"></div>
<!--append the default top level items ends-->
Jquery/AJax
<!--select top level items and append to default id starts-->
$("#clickme").on("click",function()
{
var xmlhttp = getXmlHttp();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
if (this.responseText !== null) {
var data = JSON.parse(this.responseText);
//console.log(this.responseText);
//console.log(JSON.parse(this.responseText));
for (i = 0; i < data.length; i++)
{
var id=data[i].id;
var name=data[i].item_name;
/*check if sub item exist*/
checkSubExist(id);
/*append to div*/
$("#default").append("name= "+name+", ");
}
}
}
}
xmlhttp.open("GET", "selectTopLevel.php");
xmlhttp.send();
});
<!--select top level items and append to default id ends-->
function checkSubExist(param)
{
//alert(param);
var xmlhttp = getXmlHttp();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
if (this.responseText !== null) {
var data = JSON.parse(this.responseText);
//console.log(this.responseText);
//console.log(JSON.parse(this.responseText));
for (i = 0; i < data.length; i++)
{
var id=data[i].id;
var name=data[i].item_name;
//alert(name);
$("#sub").append(name+", ");
}
}
}
}
xmlhttp.open("GET", "checkSubExist.php?sub="+param);
xmlhttp.send();
}