Dropdowns, updatePanels, SelectedIndexChanged, Firefox & Frustration.

In a project I’m working on we make use of a few dropdowns. When a value in the first dropdown is selected, the possible values of the second dropdown must be filtered so they only contain values which match the selected item in the first one. Pretty standard functionality. Other stuff happens with them as well, but it always comes down to capturing the SelectedIndexChanged-event of the dropdown, and then “doing stuff”.

It’s 2008, so we eliminate full page postbacks by using the AJAX .NET Framework. The dropdowns are nicely wrapped inside an UpdatePanel, configured to trigger on SelectedIndexChanged. And it works like a charm. At least: it works like a charm in Internet Explorer. In Firefox, however, none of my events get fired.

So I started looking at what might be the cause of this. Weird thing was: even though my Visual Studio was attached to the Firefox instance I was debugging in, I didn’t get any errors. It looked like the event simply didn’t fire, nothing more, nothing less.

First, I tried without the UpdatePanels: the event fired in both IE and Firefox. With this in mind, I figured the problem must have something to do with the UpdatePanel. So I started looking into that, and played with every option that came to mind: ChildrenAsTriggers, changing the UpdateMode to Always or Conditional, explicitly defining the AsyncPostbackTriggers, … Nothing worked!

I started looking on the Net for some answers, which pretty much led to same things I already tried: check the triggers, play with the UpdateMode, …

In the meantime I had lost hours and hours trying to figure out what the cause of this problem could be, and I was getting *slightly* frustrated.

As far as I knew, everything little piece of code concerning the dropdowns and UpdatePanels was completely error-free. Running out of ideas, I fired up Firebug (figuring it wouldn’t help a single bit, seeing my Visual Studio was already attached to Firefox, and thus should capture any error).

But, lo and behold: Firebug actually captured an error in a little piece of javascript we use on our Master Page to make sure every button is disabled while a partial postback is in progress. Apparently, this piece of javascript works flawlessly in IE, but fails to work in Firebox. And therefore, all (!) my partial postback requests failed in Firefox.

So in the end, the problem had nothing to do with my UpdatePanel or dropdownlists… Sigh.

When using IE, errors like these get captured and can even be debugged. The combination Firefox-Visual Studio 2008 doesn’t seem to do this – so keep that in mind when using Firefox to debug an app that’s heavy on AJAX/Javascript.

Firebug actually did trap this error, and the problem was easily solved.

Lesson learned:

1) Use Firebug.
2) Use Firebug.
3) And: use Firebug. 🙂