2011-03-19 28 views
7

Tengo una página web que consiste en un widget JQuery UI Tabs. El widget Tab carga las pestañas a través de AJAX. En una de las páginas de pestañas (nómbrelo DescripciónPágina), tengo un formulario que se enviará a través del plugin ajaxForm.jquery no está definido en la vista parcial cargada mediante ajax en IE

<div id="tabs"> 
    <ul> 
     <li> 
      <a href="DescriptionPage">Description Page</a> 
     </li> 
    </ul> 
</div> 

Este es el contenido de mi DescriptionPage.

<form id="myForm"> 
    <!-- Form elements goes here --> 
</form> 

<script> 
    $(function(){ 
    $('#myForm').ajaxForm(function (response) { 
     $('#myForm').parent().empty().append(response); 
    }); 
    }); 
</script> 

Una vez presentado el formulario, se devolverá la misma DescriptionPage, tanto la forma como la escritura. Entonces, el contenido del formulario se reemplaza con la respuesta del lado del servidor. La respuesta también contiene mensajes de validación.

El problema es que todo el escenario funciona bien en Chrome y Firefox. Pero en Internet Explorer 8, ocurre un problema extraño.

Cuando la pestaña se carga por primera vez, el javascript se ejecuta con éxito. Cuando el usuario envía el formulario y se responde, IE no puede ejecutar mi javascript, diciendo "JQuery no está definido".

¿Por qué IE no puede llamar a JQuery dentro del contenido cargado a través de ajax? ¿Hay alguna solución?

PS: pensé que separa la secuencia de comandos de HTML, pero no es una opción en absoluto :(

P.S2:. Mis Javascript y CSS se convirtió en un desastre a causa de estúpida IE

+0

Esto no solucionará el problema, pero podría usar '$ ('# myForm'). Parent(). Html (respuesta);' –

+0

Es interesante que el error diga "jQuery", ya que el código He pegado aquí no usa la variable "jQuery" en absoluto. ¿Te dice en qué archivo y línea aparece el error? –

+0

Gracias por responder Mark. En IE, hay errores que prenvet usando html (respuesta), es por eso que utilicé empty() y append() secuencialmente. – SadullahCeran

Respuesta

1

Este parece que funciona para mí en Internet Explorer 6:

index.html:

<html><head></head><body> 

<div id="container"></div> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
<script src="jquery.form.js"></script> 
<script> 
    jQuery('#container').load('DescriptionPage.html'); 
</script> 

</body></html> 

DescriptionPage.html:

<form id="myForm"> 
    <input type="submit" /> 
</form> 

<script> 
    $(function() { 
     $('#myForm').ajaxForm(function(response) { 
      $('#myForm').parent().empty().append(response); 
     }); 
    }); 
</script> 
0

intentar algo como esto para ver si se resuelve el problema:

<script> 
    $(function(){ 
    $('#myForm').ajaxForm(function (response) { 
     $('#myForm').empty().append($(response).children('form').html()); 
    }); 
    }); 
</script> 

Lo que esto debe hacer es reemplazar el contenido del formulario existente con el contenido del elemento devuelto en la respuesta. En lugar de reemplazar todo el elemento de formulario y ejecutar JS nuevamente. Puede solucionar su problema.

+0

Gracias. Pero debo volver a ejecutar JS nuevamente, para hacer enlaces, etc. Por ejemplo: el formulario debe estar vinculado a ajaxForm para cada respuesta. – SadullahCeran

0

usted podría intentar algo como esto:

<form id="myForm"> 
    <!-- Form elements goes here --> 
</form> 

<script> 
    (function($){ 
    $('#myForm').ajaxForm(function (response) { 
     $('#myForm').parent().empty().append(response); 
    }); 
    })(jQuery); 
</script> 

con ese enfoque encapsular los $ dentro de la función y no puede ser mal estado de los marcos de otros js (se debe utilizar alguna). No sé si eso va a trabajar con IE y no puedo probarlo, pero es de esperar que sea el caso :)

1

Por favor, se refieren a: jQuery 1.6.1 , IE9 and SCRIPT5009: '$' is undefined

Identificación del Usuario "Negro" ha proporcionado la dirección correcta para mí.

Estaba subiendo usando .AjaxForm en un cuadro de diálogo. después de eso, reemplazo ese formulario con otro AjaxForm. Luego tuve un error con "$ no está definido" o "jQuery no está definido" La razón principal es que solicité "render: layout => false" para el segundo cuadro de diálogo. Es por eso que toda la biblioteca js (incluir jQuery) no se ha cargado correctamente.

Para que, en el parcial del segundo cuadro de diálogo, tengo que agregar.

0

Si está utilizando Internet Explorer, asegúrese de que está utilizando la versión de jQuery jQuery 1. versión 2 no es compatible con IE .... a pesar de todo lo demás en el planeta soporta la versión 2 ....

http://jquery.com/download/

+0

Bienvenido a StackOverflow. Un par de sugerencias: considere pedirle al anunciante original que brinde más información, como la versión de jQuery que está usando. Además, sea más preciso en su respuesta para que sea útil para otros lectores. (No todas las versiones de IE no son compatibles con jQuery 2, ni todos los demás navegadores lo admiten). Gracias por tu contribución. –

Cuestiones relacionadas