Question

好吧，我花了很多时间将非AJAX购物车结账转换为AJAX结账。

我是通过使用jQuery UI标签将各个部分分成标签来实现的。然后，我使用AJAX在一个选项卡上发布更改，并有选择地刷新其他选项卡。选择性刷新只是抓取帖子的结果，并使用jQuery选择器从响应中仅获取相关的div。

在这种特殊情况下，带有送货信息的标签会发布并刷新带有送货方式列表的标签。

除了一个浏览器外，它可以完美运行：Firefox 3.6.x（Mac和Windows）

在Firefox 3中，选择器从POST结果中拉回截断的结果，这有效地删除了关键按钮并阻止用户继续操作。

以下是完整的html响应，格式为：

http://pastebin.com/aVF6yUba

编辑：以上显然不是与实际输出100％一致。这是真正的RAW输出： http://pastebin.com/ChAT1vLf

以下是相关的JavaScript行：

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

以下是其他所有浏览器都回退的内容：

<!--- 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">

这是Firefox 3.6.x的回归：

<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>

我找不到任何押韵或理由。

作为临时工作，我编写了一些能够检测Firefox 3的JavaScript并强制完全刷新以将它们带到下一个选项卡。

任何人对如何正常工作都有任何想法？

谢谢！克里夫

EDIT。这是完整的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

它与两个form标签有关。我复制了你的pastebin并将其剪切到shipping-method-section所包含的部分，并且它在ff3.6中运行良好。然后我添加了该部分所在的部分，即form部分。然后它破了。如果您将外部form部分更改为除此之外的任何内容，则可以正常工作。如果您使用firebug浏览DOM（在较新的版本中），这也是为什么内部表单标记被剥离的原因。如果您在重新加载之前在FF3.6中检查页面，当按钮显示正确时，我认为您会发现hr及其后面的所有标记都在shipping-method-selection div之外

我意识到form部分无法更改，因此我不确定您可以做些什么来解决它。嵌套表单aren't allowed，但我知道很多人无论如何都使用它们没有问题。

- 编辑 -

我查看了该网站，<hr>及其位于shipping-method-section内。但是，我拿了你的整个pastebin并做了这个：

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

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

在此输出中，<hr>超出shipping-method-section。这似乎是说它不是jQuery，但是当javascript要求它解析在将它加载到浏览器中的东西时，firefox 3.6会以不同的方式解析。

Answer 2

FF可能不喜欢<hr>标签，并且正在突破。您是否使用<hr />而非<hr>尝试了它？

Firefox 3.6.x中非常奇怪的jQuery选择器错误

2 个答案: