Weird Chrome prototype / jQuery conflict

Tenemos una aplicación con código heredado que se basa en un prototipo, pero hemos encontrado que es demasiado ‘pesado’ para la mayoría de los lugares en los que queremos usarlo y hemos encontrado que jQuery se adapta mejor a nuestra forma de trabajar. Por lo tanto, estamos migrando a jQuery para obtener nuevas funcionalidades.

Mientras tanto, tenemos varias páginas que necesitan cargar ambas bibliotecas:

   $j = jQuery.noConflict();  

(tenga en cuenta la versión anterior del prototipo, encontramos problemas en la actualización que no queremos corregir cuando lo estamos eliminando)

Esto funciona en IE6, IE7, IE8-as-7 y FX3, pero lo carga en Chrome y todas las cosas de jQuery fallan.

La carga de la consola javascript del desarrollador muestra los siguientes errores:

 Uncaught Error: NOT_SUPPORTED_ERR: DOM Exception 9 http://.../prototype-1.5.1.2.js (line 1272) Uncaught TypeError: Object # has no method 'ready' http://.../lib.js (line 161) Uncaught TypeError: Object # has no method 'slideUp' http://.../page.aspx (line 173) ... and so on - all the failures are missing jQuery methods 

Por lo tanto, esto parece un conflicto en el prototipo que hace que la creación del objeto jQuery falle.

El problema del prototipo específico parece ser que Prototype.BrowserFeatures.XPath es verdadero cuando no debería ser así, ya que XPath document.evaluate no es compatible.

Bien, ahora vuelve a cargar la página con la consola de JavaScript abierta, ¡todo funciona! WTF? Cierre la consola, vuelva a cargar y falla nuevamente.

La falla solo ocurre cuando la carga de la página ocurre sin la consola de JavaScript abierta, ¿por qué habría alguna diferencia? Eso se parece mucho a un error en Chrome.

¿Alguien capaz de explicar qué está pasando mal? ¿Por qué un error en el prototipo hace que el jQuery init falle? ¿Por qué cargar la página con la consola abierta hace que funcione?

Alguien sabe una buena solución? (aparte de la actualización a prototype-1.6.0.3.js, que soluciona este problema pero rompe una carga de código heredado en otro lugar)

Desde Core / jQuery.noConflict :

NOTA: Esta función debe invocarse después de incluir el archivo jQuery javascript, pero ANTES de incluir cualquier otra biblioteca en conflicto, y antes de que realmente se use otra biblioteca en conflicto, en caso de que jQuery se incluya al final. noConflict se puede llamar al final del archivo jQuery.js para deshabilitar globalmente el alias $ () jQuery. jQuery.noConflict devuelve una referencia a jQuery, por lo que se puede utilizar para reemplazar el alias $ () del objeto jQuery.

Tal vez intente cambiarlo a:

    

He encontrado la raíz de este problema:

  1. Prototipos de cargas, y debido a que WebKit carece de document.getElementsByClass() , Prototype (insidously) lo crea.

  2. Comienza la inicialización de jQuery, y en la parte superior, establece la window.$ a jQuery .

  3. Durante la inicialización de JQuery, el motor Sizzle (agregado en 1.3.2?) Se inicializa. Como parte de su introspección, comprueba y luego prueba la funcionalidad de document.getElementsByClass() . Como resultado, llama a la impelementación de Prototype de getElementsByClass() , que depende de window.$ establece en $ de Prototype, no en jQuery.

En última instancia, esto deberá corregirse en jQuery (ver tickets http://bugs.jquery.com/ticket/4365 y 5027 ). Mi parche rápido fue eliminar la asignación a la window.$ En la parte superior de la inicialización de jQuery.

    Intereting Posts