jquery indexOf problem with IE

Question

I have a multiple select field and a jquery function that checks for a change in the select. the function looks for the value "Other", and if it's selected then displays an extra text field.

This is all working fine in chrome and FF, but for some reason IE throws an error on the indexOf function "Object doesn't support this property or method".

Any help would be much appreciated.

Here's the code:

EDIT: Remember that this code actually works in chrome and FF. Is only IE that is throwing the error...

<select name="test" multiple="multiple" id="test">
 <option value="one">one</option>
 <option value="two">two</option>
 <option selected="selected" value="Other">Other</option>
</select>
<input name="Name_Other" type="text" id="Name_Other" class="OtherDisplay" />


$.toggleOther = function (dd, txtOther) {
        if ($(dd).val() == null || $(dd).val().indexOf("Other") != 1) 
            $(txtOther).hide();

        $(dd).change(function () {
            var sel = $(this).val();
            if (sel != null && sel.indexOf("Other") != -1) { 
                $(txtOther).show();
            }
            else {
                $(txtOther).hide();
            }
        });
    }

$.toggleOther("#test", ".OtherDisplay");

I'm not a hundred-percent sure on this, but if you use the jQuery method index(), instead of indexOf(), does it work? — David Thomas
– David Thomas, Commented Jan 15, 2011 at 16:43

arthurfonseca · Accepted Answer · 2012-03-05 21:58:23Z

3

The truth is that IE dosen't handle Array.indexOf. That is the problem source.

You can create the handler:

if(!Array.indexOf){
    Array.prototype.indexOf = function(obj){
        for(var i=0; i<this.length; i++){
            if(this[i]==obj){
                return i;
            }
        }
        return -1;
    }
}

It should solve your problem.

answered Mar 5, 2012 at 21:58

arthurfonseca

1714 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Amol · Accepted Answer · 2011-12-31 06:32:11Z

1

try using IndexOf, i had similar problem where indexOf was not working in few versions of IE. IndexOf works well in all of the popular browsers and also in IE

answered Dec 31, 2011 at 6:32

Amol

111 silver badge2 bronze badges

Comments

davin · Accepted Answer · 2011-01-15 17:02:58Z

0

$.toggleOther = function (dd, txtOther) {
        dd  =  $(dd);
        txtOther = $(txtOther);

        dd.change(function  () {
            var toggleBool = false;
            var sel  =  $.each($(this).val(), function(i,e){
                if (e.indexOf("Other")!=-1) toggleBool=true;
            });
            txtOther.toggle(toggleBool);
        }).change();
    };

$.toggleOther("#test", ".OtherDisplay");

the code is a little shorter than the original, and a little more powerful

this checks if any of the selected items are "Other" and if so, shows the Other text box. You see, your select box is a multiselect, so .val() returns an array (even if only one item is selected, see the docs), so we simply iterate through the array and check if any of them are the "Other" field.

alternatively, if you wanted to check if only the Other field was selected, you could replace the $.each with a simple array length check and then put the same conditional in.

lastly, if you wanted to make the code really flexible, and work for multiselects and not multiselects, just check what type of object .val() returns, so your code handles both stings and arrays appropriately (see the .val() docs).

answered Jan 15, 2011 at 17:02

davin

45.6k9 gold badges81 silver badges78 bronze badges

6 Comments

user441365 Over a year ago

it throws an error: Error: j is null: ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js Line: 32

davin Over a year ago

@user441365, you probably copied wrong, are you aware that your error dump is actually in jquery's code? jquery compiles fine, not to mention that my code doesn't even have 32 lines...

user441365 Over a year ago

the j comes from the jquery.js file

davin Over a year ago

@user441365, have you checked the jsfiddle link i posted?

user441365 Over a year ago

yes I did, and that works fine, but when I copy and paste it onto my code it throws that error. weird

|

MightyE · Accepted Answer · 2011-01-15 16:49:23Z

0

$(this).val() returns a native value (such as a String), not a jQuery object. indexOf which you're executing against that apparently doesn't existi in IE. Since this is almost certainly a string for you, try using .match() instead:

if (sel != null && sel.match(/Other/)) {
    ...
}

answered Jan 15, 2011 at 16:49

MightyE

2,67918 silver badges19 bronze badges

3 Comments

Vadim Over a year ago

I believe Array.indexOf doesn't exsit, but string.indexOf should.

MightyE Over a year ago

This suggests sel is not a string (which explains why .indexOf() didn't work either, but I'm not that familiar with IE). See if sel is actually undefined or something like that. Double check that jQuery actually selected something and that it selected what you expected it to (eg, $(dd)[0].outerHTML)

user441365 Over a year ago

sel returns the same value that chrome and FF, the value of the item and yes, it's the correct value. weird.

Matt · Accepted Answer · 2011-10-20 16:01:16Z

-1

Instead of $(this).val(), try using:

var sel = $(this).text();

edited Oct 20, 2011 at 16:01

Matt

75.4k26 gold badges156 silver badges181 bronze badges

answered Jan 15, 2011 at 16:45

psx

4,0486 gold badges32 silver badges59 bronze badges

1 Comment

Vadim Over a year ago

This will check against the Text property of the selected option which may not be what OP wants.

Collectives™ on Stack Overflow

jquery indexOf problem with IE

5 Answers 5

Comments

Comments

6 Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

6 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related