El método .Qax jQuery en IE7 e IE6 no funciona pero funciona bien en Firefox

Esto se relaciona con mi post anterior:

Método jQuery .load que causa la actualización de la página AJAX

Cambié mi implementación para usar el método .ajax en lugar de .load y funciona bien en Firefox pero no en IE7 o 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($('
' + $benefitWrap + '
')); }); } }); event.preventDefault(); });

Esto me está matando, ya que ha tardado años en llegar tan lejos.

¿Alguna idea de dónde voy mal?

Sin embargo, sólo un rápido. He tenido algunos problemas frustrantes con jQuery en el pasado que fallaron silenciosamente con IE6 / 7. En casi todos los casos, en algún lugar de mi código (no necesariamente en la llamada ajax en cuestión) tuve una coma adicional después de un argumento como este:

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

Ejecutaría el script a través de jslint para ver si hay algo raro en la syntax que causa este problema antes de realizar la depuración adecuada.

Accidentalmente resolví cuál era el problema.

El enlace al que se hace referencia en esta variable:

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

Tenía un valor de hash en el final como tal:

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

Esto hace que el AJAX se caiga en ambas versiones de IE.

Utilizando el siguiente código:

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

Getrs deshacerse de él y ahora funciona 🙂

event es una palabra reservada en algunas versiones de IE . Intente cambiar el parámetro que está capturando del event a algo que evite colisiones, como evt , por ejemplo:

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

Actualizar

Tras una revisión adicional, creo que su problema es el find() . En este caso, deberías usar filter() .

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

Eso puede ser refactorizado aún más a solo:

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

Hash en la url es un problema con IE 6 y 7, xhr.status eror 500. Se resolvió bien con:

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

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

Pues el problema parece estar aquí:

 success: function(data){ alert(data); $(data).find('.benefitWrap').each(function(){ alert(data); var $benefitWrap = $(this).html(); $('.benefitWrap').replaceWith($('
' + $benefitWrap + '
')); });

La segunda alerta nunca aparece pero la primera sí aparece. ¡Odio el IE!