Very strange jQuery selector bug in Firefox 3.6.x

Question

Alright, I spent a lot of time turning a non-AJAX shopping cart checkout into an AJAX checkout.

I did this by separating out the various sections into tabs using jQuery UI tabs. I then use AJAX to post changes on one tab and selectively refresh other tabs. The selective refresh simply grabs the result of the post and uses a jQuery selector to grab only the relevant div from the response.

In this particular case, a tab with shipping information is posting and refreshing a tab with a list of shipping methods.

This works flawlessly excepting one browser: Firefox 3.6.x (Mac and Windows)

In Firefox 3, the selector pulls back a truncated result from the result of the POST, which effectively removes crucial buttons and prevents the user from proceeding.

Here is the full html response, with formatting:

http://pastebin.com/aVF6yUba

EDIT: The above is apparently not 100% consistent with the actual output. Here is the truly RAW output: http://pastebin.com/ChAT1vLf

Here is the relevant line of JavaScript:

jQuery("#shipping-method-section").html(output.html());

Here is what every other browser pulls back with that line:

<!--- shipping method section ---> 
<h2>Select a shipping method:</h2> 
<ul id="shipping-methods">
    <li><span><label><input name="shipmethod" value="FedEx+Priority+Overnight" class="shopp shipmethod" type="radio"> FedEx Priority Overnight — <strong>$30.68</strong> <span>Estimated Delivery:&nbsp;&nbsp;September 28, 2011</span> </label> </span> </li>
    <li> <span> <label><input name="shipmethod" value="FedEx+Standard+Overnight" class="shopp shipmethod" type="radio"> FedEx Standard Overnight — <strong>$26.46</strong> <span>Estimated Delivery:&nbsp;&nbsp;September 28, 2011</span> </label> </span> </li> 
    <li> <span> <label><input name="shipmethod" value="FedEx+2Day" class="shopp shipmethod" type="radio"> FedEx 2Day — <strong>$19.10</strong> <span>Estimated Delivery:&nbsp;&nbsp;September 29, 2011</span> </label> </span> </li> 
    <li> <span> <label><input name="shipmethod" value="FedEx+Express+Saver" class="shopp shipmethod" type="radio"> FedEx Express Saver — <strong>$18.79</strong> <span>Estimated Delivery:&nbsp;&nbsp;September 30, 2011</span> </label> </span> </li> 
    <li> <span> <label><input name="shipmethod" value="FedEx+Home+Delivery" class="shopp shipmethod" checked="checked" type="radio"> FedEx Home Delivery — <strong>$13.52</strong> <span>Estimated Delivery:&nbsp;&nbsp;September 27, 2011</span> </label> </span> </li> 
</ul> 
<hr> 
<div class="tab-back-button"> 
    <input class="tab-back-button" value="Shipping Address" type="button"> 
</div> 
<input value="Payment Method" name="shipping-method-section-button" class="shipping-method-section-button" type="button">

Here is what Firefox 3.6.x pulls back:

<h2>Select a shipping method:</h2> 
<ul id="shipping-methods">
    <li><span><label><input name="shipmethod" value="FedEx+Priority+Overnight" class="shopp shipmethod" type="radio"> FedEx Priority Overnight — <strong>$30.68</strong> <span>Estimated Delivery:&nbsp;&nbsp;September 28, 2011</span> </label> </span> </li>
    <li> <span> <label><input name="shipmethod" value="FedEx+Standard+Overnight" class="shopp shipmethod" type="radio"> FedEx Standard Overnight — <strong>$26.46</strong> <span>Estimated Delivery:&nbsp;&nbsp;September 28, 2011</span> </label> </span> </li> 
    <li> <span> <label><input name="shipmethod" value="FedEx+2Day" class="shopp shipmethod" type="radio"> FedEx 2Day — <strong>$19.10</strong> <span>Estimated Delivery:&nbsp;&nbsp;September 29, 2011</span> </label> </span> </li> 
    <li> <span> <label><input name="shipmethod" value="FedEx+Express+Saver" class="shopp shipmethod" type="radio"> FedEx Express Saver — <strong>$18.79</strong> <span>Estimated Delivery:&nbsp;&nbsp;September 30, 2011</span> </label> </span> </li> 
    <li> <span> <label><input name="shipmethod" value="FedEx+Home+Delivery" class="shopp shipmethod" checked="checked" type="radio"> FedEx Home Delivery — <strong>$13.52</strong> <span>Estimated Delivery:&nbsp;&nbsp;September 27, 2011</span> </label> </span> </li> 
</ul> 

I can find no rhyme or reason to this.

As a temporary work around, I wrote some JavaScript that detects Firefox 3 and forces a full refresh to get them to the next tab.

Anyone have any ideas on how to make this work properly?

Thanks! Clif

EDIT. Here is the full JavaScript:

jQuery.post( url, data, function(output) {
    if(error_check_passed(output, "FedEx"))
    {   
        jQuery("#shipping-section").css({ 'opacity' : 1.0 });
        update_cart_summary(output);

        hide_errors();
        output = jQuery("#shipping-method-section", jQuery(output));

        jQuery("#shipping-method-section").html(output.html());
        allowTabChange = true; 
        jQuery("#checkout-tabs").tabs('select', 1); 
    }
    else
    {   
        jQuery("#shipping-section").fadeTo('fast', 1.0);
        show_errors(output, "FedEx");
    }
});

Answer 1

It has to do with the two form tags. I copied your pastebin and cut it down to the section that shipping-method-section is contained in, and it worked fine in ff3.6. I then added the sction that that section is in, which is a form section. It then broke. If you change the outer form section to anything other than that, it works fine. That's also why the inner form tag is being stripped out if you browse the DOM with firebug (in newer versions too). If you inspect your page in FF3.6 before a reload, when the buttons are showing correctly, I think you will find that the hr and all tags after it are outside the shipping-method-selection div

I realize the form section can't be changed, so I'm not sure what you could do to work around it. Nested forms aren't allowed, but I know a lot of people use them anyway with no problems.

--edit--

I looked at the site, and the <hr> and on is inside shipping-method-section. However, I took your whole pastebin and did this:

jQuery.post( 'testClifPost.html', function(output) {

    var d = document.createElement('div');
    d.innerHTML = output;
    console.log(d);
}

In this output, <hr> is outside of shipping-method-section. This seems to say that it's not jQuery, but that firefox 3.6 parses things differently when javascript asks for it to parse something that when it loads it into the browser.

Answer 2

It may be that FF doesn't like the <hr> tag, and is breaking out there. Have you tried it with <hr /> instead of just <hr> ?