ramblings

In a form that I administer at work I have a javascript filtering function for a few select boxes.  It is called whenever the first select box changes and removes the ineligible options from the second select box.  Simple.  Straight-forward.

It doesn’t work in IE 7, works fine in IE 8, Firefox, Chrome.  But we have many clients that are stuck in IE 7 or even IE 6.  I sat down to figure this out and realized that my IE debugging tools aren’t nearing as good as my Firefox debugging.  In Firefox I use Firebug, but in IE I use the built in Developer Tools (DT).

The one big difference between these two plug-ins for this particular problem is that DT doesn’t live update the code of the page when it is changed with javascript.  You must manually refresh the code inside of DT.  Once I discovered this I was much more productive.

But onto the problem.  I discovered that when I was creating the ‘filtered’ select box, I was actually just wiping the original box out and creating a new one from scratch.  In this new select box all the attributes were correct except for the name.  Instead of the attribute being called ‘name’ it was being called ‘submitName’.

I googled that and the only relevant thing that I could get was an experts-exchange link that I refuse to use.  I have a problem with a website charging people for solutions to simple code problems.  Whenever I get google results for that site I remove it from my results.

I ended up reworking my code to actually filter out the unwanted options when the first select box is changed.  But in case someone else has had the problem that I’m having and knows the solution, I will post the code that I was using to create the select box.

function createSelect(parent_cell, name, id, options, option_values, classs, onchange, removeChildren)
{
	// classs is misspelled cause otherwise IE thinks it is a Class
	try
	{
		var par_cell = document.getElementById(parent_cell);
		var sel_box = document.createElement('select');
		sel_box.setAttribute('name', name);
		sel_box.setAttribute('id', id);
		sel_box.setAttribute('onchange', onchange);
		sel_box.setAttribute('class', classs);
 
		var first_opt = document.createElement('option');
		first_opt.value = '';
		first_opt.text = 'Select an Option';
		sel_box.options.add(first_opt);
 
		for(var i=0;i<options.length;i++)
		{
			var opt = document.createElement('option');
			opt.value = option_values[i];
			opt.text = options[i];
			sel_box.options.add(opt);
		}
		if(removeChildren)
			removeAllChildren(parent_cell);
 
		par_cell.appendChild(sel_box);
	}
	catch(err)
	{
		alert("There was an error creating the options menu: " + err);
		return false;
	}
	return true;
}

Till Next Time