0

好吧，我花了很多时间将非 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>

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

作为临时解决方法，我编写了一些 JavaScript 来检测 Firefox 3 并强制完全刷新以使它们进入下一个选项卡。

有人对如何使其正常工作有任何想法吗？

谢谢！克里夫

编辑。这是完整的 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");
    }
});
4

2 回答 2

1

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

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

- 编辑 -

我看了看网站，<hr>and on 在里面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 会以不同的方式解析事物。

于 2011-09-27T01:06:48.033 回答
0

可能是 FF 不喜欢这个<hr>标签，并且正在那里爆发。你试过用<hr />而不是 just<hr> 吗？

于 2011-09-26T12:57:57.340 回答