CODEWITHSUNDEEP
jqueryinternet-explorerjquery-1.4
pambuk
pambuk

Reputation: 5156

jQuery 1.4 change event bug in IE

I have this simple select:

<select name="zlecenia_index_icpp" id="items_per_page">  
    <option value="10">10</option>  
    <option value="25" selected="selected">25</option>  
    <option value="50">50</option>  
</select>

and on it there's:

$('#items_per_page').change(function(){  
    var controller_action = this.name.replace(/_/g, '/');  
    location.href = config.base_url + '/' + controller_action + '/'+this.value;  
});

It used to work in jQuery 1.3, but in 1.4 the change event is fired as soon as I click on the select box. Is there any solution besides going back to 1.3?

This really seems to be a bug and it has been reported to jQuery:

http://dev.jquery.com/ticket/5869

There has been a patch applied and will be part of jQuery 1.4.1.

http://github.com/jquery/jquery/commit/435772e29b4ac4ccfdefbc4045d43f714e153381

Upvotes: 7

Views: 4060

Answers (5)

Rezler
Rezler

Reputation: 1074

I am still getting a similar issue even with 1.4.1.

Using the example below:

  1. Select a value from the select list - an alert appears (Correct).
  2. Click the Change link - select list resets to 0 (Correct).
  3. Click the Select list - an alert appears. (Wrong)

The alert in the third step does not appear in 1.3.2.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

    <script type="text/javascript">

    $(document).ready(function(){
        $('#dropDownList1').bind('change',function(){ alert("changed"); });

        $('#btnChange').click(function(){
            $('#dropDownList1')[0].selectedIndex = 0;
        });
    });


    </script>
</head>
<body>
        <select id="dropDownList1">
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
        </select>

        <a href="#" id="btnChange">Change</a>
</body>
</html>

Upvotes: 0

Matt Curry
Matt Curry

Reputation: 360

Here's fix for this bug: http://github.com/mcurry/jquery/commit/a293f5938eb9efd41158b948f487672d43b7c820

Hopefully it'll get into 1.4.1

Upvotes: 3

ScottKoon
ScottKoon

Reputation: 3493

From http://jquery14.com/day-01/jquery-14

change and submit events normalized (Change Documentation, Submit Documentation)

The change and submit events work reliably across browsers for both normal and live events. We override the normal change and submit events in Internet Explorer and replace them with events that work identically to the other browsers.

OK, this looks like it's a bug, either in IE or JQuery.

What's causing the problem is the selected="selected" attribute on the option is causing the change event to fire before any mouse event occurs. My guess is, it's a weirdness/bug with IE as it appears that it does not set the selected element UNTIL it is visible, thus causing the change even to fire upon the initial dropdown. I say it's a bug in IE because if I call window.event.cancelBubble, the event handler doesn't fire at all.

That's really weird.

The workaround is to remove the selected attribute.

Upvotes: 3

David Hellsing
David Hellsing

Reputation: 108530

I'm not sure if it's supposed to work this way, but you are accessing this.value and this.name in the same callback. I would assume this refers to event.currentTarget, which in this case is the SELECT element.

In that case, this.value will be undefined, but you can try using $(this).val(); instead.

Did you try consoling out the variables?

Upvotes: 0

Ali
Ali

Reputation: 267317

You can use the blur() event of jquery. Perhaps something like this:

var defaultValue = 10;

$('#items_per_page').blur(function(){  
    if ($("#items_per_page").val() == defaultValue)
        return; //The value wasn't changed, so return.
    var controller_action = this.name.replace(/_/g, '/');  
    location.href = config.base_url + '/' + controller_action + '/'+this.value;  
});

Upvotes: -4

Related Questions