Generating Dynamic Checkboxes – Internet Explorer

Recently I was working on web pages which required dynamic generation of check boxes at the client side. One such page was having a table of data and a list of check boxes generated dynamically at the time of  loading of that page. Each check box was acting as a filter based on its state(checked/unchecked) controlling the display of some of the rows in the table .  The JavaScript code had a function to generate the list of check boxes.

        function insertChild(parent, child, group) {
            var listelem = document.createElement("li");
            var input = document.createElement("input");
            input.name = group;
            input.type = "checkbox";
            listelem.id = child;
            listelem.appendChild(input);
            input.value = child;
            input.checked = true;
            input.onclick = function() { toogleCheckBox(this); }
            var label = document.createElement("label");
            label.innerHTML = child;
            listelem.appendChild(label);
            parent.appendChild(listelem);
        }

When the state of any checkbox was changed,  another function filterTable() was called. It extracted the value of that checkbox and used it to filter out some rows of the table. It perfectly worked in Firefox but not in internet explorer. The value of the checkbox extracted inside filterTable() was always either ‘On’ or ‘Off’ in IE. Finally after some googling, I found out that the ‘On’ and ‘Off’ values are used in IE when no value is explicitly assigned to the checkbox. So the problem was with insertChild() which tried to assign a value to the checkbox even before the checkbox was appended to the document. I changed the code [red lines] and it started working in IE. Thus, it is always better to append the newly created node to the document first before editing its properties.

Adding Thickbox to dynamically generated links in DOM

From the day I started working  as a web developer,  jQuery has fascinated me. As a newbie to web development, I prefer writing plain javascript code at the moment(just to know the language better),  but just couldn’t resist trying out the jQuery-AJAX APIs. Okay, Let me get back! I’m working on a new feature for HeyMath! in which I used Thickbox, a popular and beautiful jQuery plugin, in a couple of pages. The page has a  table with one particular column containing thickbox links (<a class=”thickbox”>…</a>) There is a javascript function repaintTable(Object, tableid) which repaints the rows of the table(deletes the existing rows and inserts new rows based on data in the Object). This function takes care of applying the thickbox class to the links which appear in the table. When the page loads, a JSONObject which comes from the server by default, is passed on to this function. At this point, the links open happily in thickbox.  There are some other links in the page each of which gets a new JSONObject from the server through AJAX , when clicked. On success of every such AJAX call, repaintTable function is called with the new object(obtained as response) and the same table as arguments. After the first AJAX call,  the links stop opening in thickbox. Thankfully what is happening behind the scene is so simple. When the document is ready(page is loaded), all links with thickbox class(input,image map elements also) are selected and each of them is binded with a function on click event. I realised that this was not happening for the newly created links in the DOM. To do the same, I added a line of script tb_init(‘a.thickbox’) at the end of the repaintTable function. Now the links with thickbox class do open in thickbox, after AJAX calls   This can be handy whenever a small number of  thickbox links are generated dynamically. And here is an interesting tutorial about using  jQuery to manipulate and filter data in a table. There are so many ways to make the table dynamic. I hope to use this also!