How to Create an Ajax TreeView in Html



This example uses the HttpRequest to get data from a back end source (database) and generate an Ajax enabled Tree View.


The most important part of the AJAX functionality is the code to connect with your back end system that allows asynchronous communication without having to do any screen refresh. We al know this as Ajax. The XmlHttpRequest, althought implemented differently in the major browsers, it performs is the keystone function which allows this type of communication. The function allows the client to communicate with the back-end (php, ruby, python, java, .net, you name it) without any screen refresh, and I might add, also you a user to continue working while the data is being fetched form the server.

Lets take a look at the code; first setup a variable to hold the XmlHttpRequest object, next the function, GetDocListingsReq, which takes a url param that points to your back end system, then create an XmlHttpRequest object that the HttpRequest will respond to. The onreadystatechange is an event that is triggered every time the state changes and declares what function to call every time the state changes. The other Http variables establish the of Http operations; Post or Get, the header variable also gets the url to act on and sends the command to open the url.

As the state changes, the GetDocListingResp function is called, which checks the status of the Http request; a ReadyState = 4 means the request is finished and the response is ready for the return journey to the calling client; the http.status=200 means that everything is ok. These operations must be checked each time an Ajax operation is performed that has an operation on the server.

Once the status = 200 is received, the response text can be assigned to a variable and the receiving html element can be established to received the response text. In our example it is a div element which receives the http response text.


var httpreq=null;
function GetDocListingsReq(url)
{
//Firefoc, Chrome, Safari or Opera
if (window.XMLHttpRequest) {
httpreq= new window.XMLHttpRequest;
}
else {
try {
//Microsoft
httpreq= new ActiveXObject("MSXML2.XMLHTTP.3.0");
}
catch(ex) {
try{
//Old version of Microsoft, IE 6 and earlier
httpreq= new ActiveXObject("Microsoft.XMLHTTP");
}catch(e)
{

alert("Unable to retrieve documents");

return false;
}

}
}
httpreq.onreadystatechange = GetDocListingResp;
httpreq.open('POST', url, true);
httpreq.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
httpreq.setRequestHeader("Connection", "close");
httpreq.send();

}

function GetDocListingResp() {

if (httpreq.readyState == 4) {
if (httpreq.status == 200) {
result = httpreq.responseText;

document.getElementById('docListings').innerHTML = result; 

} else {
alert('There was a problem with the request.');
}


}
}

The Http response must have the following format for this TreeView design to work
<div id=’category’+RandomNumber onClick=”expandCollapse(this)”>
<div id=’subdcat’+randomNumber onClick=”expandCollapse(this)”>Some Text</div>

<div id=’subdcat’+randomNumber onClick=”expandCollapse(this)”>Another leaf</div>

</div>

This function is called when a user clicks on a div node. Depending on the id that is passed to the function, either the top leaf is hidden or unhidden, or one of the sub category div elements. The trunk variable is assigned the top div element and when clicked, hides the leafs or child nodes under it.

function expandCollapse(divid)
{

var divid_str = divid.id;
var divid_sstr =divid_str.substr(0, 8);

var divid_hex = divid.id.substr( 8, divid.id.length);

switch(divid_sstr)
{
case 'category':

var trunk = document.getElementById(divid_str);
var leaf=document.getElementById('subdcats'+divid_hex);


trunk.style.cursor = 'pointer';
leaf.style.cursor = 'pointer';
trunk.onclick = function() {
if( leaf.style.display == 'none')
{

leaf.style.display = 'block';
}else
{

leaf.style.display = 'none';
}
}
break;
case 'subdcats':
var trunk = document.getElementById(divid_str);
var leaf=document.getElementById('subdcats'+divid_hex);


trunk.style.cursor = 'pointer';
leaf.style.cursor = 'pointer';
trunk.onclick = function() {
if( leaf.style.display == 'none')
{

leaf.style.display = 'block';
}else
{

leaf.style.display = 'none';
}
}

break;

}

}

function GetXMLViewData() {
GetDocListingsReq('http://urlToOpenâ);
}

The GetXMLViewData function is called thrugh the body onload event. The nested div elements can have as many nodes as desired. You just need to add more case branch to the expandCollapse function.

More by this Author


Comments 2 comments

Ruby H Rose profile image

Ruby H Rose 4 years ago from Northwest Washington on an Island

Way over my head, but I enjoy reading about such inside workings of these fantastic ways of working with our computers. I can admire how well it is written, and part of my brain wants to understand. Thanks for some great hubs!


klanguedoc profile image

klanguedoc 4 years ago from Canada Author

Hi Ruby

Thanks for the feedback. Yes, indeed, programming is a very creative field and you are only limited by your imagination.

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working