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?

Corey Downie · Answer 1 · 2011-06-09T18:38:00.550

20

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.

edited Jun 09 '11 at 18:38

answered Feb 23 '10 at 17:12

Corey Downie

4,679
3
27
29

yes, i know that IE6 does throw an Javascript Error, when there is a comma after the last parameter – choise Feb 23 '10 at 19:09
LARGE thanks for this one - I was slowly going mad. Removing the trailing comma gets me up and running in the accursed IE6... – SAL Jun 08 '11 at 16:15

score 6 · Accepted Answer · answered Mar 05 '10 at 11:43

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 :)

Dave Ward · Answer 3 · 2010-02-24T01:29:08.697

2

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());
}

edited Feb 24 '10 at 01:29

answered Feb 23 '10 at 17:26

Dave Ward

59,815
13
117
134

@ Dave. Thanks for this but neither seems to work. The first does not return anything from the server in either FFOX, IR7 or IE6 and the second just clears all data from the 'benefitWrap' div. Cheers anyway. – RyanP13 Feb 24 '10 at 09:30
Sorry that sounded a little rude. Really appreciate the help. I'm sure it is just an IE quirk/crpaness. Not gonna wave the white flag just yet. – RyanP13 Feb 24 '10 at 09:45
I believe you're seeing the second clear the div out only because it's the first time the loop is finally running. I tried with static data mimicing what you've described as returning from the server, and `filter` worked where `find` didn't (`find` found 0 items and didn't enter the loop, like you described in your followup answer). Are you absolutely sure that the HTML you think is coming back from the server is actually coming back? It sounds like there's either no .benefitWrap div in the returning markup or it's empty. – Dave Ward Feb 24 '10 at 14:19
Yeah i don't think it is coming back in IE. Appears as though some others have difficulty in IE with this sort of thing. – RyanP13 Feb 28 '10 at 15:48

score 1 · Answer 4 · answered May 14 '10 at 01:11

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

score 0 · Answer 5 · answered Feb 23 '10 at 20:44

0

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!

answered Feb 23 '10 at 20:44

RyanP13

7,413
27
96
166

So what is in |data|? And what is the length of |$(data).find('.benefitWrap')|? – janmoesen Feb 23 '10 at 21:00
|data| should contain HTML from the index page on the server. This is a JSP page that accepts URL variables, queries the database and updates a HTML table which is then called by the AJAX and returns the results to the smae page that called it. – RyanP13 Feb 23 '10 at 21:22

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

5 Answers5

Linked