CODEWITHSUNDEEP
javascriptjqueryinternet-explorer-7
Joshua Walcher
Joshua Walcher

Reputation: 496

jQuery Issue in IE7 Only

I have an issue popping up in IE7 only where it will issue a "Object doesn't support the property or method" error when the onChange event for any select box with a class of VariationSelect. I've thus narrowed it down to the following:

$(".VariationSelect").change(function() {
    // a bunch of irrelevant code
    // get the index of this select
    var index = $('.VariationSelect').index($(this)); //this is the line throwing the error in IE7
           //some code that returns a block of data in json formatting

});

My first thought was a section of code with attr('disabled', 'disabled') since I've previously had trouble with that in IE7 when removeAttr is also used, but even when I removed those lines, the error stayed the same and the line/char reference in the JS error (which is meaningless, of course) does not change. So do you see anything else in that code block that IE7 won't accept?

Edit: the code is running after a select box is changed. The select box HTML looks like the following:

<div class="DetailRow">
<div class="Label">Some Label:</div>
<div class="Value">
    <select name="variation[aNumberStartingAtOneAndIncrementingUpwards]" class="VariationSelect" id="VariationSelect" style="width: 180px;">
        <option value="">-- Choose an option --</option>
        {A bunch of options for this choice loaded by PHP}
    </select>
</div>
</div>

The quick and dirty way to do it, since I know that the name element will always have a number in it that is one greater than the index, is to grab the name from the element that changed with something like:

    var index = $(this).attr('name');
index = index.replace('variation[','');
index = index.replace(']','');
index = (index*1)-1;

Is there a faster/better way to get the index?

Upvotes: 2

Views: 161

Answers (1)

Joshua Walcher
Joshua Walcher

Reputation: 496

When using that attr function in jQuery, it must be the only function you're running on the line.

To fix, I changed the code from:

    $('.VariationSelect:eq(' + (index + 1) + ')').append(data.options).attr('disabled', '').focus();

to:

    $('.VariationSelect:eq(' + (index + 1) + ')').append(data.options); $('.VariationSelect:eq(' + (index + 1) + ')').attr('disabled', ''); 
    $('.VariationSelect:eq(' + (index + 1) + ')').focus();

And it now works in IE7 and it continues to work in every other browser. I'm guessing I could probably combine the append and focus functions, but meh, it's working.

Upvotes: 1

Related Questions