JQuery - Script working in everything except IE10

I have here a fiddle for this problem.

The script makes use of a bunch of cool functions, but it just does nothing on IE10.

I don't know which one part of it disagrees with, is there a Javascript debugger available for IE10 or can someone see what I'm doing wrong?

$(function (){
    $('.roleCheck').click(function () {
        var check = $(this).attr('id');
        var id = check.substr(check.length - 1).toString();
        var field = "#fieldSet" + id;
        var oldCol = $(this).css("background-color");
        if (oldCol == "rgb(139, 231, 156)") {
            $(this).css("background-color", "#fc8b6a");
            $(field).hide();
            $(this).find('span').text("Show");
        }
        else {
            $(this).css("background-color", "#8be79c");
            $(field).show();
            $(this).find('span').text("Hide");
        }
    });
});

Here is a really trimmed down version of where it is used:

<div id="columns">
    <div class="columns left">
        <fieldset>
            <legend>Filters and Controls</legend>
            <div class="roleCheck" id="check0">
                <span>Hide</span> Engineer
            </div>
            <br />
            <div class="roleCheck" id="check1">
                <span>Hide</span> Trainee Engineer
            </div>
            <br />
            <div class="roleCheck" id="check2">
                <span>Hide</span> Senior Engineer
            </div>
        </fieldset>
    </div>
    <div class="columns right">
        <fieldset id="fieldSet0">
            <legend>Engineer</legend>
            <table>
                <thead>
                    <tr>
                        <th>Header 1</th>
                        <th>Header 2</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Info 1</td>
                        <td>Info 2</td>
                    </tr>
                </tbody>
            </table>
        </fieldset>
        <fieldset id="fieldSet1">
            <legend>Trainee Engineer</legend>
            <table>
                <thead>
                    <tr>
                        <th>Header 1</th>
                        <th>Header 2</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Info 1</td>
                        <td>Info 2</td>
                    </tr>
                </tbody>
            </table>
        </fieldset>
        <fieldset id="fieldSet2">
            <legend>Senior Engineer</legend>
            <table>
                <thead>
                    <tr>
                        <th>Header 1</th>
                        <th>Header 2</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Info 1</td>
                        <td>Info 2</td>
                    </tr>
                </tbody>
            </table>
        </fieldset>
    </div>
</div>

Ah the perils of programming using Chrome as your default browser...

Answers


I figured out why this script wasn't working in IE10! :D

There are two reasons:

When you call this code:

var oldCol = $(this).css("background-color");

IE returns a hex value first (in this case #8be79c)

Then subsequent calls to the script return an rgb value (rgb(139,231,156)) (note the lack of whitespace) Weird right?

When I originally wrote the script, I used alert() to find out what colour was returned by .css(), which gave me rgb(139, 231, 156) (from Chrome, with whitespace!) so that's what the script was looking out for.

Replacing:

var oldCol = $(this).css("background-color");
if (oldCol == "rgb(139, 231, 156)") {

With:

var oldCol = $(this).css("background-color").replace(/ /g,'');
if (oldCol == "rgb(139,231,156)" || oldCol == "#8be79c") {

Means it now works all the time in both Chrome and IE 10.

Hopefully this helps anyone else who happens to come across this rather unusual problem.

Thanks for the helpful comments about debugging, it helped me figure out the problem!


Need Your Help

State changes while onRestoreInstanceState() has been override

android

As far as I understand onSaveInstanceState() and onRestoreInstanceState() method are intended to store dynamic data before Activity's state is about to go onPause(). I made a simple Activity with a

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.