jQuery code works in Firefox but fails in IE

Question

I have a problem that I can't seem to identify, with a code that works perfectly well in Firefox and Chrome but fails in IE.

I have a sequence of the following elements:

<tbody id="tbod161-1__" isloaded="true" style="display: none;"></tbody>
<tbody id="tbod162-2__" isloaded="true"></tbody>

I am trying to create a jQuery cookie, which stores whether the element is visible or not.

function RememberClickedState() {
$('.ms-listviewtable tbody[id^="tbod"]').each(function(){
    tid = $(this).attr('id');
    var tvisible = ($(this).attr('style') == undefined || $(this).attr('style').indexOf('display: none;') == -1);
    var strVisible;
    if( tvisible == true)
    {
        strVisible = "true";
    }
    if( tvisible == false)
    {
        strVisible = "false";
    }
    items += tid+':'+strVisible+';'
})
$.cookie("itemListState", items);
}

When I retrieve the values with:

string = $.cookie("itemListState");
alert(string);

... all the IDs are set to "true" in IE, that means the values were incorrectly written in the cookie. However, this code works perfect when run in Ff / Chrome where some IDs are correctly set to false.

What am I missing? Thanks,

With jQuery you can just say `$(this).is(':visible')` ... Also you don't need the `if/else` to convert a boolean to a string - just use it in the string concatenation expression directly. — Pointy, Aug 12 '12 at 16:21
Try checking $(this).css('display')=='none' instead of reading the value of the "style" attribute. — sgress454, Aug 12 '12 at 16:32

Dan Barzilay · Answer 1 · 2012-08-12T20:18:40.607

2

change:

var tvisible = ($(this).attr('style') == undefined || $(this).attr('style').indexOf('display: none;') == -1);

into:

var tvisible = $(this).is(':visible');

and i have improved your code a bit:

function RememberClickedState() {
    $('.ms-listviewtable tbody[id^="tbod"]').each(function(){
        var tvisible = $(this).is(':visible');
        items += $(this).attr('id')+':'+String(tvisible);
    });
    $.cookie("itemListState", items.join('; '));
}

edited Aug 12 '12 at 20:18

answered Aug 12 '12 at 16:23

Dan Barzilay

4,974
5
27
39

the optimisation of the tvisible line worked successfully in Firefox but made no difference in IE. Replacing the method completely with the improved code, broke the resulting cookie which now only contains the IDs, without the true/false info. – Amc_rtty Aug 12 '12 at 16:39

adeneo · Accepted Answer · 2012-08-12T16:43:11.860

1

You could always try :

function RememberClickedState() {
    var items = '';
    $('.ms-listviewtable tbody[id^="tbod"]').each(function(i, e) {
        items += (e.id + ':' + (e.style.display == 'none'));
    });
    $.cookie("itemListState", items);
}

FIDDLE

There is no seperator between the values, and I would probably add a comma by doing this:

function RememberClickedState() {
    var items = [];
    $('.ms-listviewtable tbody[id^="tbod"]').each(function(i, e) {
        items.push(e.id + ':' + (e.style.display == 'none'));
    });
    $.cookie("itemListState", items.join(', '));
}

FIDDLE

edited Aug 12 '12 at 16:43

answered Aug 12 '12 at 16:25

adeneo

312,895
29
395
388

this does not work - the resulting cookie then contains no true/false information, just the IDs. – Amc_rtty Aug 12 '12 at 16:34
second edited version worked, just needed to change the separator at .join() from ', ' to ';'. i cannot thank you enough. – Amc_rtty Aug 12 '12 at 20:07

jQuery code works in Firefox but fails in IE

2 Answers2