Firefox Styling Gotcha With ComponentArt TreeView

This was a fun one that I ran into today. I don’t think it’s specific to ComponentArt but that’s where I ran into it. We have a web form that has a couple of tables on it, used for switching back and forth between viewable controls. One of the tables contains a ComponentArt TreeView. Based on user interaction, we would use JavaScript to change the applicable table’s styles to block or none, depending on whether we wanted it shown or not. This worked great in all browsers but Firefox. Firefox seemed to ignore all sizing on the table and instead would fit the table to the TreeView based on the contents. We wanted the tables to stay 100% sized so having weird rendering problems in Firefox wasn’t acceptable.

Turns out, Firefox doesn’t like having tables’ styles set to “block” as a way to make them visible, ala the 10th post in this thread. So instead of doing this:

    function showCourseList()
		{
			document.getElementById('tblList').style.display = 'block';
			document.getElementById('tblTree').style.display = 'none';
			fixMoz();
		}

I did this instead:

    function showCourseList()
		{
			document.getElementById('tblList').style.display = '';
			document.getElementById('tblTree').style.display = 'none';
			fixMoz();
		}

This works not only in Firefox but all other major tested browsers which in my case is IE and Safari.

Making CheckBoxList Play Nice With JavaScript

I’m working on a web page that allows the user to apply a variety of filters to a set of data. The old implementation involved a check box for each filter and then a ListBox with MultipleSelection set to true. The user would tick what ever filter they wanted to include and then select the items out of the ListBox. Every time the user makes a selection in one of the ListBoxes, we’re making an AJAX call to update the current filters. That works great but the user has to do two things, first tell us that they want to use a particular filter using the appropriate CheckBox and then select items out of the ListBox, sometimes holding down the Shift or Control key to do multiple selection.

We decided to change that to a CheckBoxList for each filter. This removes one step and makes the UI a little more fluid. However, it did cause one problem. Previously, the ListBoxes were being loaded with data on PageLoad by just adding a new ListItem for each piece of data. This works well because the ListItem can hold whatever value you want to key off of. However, a CheckBoxList renders as a table of CheckBoxes, none of which have the ability to hold a piece of data to key off of.

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            for(int x = 0; x < 3; x++)
            {
                MyListBox.Items.Add(new ListItem("my value is " + x, x.ToString()));
            }
        }
    }

That code rendered a ListBox that had source like this:

                

From there, it was really easy to grab the value of any selections via JavaScript. Unfortunately, as mentioned above, the CheckBoxList does not render that way. Using the same code in the PageLoad ends up rendering this HTML:

                

As you can see, none of the checkboxes have the value attribute. There is now a label for each one but it has the Key of the ListItem and not the Value which isn't particularly helpful when you want to display one piece of data for the user but process another one based on their selection. What to do?

As it turns out, you can add an attribute that gets rendered as a span around both the input and label elements. In JavaScript, you can then grab an array of the inputs and an array of the span elements. When one of the input boxes is found to be checked, you can get the corresponding span element's attribute and use it. It looks a little something like this:

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            for(int x = 0; x < 3; x++)
            {
                ListItem li = new ListItem {Text = "my value is " + x, Value = x.ToString()};
                li.Attributes.Add("myspecialid", x.ToString());
                MyCheckBoxList.Items.Add(li);
            }
        }
    }

When the items are loaded into the ListItems, we add an attribute called "myspecialid". It can be anything you want though it doesn't work if you pick a known attribute like id or value. Once that's done, the HTML renders like this:

                

Our new attribute has been included in a span tag around the input element and the value we want to track is included there. Now in JavaScript, we can do this:

function DoSomething() {
    var tableBody = document.getElementById("Tabstrip1_StudentsTab_MyCheckBoxList");
    var inputArray = tableBody.getElementsByTagName("input");
    var spanArray = tableBody.getElementsByTagName("span");
    for (var x = 0; x < inputArray.length; x++) {
        if (inputArray[x].checked) {
            alert("The id I want is " + spanArray[x].getAttribute("myspecialid"));
        }
    }
    if (groupsSelected.length > 0) {
        __aspx.HandleMonitorGroupFilter(groupsSelected);
    }
}

We grab all the input and span elements in the table. Then when we find a checkbox that is checked, we can grab the attribute we're interested in off of the appropriate span element using the getAttribute method. This is slightly hackish in that the two arrays of elements have to be in the same order but that seems like a reasonably safe assumption to make.

Overall, it seems like a good way to make the UI more fluid while still retaining the ability to manipulate necessary data on the AJAX calls.

JsTestDriver First Impressions

I’m currently trying to get some unit tests written around a bunch of JavaScript code and I’m using JsTestDriver to do it. So far, I’m pretty impressed though there are some little gotchas here and there. It’s been a really good framework for basic testing assuming you aren’t doing a ton of work with other libraries like Prototype.js and script.aculo.us which of course I am. I’m sure there are ways around it but it’s going to take some digging to figure out what they are.

One minor thing that has been different for me from the documentation is that when I try to run tests, I need to specify the server explicitly on the command line even though I have a server running and a browser captured. The documentation says you can do this:

java -jar JsTestDriver.jar --tests all

.

However, I’ve found that I need to do:

java -jar JsTestDriver.jar --tests all --server http://localhost:9876

Where the server value may be different according to what server you started up.

Now I’m off to figure out how I can mock some of the Prototype.js dependencies.