The Error Message » JavaScript

Delayed javascript function/handler gets the right variable/parameter values

gbl — Thu, 13 Jan 2011 23:22:39 +0000

So we have a function that adds a handler function that is called after an ajax load or at a later time and we need to execute the handler function code for each item inside an array allowing the function to access the array values. Usually with the simplest try you would get some code that get’s executed with invalid variable values. Examples are below.

The wrong code:

//the function that will do the stuff for each array
var dostuff = function (arr) {
var n = arr.length,
    i;
    for(i = 0; i < n; i++) {
        var o = arr[i];
        //event bind or delayed function call
        setTimeout(function () {
                //we want to access here the correct arr[i]
                //when the code gets here the value of o is arr[arr.length-1]
                console.log(o);
        }, 1000);
    }
}
dostuff([1,2,3,4]);

You can load the code into your javascript console to see it in action.
The output appears after 1 second and it is like this:

I don't need that. I need something that works so we need to wrap the handler call into a function call that will pass the current values as parameters.

var dostuff = function (arr) {
var n = arr.length,
    i;
    for(i = 0; i < n; i++) {
        var o = arr[i];
        (function (y) {
            setTimeout(function () {
                console.log(y);
            }, 1000);
        }) (o);
    }
}
dostuff([1,2,3,4]);

The output appears after 1 second and it is like this:

The final best solution would be to have the function inside for already defined so you don't define it on every loop:

var dostuff_item = function (y) {
            setTimeout(function () {
                console.log(y);
         }, 1000);
 }
var dostuff = function (arr) {
var n = arr.length,
    i;
    for(i = 0; i < n; i++) {
        var o = arr[i];
        dostuff_item (o);
    }
}
dostuff([1,2,3,4]);

Tada!

base html tag does not apply correctly to all javascript and style files

gbl — Fri, 03 Jul 2009 15:21:40 +0000

Problem: The

did not work at all on Internet Explorer – no javascript or style files were loaded and worked partially in Mozilla Firefox – a few javascript files were not pointing to the path that should be transformed by base href attribute.

Example:

Array(
[0] => 1
)

This code produced a page with no style files and no javascript files included in Interenet Explorer 8 and a few javascript files (j1.js and j2.js) were not included in Firefox 3.5 because base tag was not applied. After several tests and all kind of different arrangements we discovered that the problem was the output before the page source the

Array ...

thing.

Solution: no output before the page’s headers otherwise you can get all kind of strange results including a html base tag not working correctly.

Object doesn’t support property or method. Adding options in a Zero One Two Three

In this example, the name of the checkboxes array is cb.

Next, we place two links for checking/unchecking all checkboxes in our array. If someone clicks one of these links, the checkAll() JavaScript function is called:

Check all
Uncheck all

The checking/unchecking all checkboxes function in JavaScipt looks like this:

function checkAll(form_name, cb_name, value)
{
var cb_arr = document.forms[form_name].elements[cb_name];
// if the checkboxes exist
if(cb_arr)
{
// if the number of checkboxes is at least 2
if(cb_arr.length > 1)
{
// for each checkbox
for(i = 0; i < cb_arr.length; i++)
{
// check (value == true) or uncheck (value == false) it
cb_arr[i].checked = value;
}
}
else // cb_arr.length is undefined which means there is a single checkbox element that is not considered an array of one element
{
cb_arr.checked = value;
}
}
}

Note that if we only have one checkbox, the variable cb it is not considered an array, but a normal variable. This is useful in the situation of dinamically generated HTML pages (using PHP, for example) and the number of checkboxes varies from page to page.

You can test the example here:

Check all Uncheck all