Unable to fire jQuery change() event on selectlist

Question

I have a select box

 <select id="myselectbox">
   <option value='a'>First option</option>
   <option value='b'>Second option</option>
 </select>

And jquery

 $('#myselectbox').change(function() {
    ...
 });

And a WatiN test

 SelectList list = Browser.SelectList(Find.ById("myselectbox"));
 list.Select("First option");

In IE, this changes the select box, but doesn't fire the jquery event handler. I am aware of the many issues surrounding the change() event handler in IE. So I have tried adding a number of things to the test to force the event to fire:

 list.Blur();
 list.Keypress('\r');
 list.Click();

I also tried to click outside the select box to remove the focus, hoping this would fire the event.

Any ideas?

Answer 1

You could manually fire the event:

$('#myselectbox').change();

The other JavaScript events you're firing don't change the value, so they won't fire the change event.

Answer 2

This worked for me:

    public static void SelectByValueAndBlur(this SelectList selectList, string value)
    {
        selectList.Focus();
        selectList.SelectByValue(value);
        selectList.Blur();
    }

Answer 3

Using the JQuery ID Selector can create problems when there are two elements on a page with the same ID. The following code should drill down to the exact corresponding WaitN element

Element.DomContainer.Eval(String.Format("$({0}).change();", Element.GetJavascriptElementReference()));

Answer 4

It seems like a bug in IE's fireEvent. WatiN's SelectList.Select() generates something similar to

var newEvt = document.createEventObject();
newEvt.button = 1;
watin3.fireEvent('onchange', newEvt);

Where watin3 is the native HTMLSelectElement. The fireEvent call does not fire jQuery attached events. You can repro it by manually calling $('#id')[0].fireEvent('onchange');

So your best bet is to manually fire the event like others suggested using jQuery.

Answer 5

Going off of Matt Ball's answer and the OP's additional steps, I added the following extension method to a test helper class.

using WatiN.Core;

namespace Some.Test.Project
{
    public static class WatiNExtensions
    {
        public static void ForceChange(this Element e)
        {
            e.DomContainer.Eval("$('#" + e.Id + "').change();");
        }
    }
}

Now, so far anyway, I've succeeded in doing:

SelectList list = Browser.SelectList(Find.ById("myselectbox"));
list.Select("First option");
list.ForceChange();

OK, it's a minor convenience at best, but I'm finding it useful. Anyway, upvotes from me for the OP and the answer!

Answer 6

"change" is the event. "onchange" is the event handler. WatiN's Select() is buggy; it ultimately is firing "onchange" as if it was an event, which doesn't help the poster who wants the "change" event to fire.

Ultimately one has to use JavaScript/JQuery to fire the "change" event, as stated in the answer, to get around this bug.