Deepavali special!

There’s one more week for the festival. But I’m in a festive mood already   Personal life is eventful these days, especially at week ends.  After many weeks of teaching as part of Kanini classes, we(teaching volunteers) conducted an assessment test on MS Word at WET center, last week. The results are amazing with the average around 29 out of 50 marks. The kids have done a great job! Don’t ask what is so amazing about it. It took me first two semesters of my college life to understand what is a computer and what can be basically done using it. And it took even more time for me to get comfortable with very basic applications. I still remember how my fellow mates Srini and Vijay used to teach and help me out.  But these kids have learned about them in a couple of months and that too from teachers like me Meanwhile, Kanini classes are going great at VMT center also. I’m really getting excited like a child every week thinking about  planning classes and incorporating new ideas that come to my mind once in a while. At job, I’ve started working on designing a web service for HeyMath! to serve content. Right now, it has not really reached a good shape. I’ve this question related to the task. Pointers are welcome

Time to mix some bad news in between. I’ve lost my mobile for the third time in my life. First time I lost it, next time it was stolen at some public place, third time it got stolen at my office. I never like repeating mistakes more than once but this has raised “Yaanaikum adi sarukum” exception I was angry on myself  for my carelessness but nothing more can be done about the past. I’ve wasted around 17K rupees on mobile phones so far It has been almost 3 weeks since it happened. So, Yes! I’m living and I can live without a mobile!!

To those, wondering about the relation between the title and the content, Happy Deepavali(Diwali) wishes in advance!! Don’t you know how tough it is to come up with a title, especially when we are not writing about anything in specific?

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.

Life Logger #2

I’m writing this down at the end of a happy week in my professional as well as personal life.  The main source of joy was the satisfaction I had, after completing two features for HeyMath! – Previous Years’ Assignments and Check Your Understanding.  This was my first hands-on experience with a web application but the features were not really complex. May be, they canceled out each other and ended up giving good results Anyway, I completely enjoyed developing them right from design phase to user interface coding. Lot of interesting things learnt along the way!  Moving on to the other side of my life, I’ve started making use of week ends in a responsible way through Bhumi’s Kanini program trying to make some underprivileged kids computer-literate.  It gives me immense satisfaction. Also I’m really thinking forward about how can  I help those kids through Bhumi’s Career Counseling program.  And my birthday (Aug 5)  this year needs a special mention. I never think of  it as any special day, but this time it had quite a few special moments! One of my best friends left to US for higher studies that night. Three hours before that he was at my home wishing me and sharing a lighter moment. It was very very special, as I met him after a long time!

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!