javascript function breaks drop-down menus but just in Firefox

Question

For some reason this function is doing something weird just in Firefox

function fadeOUT_sect(id) {
    if ( $("div#"+id).css("display")!="none") {
        $("div#"+id).fadeOut();
        $("div#"+id).find("ul").each(function() {
            var name = $(this).attr("id");
            $(this).find("input").removeAttr("checked");
            if ( $(this).find("select > option:first").val() != "-9" ) {
                $(this).find("select > option:first").attr({
                    value:"-9",
                    selected:"selected"
                }); // $.attr()
            } // if select

            // I've isolated the problem to this if-test
            if ( !($(this).find('input[value="-9"]').val()) ) {
            //   ^ I think the problem is here.
                $(this).find('input[type="text"]').val('');
                $(this).append('<input name="'+name+'" type="radio" value="-9" checked="checked" />');
            } // if

        }); // $.each()
    } // if
} // function

Initially, the HTML where the problem appears looks like this:

<div id="2" style="display:none">
<ul id="state">
    <li>What state do you live in?</li>
    <li><select>
        <option value="-9" selected="selected"></option>
        <option value="AL">Alabama</option>
        …
    </select></li>
</ul>

After a fadeIn(), div#2 is visible and the first <option> becomes <option value=""></option> and when I click on the dropdown menu, I see all of my options. Now the trouble begins:

When I select an option, the dropdown goes away, but the bar/bubble is blank (and I didn't select the blank option). I click the dropdown again, and my option is highlighted in the list; I click away, and the bar/bubble is blank again. I click the dropdown a third time, select the blank option, click away, click back, and select a non-blank option, and all of a sudden I can see text in the bar/bubble.

The trouble only occurs in Firefox ~~(possibly just for Mac)~~ on both Mac and Windows. No trouble in Windows or Mac for any of the following: Safari/Chrome, Opera, IE7+ (IE6 just can't display the page at all).

EDIT I tested this in Firefox, Safari/Chrome, and Opera on multiple computers, and got the same result (so no cache/data issue).

EDIT 2 Here's the problem reproduced in jsfiddle: http://jsfiddle.net/JakobJingleheimer/EkDdB/3/

EDIT 3: I just tested Firefox versions 5 thru 9, and this problem occurs in Firefox 8+. In reading the release notes on v8, it seems they started using "Type inference" for javascript (but I don't know how that might affect anything or how to get round it if it does).

Thanks!

Resolution: Remove selected="selected" in the html, and removed selected:"selected" from .attr({…}) and .removeAttr("selected") in the javascript/jQuery.

Please oh please cache your selected elements! `var $div = $('#' + id); $div.css..., $div.fadeOut...,` etc. Now I'll see if I can find your problem. — glortho, Jan 05 '12 at 04:06
How do you call the above function? Also, it won't break it, but why do you say $("div#"+id) rather than $("#"+id)? (Given that id is unique the "div" part doesn't help at all.) — nnnnnn, Jan 05 '12 at 04:48
Can you add more info? The code and description you gave will take a lot of legwork to create a repro of the scenario you're describing. I tried copying it in as-is, and adding an invocation to the function, and I am not seeing what you're talking about yet. It will be very helpful to add enough code to make a complete demo, and to *also* post that code on a demo app made using jsfiddle.net — Merlyn Morgan-Graham, Jan 05 '12 at 05:05
Need to see full code to know when and where fade in/out functions get called. — Diode, Jan 05 '12 at 06:16
"2" is not a legal ID for an html element. I am not sure if this is your problem, but given this is a browser-specific issue, seems like a possibility. http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html — Jamie Treworgy, Jan 05 '12 at 07:10
@jamietre I fixed the div id (+1 for that catch! but it didn't fix it. ps that's a pain that it must start with /a-z/i) — Jakob Jingleheimer, Jan 05 '12 at 14:37
@nnnnnn i just created a fiddle for it (see the question for an updated link) — Jakob Jingleheimer, Jan 05 '12 at 16:05
@jacob This seems to work just fine for me in Firefox. What version are you using? — David Brainer, Jan 09 '12 at 22:02
@DavidBrainer-Banker I've checked it in Ffx 8 & 9 on both Mac and PC. — Jakob Jingleheimer, Jan 09 '12 at 22:19
Cannot reproduce in Firefox 9.0.1 on Windows 7 x64. Maybe one of your add-ons or extensions? — Domenic, Jan 09 '12 at 23:58

score 3 · Accepted Answer · answered Jan 10 '12 at 00:22

3

I can reproduce the error on Firefox 8.0.1 for Mac.

The problem is coming from the line I have commented out below.

function fadeIN_sect(id) {
    $("#" + id + ' > ul > input[value="9999"]').remove();
    //$("#" + id + " > ul > li > select > option:first").attr("value", "").removeAttr("selected");
    $("#" + id).fadeIn();
}

Once I commented that line out it works fine. You could try separating the lines and debugging each action one at a time.

Edit: Testing seems to point to the removeAttr call. Also as noted in the comments above don't forget to cache all your selectors. It's very inefficient to keep selecting them.

answered Jan 10 '12 at 00:22

Ben

1,525
11
19

Yep! It was the `selected="selected"`. I'm not sure if it was the javascript `removeAttr("selected")` or that the html had `selected="selected"`, but I didn't need the javascript after I removed the hard-coded attribute from the html. (I had hard-coded `selected` so I wouldn't have to rely on the browser's choice of which element to select by default). Thanks!! +50 – Jakob Jingleheimer Jan 10 '12 at 15:02
Oh, btw do you know how else I should do this? – Jakob Jingleheimer Jan 14 '12 at 02:45
@jacob I'm fairly sure that the browser won't select anything other than the first value? Do you have evidence otherwise? – Ben Jan 15 '12 at 02:24
My problem is I hide the `select` and I need force the selected option to go back to the first (in case the user has selected a different option). – Jakob Jingleheimer Jan 15 '12 at 03:39
1

@jacob Simply set the selectedIndex to 0. You can do this with jQuery as shown here http://stackoverflow.com/questions/1314245/set-the-selected-index-of-a-dropdown-using-jquery – Ben Jan 15 '12 at 03:56

javascript function breaks drop-down menus but just in Firefox

1 Answers1