jQuery .ajax метод в IE7 и IE6 не работает, но работает нормально в Firefox

Question

Это относится к моему предыдущему посту:

jQuery .load Метод, вызывающий обновление страницы AJAX

Я изменил свою имплементацию, чтобы использовать метод .ajax вместо .load, и он отлично работает в Firefox, но не в IE7 или IE6:

    $('ul#coverTabs > li > a').live('click', function(event) {

    // Find href of current tab
    var $tabValue = $(this).attr('href');

    $.ajax({
        type: "GET",
        cache: false,
        dataType: "html",
        url: $(this).attr('href'),
        success: function(data){

        $(data).find('.benefitWrap').each(function(){

            var $benefitWrap = $(this).html();

            $('.benefitWrap').replaceWith($('<div class="benefitWrap">' + $benefitWrap + '</div>'));

        });

       }

    });

    event.preventDefault(); 

});

Это убивает меня, потому что на это ушли годы.

Есть идеи, где я иду не так?

Answer 1

Просто быстро, хотя. В прошлом у меня были некоторые неприятные проблемы с jQuery, которые молчаливо провалились в IE6 / 7. Почти во всех случаях где-то в моем коде (не обязательно в рассматриваемом вызове ajax) у меня была лишняя запятая после аргумента, подобного этому:

$.ajax({
        type: "GET",
        cache: false,
        dataType: "html",
        url: $(this).attr('href'),
        success: function(){},
)}

Я бы запустил скрипт через jslint , чтобы проверить, есть ли что-нибудь смешное в синтаксисе, вызывающем эту проблему, прежде чем выполнять надлежащую отладку.

Answer 2

Я случайно выяснил, в чем проблема.

Ссылка, указанная в этой переменной:

var $tabValue = $(this).attr('href');

Имеет хеш-значение в конце, например:

https://bupacouk.bwa.local.internal.bupa.co.uk/cash-plan-quote/quoteAction.do?getBenefitLevelDetails=getBenefitLevelDetails&productPolicyId=7850#a1

Это вызывает падение AJAX в других версиях IE.

Используя следующий код:

var $withoutHash = $tabValue.substr(0,$tabValue.indexOf('#'));

Гетр избавился от этого, и теперь оно работает:)

Answer 3

event является зарезервированным словом в некоторых версиях IE . Попробуйте изменить параметр, который вы захватываете, с event на что-то, чтобы избежать коллизий, например evt, например ::

$('ul#coverTabs > li > a').live('click', function(evt) {

  evt.preventDefault();

  // Find href of current tab
  var $tabValue = $(this).attr('href');

  $.ajax({
    type: "GET",
    cache: false,
    dataType: "html",
    url: $(this).attr('href'),
    success: function(data){

    $(data).find('.benefitWrap').each(function(){

        var $benefitWrap = $(this).html();

        $('.benefitWrap').replaceWith($('<div class="benefitWrap">' + $benefitWrap + '</div>'));

    });

   }

});

Обновление

После дальнейшего рассмотрения я считаю, что ваша проблема - find(). В этом случае вы должны использовать filter().

success: function(data) {
  $(data).filter('.benefitWrap').each(function() {
    // This should accomplish the same thing a bit more cleanly.
    $('.benefitWrap').html(this.innerHTML);
  });
}

Это может быть переработано до:

success: function(data) {
  $('.benefitWrap').html($(data).filter('.benefitWrap').html());
}

Answer 4

Хэш в URL-адресе - это проблема IE 6 и 7, xhr.status eror 500. Хорошо решена с помощью:

function removeHash(url) { return url.replace(/#(.*)$/, ""); }
$.get(removeHash(this.href),...)

см .: http://forum.jquery.com/topic/ticket-3808-ajax-load-fails-404-if-there-is-a-hash-in-the-url

Answer 5

Ну, проблема, кажется, здесь:

success: function(data){    
            alert(data);
            $(data).find('.benefitWrap').each(function(){
                alert(data);
                var $benefitWrap = $(this).html();
                $('.benefitWrap').replaceWith($('<div class="benefitWrap">' + $benefitWrap + '</div>'));                
        });

Второе предупреждение никогда не появляется, но появляется первое. Я ненавижу IE!