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.

Answer 1

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.