jQuery.attr() works fine on Google Chrome and IE, but fails on Firefox 8.0.1

Question

I'm facing a curious behavior of Firefox 8.0.1 : this piece of code works fine on Google Chrome and in IE, but on Firefox it fails except if I run it in 'debug mode _ step by step' or if I put an alert just after the line where I set the attribute "rel"...

// some stuff before
// this piece of code works fine excepts on FF
        totaltracks = data.length;
    j=0;
    while(j<totaltracks){
        newtrack =data[j];
        myPlaylist.add(newtrack);
        tracks = $("a.jp-playlist-item");
        curtrack =  $("a.jp-playlist-item")[j];
        $(curtrack).attr({rel:j});
        // I tried too : $("a.jp-playlist-item")[j].attr("rel",j); with same no effect on FF
        j++;            
    }

It seems FF just don't take care of the instruction (or jump it) if not done step by step ... 2 days passed facing this wall ... any help/clue/trick would be much appreciated

What about `$("a.jp-playlist-item:eq(" + j + ")").attr('rel', j)`? — mu is too short, Dec 10 '11 at 10:09
same thing : works fine on Google Chrome and IE9 but fails with FF :( — phron, Dec 10 '11 at 10:28
Are you using jPlayer right? What version? Can be a known issue? — Irvin Dominin, Dec 10 '11 at 10:36
I'm using JPlayer, I've search for a known issue but can't find anything... But when googling I've seen some (more or less old) posts relating a problem with setting Attributes in FF... And as it works fine in Google Chrome and (even) in IE I suspect the problem is FF related... — phron, Dec 10 '11 at 10:38
What about `curtrack.setAttribute("rel", j);` (I can't see why the jQuery code doesn't work, but maybe non-jQuery code will?) — nnnnnn, Dec 10 '11 at 10:39
I'd tried this too, but the result is the same, FF refuse to set the attribute except if I run the code with Firebug and execute it step by step... It drives me mad... — phron, Dec 10 '11 at 10:41
Are you saying the code works when executed through FireBug? If so, can you edit your code and add the line `console.log(curtrack)` and see what gets printed? Could be a timing issue. — Salman A, Dec 10 '11 at 10:44
I know that "rel" is what you want to set, but do you get the same problem setting other attributes? (Also, what've you got against for loops?) — nnnnnn, Dec 10 '11 at 10:48
Hello Salman, console.log prints the "a.jp-playlist-item" WITH the new attribute ! — phron, Dec 10 '11 at 10:52
Just tested `attr({'rel': something})` in FF8, and works fine for me, must be somehing else your doing. Try testing with a [FIDDLE](http://jsfiddle.net/frpUD/1/), and if that works, check your variables again. — adeneo, Dec 10 '11 at 11:14
Also, this is probably not a good idea `curtrack = $("a.jp-playlist-item")[j];` , remove the `[j]` at the end and figure out another way to get the right element as a jQuery object. — adeneo, Dec 10 '11 at 11:23
adeno, this code works in Google Chrome and IE9 and in Firefox but ONLY if I run it through Firebug, so as Salman said it's probably a timing issue with FF... (the console.log outputs the right attribute) but I don't know to solve it.... I suppose that's because the HTML of 'curtrack' ("a.jp-playlist-item") is dynamically generated by 'myPlaylist.add()', and probably not 'existing yet' as an element when FF treats the setting of the attribute... — phron, Dec 10 '11 at 11:45

Benny Johansson · Answer 1 · 2011-12-12T08:02:31.453

Although I find the specifics of what you are doing a little peculiar, I tried to find a more stable way to accomplish it. It seems plausible that the inconsistent behavior you are seeing is due to timing issues. The "alert", "debug stepping" and "setTimout" hacks all point in that direction.

First, some feedback on your code

totaltracks = data.length;
j=0;

// I preferably use $.each() in these type of situations.
// See http://api.jquery.com/jQuery.each/
while(j<totaltracks){
    newtrack =data[j];
    myPlaylist.add(newtrack);

    // Here you select the same DOM elements for every loop of the while statement.
    // This is a performance issue.
    tracks = $("a.jp-playlist-item");

    // Here you select the those DOM elements once again,
    // then you assign the j:th element to the curtrack variable.
    // This doubles the performance issue.
    curtrack =  $("a.jp-playlist-item")[j];

    $(curtrack).attr({rel:j});
    j++;            
}

I do believe that these performance issues possibly could be the cause of your problems.

Second, my suggestion

// Select the DOM elements only once.
var trackElements = $("a.jp-playlist-item"),
    trackData = [
                    {title: 'Stuck in a groove', artist: 'Puretone'},
                    {title: 'Addicted To Bass', artist: 'Puretone'},
                    {title: 'Hypersensitive', artist: 'Puretone'}
                ];

$.each(trackData, function(index, newTrack){
    myPlaylist.add(newTrack);
    $(trackElements[index]).attr("rel", index);
});

Third, the full example

I created this fiddle for you to play around with. It demonstrates my suggestion in a more complete manner. Hopefully this points you in the right direction.

Hi Benny,thanks for you help and your explanations too... I'll try your solution later, and let you know if it works... For now I don't have enough time to play around again with this stuff... — phron, Dec 12 '11 at 10:44

score 0 · Answer 2 · answered Dec 10 '11 at 14:56

0

You are saving a jQuery object in a variable;

curtrack =  $("a.jp-playlist-item")[j];

but then you try make that variable a jQuery object by wrapping it it $( )

$(curtrack).attr({rel:j});

Try curtrack.attr("rel", j);

answered Dec 10 '11 at 14:56

kontur

4,934
2
36
62

`curtrack` is a DOM object, not jQuery object – Ilia G Dec 10 '11 at 15:00
I tried both, within the curtrack variable or directly with the jQuery Object $("a.jp-playlist-item")[j]; with the same result : it works on Google Chrome and IE and fails in FF – phron Dec 10 '11 at 15:44

score 0 · Answer 3 · answered Dec 10 '11 at 16:24

0

From reading the comments it seems like a timing issue. I had a similar issue with an external component once. It worked when steeping through the code but not while running it normaly.

I solved it that time with a hack:

After setting all the values I added a small timeout before executing the code.

//set values
setTimeout(function(){
//I called the textbox I had problems with here
}, 20);

It worked that time and even though I would rather have solved it properly this was better than the broken textbox. It will cause a small delay so I actually checked for the browser I had problems with and ran the normal code otherwise.

answered Dec 10 '11 at 16:24

Mikael Eliasson

5,157
23
27

Thanks Mikael but unfortunately it doesn't do the trick in my case... I suppose there's in one hand a timing issue with FF and maybe another due to the way JPlayerPlaylist generates the playlist from the JSON Array... I can't understand why it works fine with Google Chrome and IE (on IE it was great surprise) but not with FF... I suppose it has something to do in the way the things are processed by the browser... I have lost too much time on this problem, I give up for now... I'll be back on it later, and give a try to SoundManager to play the playlist... – phron Dec 10 '11 at 17:03
i get the feeling this piece of code would benefit from rewriting from a different angle.. maybe describe what you're looking to achieve and we could make some suggestions. – Lloyd Dec 10 '11 at 22:54

jQuery.attr() works fine on Google Chrome and IE, but fails on Firefox 8.0.1

3 Answers3