jQuery .ajax method in IE7 & IE6 not working but working fine in Firefox

Question

This relates to my previous post:

jQuery .load Method causing page refresh AJAX

I changed my implmentation 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(); 

});

This is killing me as it has taken ages to get this far.

Any ideas where i am going wrong?

Answer 1

Just an quick though. I have had some frustrating issues with jQuery in the past that silently failed with IE6/7. In almost all cases, somewhere in my code (not necessarily in the ajax call in question) I had a extra comma after an argument like this:

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

I would run the script through jslint to see if there is anything funny in the syntax causing this issue before doing proper debugging.

Answer 2

I accidentally worked out what the issue was.

The link referenced in this variable:

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

Had a hash value on the end like so:

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

This cause the AJAX to fall over in bothe versions of IE.

Using the following code:

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

Getrs rid of it and it now works :)

Answer 3

event is a reserved word in some versions of IE. Try changing the parameter you're capturing from event to something sure to avoid collision, like evt, e.g.:

$('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>'));

    });

   }

});

Update

Upon further review, I believe your problem is the find(). In this case, you should use filter().

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

That can be further refactored down to just:

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

Answer 4

Hash in the url is an issue with IE 6 and 7, xhr.status eror 500. Resolved well with:

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

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

Answer 5

Well the problem seems to be here:

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

The second alert never appears but the first does. I hate IE!