Очень странная ошибка селектора jQuery в Firefox 3.6.x - PullRequest
Новая
       35

Очень странная ошибка селектора jQuery в Firefox 3.6.x

0 голосов
/ 26 сентября 2011

Хорошо, я потратил много времени, превращая не-AJAX корзину покупок в AJAX.

Я сделал это, разделив различные разделы на вкладки с помощью вкладок пользовательского интерфейса jQuery.Затем я использую 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");
    }
});

Ответы [ 2 ]

1 голос
/ 27 сентября 2011

Это связано с двумя form тегами.Я скопировал ваш пастин и урезал его до раздела, в котором содержится shipping-method-section, и он хорошо работал в ff3.6.Затем я добавил раздел, в котором находится этот раздел, то есть раздел form.Это тогда сломалось.Если вы измените внешний раздел form на что-то другое, он будет работать нормально.По этой же причине внутренний тег формы удаляется, если вы просматриваете DOM с помощью firebug (также в более новых версиях).Если вы проверите свою страницу в FF3.6 перед перезагрузкой, когда кнопки отображаются правильно, я думаю, вы обнаружите, что hr и все теги после него находятся за пределами shipping-method-selection div

Я понимаю, что раздел form нельзя изменить, поэтому я не уверен, что вы могли бы сделать, чтобы обойти его.Вложенные формы не допускаются , но я знаю, что многие люди все равно используют их без проблем.

- edit -

Я посмотрел на сайте,и <hr> и дальше находится внутри shipping-method-section.Однако я взял всю вашу пастинку и сделал следующее: 

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

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

В этом выводе <hr> находится вне shipping-method-section.Похоже, это говорит о том, что это не jQuery, но что Firefox 3.6 анализирует вещи по-разному, когда javascript просит его проанализировать что-то, когда он загружает его в браузер.

0 голосов
/ 26 сентября 2011

Возможно, FF не нравится тег <hr>, и он там прорывается.Вы пробовали это с <hr /> вместо просто <hr>?

...