The jQuery.ajax method in IE7 and IE6 does not work, but works fine in Firefox

Question

This refers to my previous post:

jQuery.load Method that causes an AJAX page to refresh

I changed my implication to use the .ajax method instead of .load, and it works fine in Firefox, but not in IE7 or 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(); 

});

It kills me since it took a long time.

Any ideas I'm wrong about?

Answer 1

I accidentally found out what the problem is.

The link that this variable refers to:

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

The hash at the end matters:

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

This will cause AJAX to crash in IE versions in bothe.

Using the following code:

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

Getrs got rid of him and now it works :)

Answer 2

, . jQuery , IE6/7. , - ( ajax) :

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

script jslint, , - , , .

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!