Adam’s Rambling Thoughts

I would like to talk about two of the many methods for creating dynamic list elements using HTML and JavaScript. We will also take advantage of the ability to set the innerHTML of an element.  The two methods I will discuss are:

1. Displaying content that is already loaded but hidden.
2. Using AJAX and the innerHTML to display dynamic content

Let’s start with the simpler of the two, displaying hidden content.  For this, it is assumed there is a page with a list and the content of the list is currently hidden.  For this example the content of the list is a sub-list.   Something along the lines of the following code:

<ul>
  <li>
    <a href="javascript:showList()">List Header</a>
    <ul id="hiddenList" style="display:none">
      <li>Element 1</li>
      <li>Element 2</li>
     </ul>
   </li>
</ul>

The header of this list is wrapped in an HREF which will make a call to the JavaScript function showList() which will toggle the display property of the sub-list, creating a list with a sub-list that alters its display on each click of the header. The JavaScript function can be similar to the one below:

function showList()
{
    var list = document.getElementById("hiddenList");
    var displayString = "block";
    if (list.style.display == "block")
    {
        displayString = "none";
    }
    list.style.display = displayString;
}

A working example can be seen here.

And now…

Next I will talk about using the XMLHttpRequest object to create a dynamic list using a server side call.  It is important to note that a lot of JavaScript frameworks will do this for you very easily but, I feel too many times people know what a framework is doing without actually knowing what it is doing so I’m going into a little more detail on some of the “behind the scenes” stuff.

First the list code is modified from the original HTML page to be similar to the following.  You will notice how none of the sub-list data is currently loaded.

<ul>
  <li>
    <a href="javascript:showList()">List Header</a>
    <div id="hiddenList" style="display:none">
    </div>
  </li>
</ul>

The call to showList() now will set up the XMLHttpRequest object and make the call to the server, using a GET, to get the content of the list, which is stored in another HTML file.  The algorithm for making a call is:

1. Create a new XMLHttpRequest object if the browser is not IE, if it is IE create a new ActiveXObject
2. Set the callback function using the onreadystatechange of the object.
3. Use the open method of the object to make the call.
4. Pass any data if the call is a post

The pieces of the showList() function relevant to the call can be seen below:

// For Mozilla
if (window.XMLHttpRequest)
{
    request = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
    // For IE
    try
   {
        request = new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch (e) { }
}
if (request)
{
    // The callback method.
    request.onreadystatechange = updateList;
    // A GET call to the server.
    request.open("GET", url, true);
    // Not posting any data.
    request.send(null);
}
else
{
    alert("Could not create XMLHttpRequest");
}

In the callback function, updateList, the innerHTML of the DIV that contains the sub-list is updated to be the responseText of the request object. You could also use the responseXML of the request object and traverse nodes but, for this application I find it much simpler to use the responseText, which contains the HTML of the page we have requested. Using this method you may run into caching problems but, that can be easily solved by making sure the URL called is unique each time.  Following you will see the updateList method.

function updateList()
{
    // Check to make sure the request is ready.
    if (request.readyState == 4)
    {
        list.innerHTML = request.responseText;
        list.style.display = "block";
        displayed = true;
    }
}

You can see a full example of this list implementation here. For fun’s sake I have added the toggle in on this page as well.

There you have it…

That was just two of the many ways of using JavaScript and HTML to create dynamic lists. You can also use the XMLHttpRequest object and the innerHTML of elements for creating many, many dynamic effects (AJAX, Web 2.0, etc, etc, etc). As I have already said a lot of frameworks such as JQuery or DOJO will handle a lot of this for you but, I feel it is important to know what they are actually doing. And, to be honest, when I started doing this they were not around…Honestly I am not that old…

aaltemus Software Engineering, Tech Add new tag, ajax, css, dynamic, html, javascript, list, xmlhttrequest