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.

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:

my value is 0
my value is 1
my value is 2

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:

my value is 0



my value is 1



my value is 2

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:

my value is 0



my value is 1



my value is 2

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.

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.