Magento che mostra conflitto jQuery tra loro

Question

Sono abbastanza novizio a Magento. Ho usato banner rotaor script per mostrare banner. Come ho dovuto mostrare banner in ogni pagina ecco perché ho implementato il cursore nel file header.phtml in modo che possa mostrare il banner in ogni pagina. Così nel mio codice header.phtml cursore è qualcosa di simile

<script language="javascript"> 
     jQuery.noConflict(); 
     jQuery(document).ready(function(){ 
      bannerRotator('#bannerRotator', 500, 5000, true); 
     }); 
     </script> 
<div id="bannerRotator"> 
    <?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('homepageslider')->toHtml(); ?> 
</div> 

qui il cursore sta funzionando bene ma quando ho guardato il console tab in Firefox ho avuto qualche errors.Here è l'immagine di errore scheda console. Per risolvere tutti i problemi, ho cercato su google e sono venuto a sapere che jQuery è in conflitto. Quindi per cancellare che ho usato jQuery.noConflict e anche rimosso tutto il $ in jQuery. Ma ancora sto ottenendo lo stesso problema. Qualsiasi aiuto e suggerimento sarà davvero apprezzabile. Grazie

sito dal vivo può essere trovato here

Answer 1

È necessario aggiungere jQuery.noConflict(); alla fine del file jquery.js sceneggiatura e non al di fuori di esso come deve essere chiamato prima sceneggiatura prototype.js viene incluso.

Answer 2

Includere jquery.noConflict nel file app/design/frontend/default/[nome tema] /template/page/html/head.phtml.

si desidera aggiungere questo diritto dopo si include jQuery, e subito prima del getCssJsHtml()

sono andato un ulteriore passo avanti nella mia implementazione e lo ha chiamato ad un $ j var, ma si può fare o semplicemente implementare jquery.noConflict();

Se si utilizza una var $ j, tutte le chiamate jQuery saranno con quell'oggetto.

ho fatto questo:

!-- adding jQuery --> 
<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript"> 
//<![CDATA[ 
    var $j = jQuery.noConflict(); 
//]]> 
</script> 
<!-- ************* --> 

<?php echo $this->getCssJsHtml() ?> 

nel vostro header.phtml è necessario chiamare il cursore in questo modo:

<script language="javascript"> 
$j(document).ready(function(){ 
      bannerRotator('#bannerRotator', 500, 5000, true); 
     }); 
</script> 

Answer 3

è possibile utilizzare questo modulo Magento: https://github.com/sotastudio/Mage.Ext.Jquery

E ' riorganizza solo l'inclusione di elementi JavaScript e imposta jQuery direttamente nella prima posizione. In aggiunta, puoi facilmente sparare jQuery all'interno di questo frammento:

(function($) { 
    $(function() { 
    //console.log($('body')); 
    }); 
})(jQuery); 

Answer 4

Hai due problemi.

1)

siete tra cui jQuery due volte. Hai jquery.js (1.7.1) incluso, e anche jquery-1.4.4.min.js incluso più in basso. Questo sta causando problemi.

Cerca il progetto per la stringa 'jquery-1.4.4.min.js' e si rischia di trovare un exntry all'interno di un file di configurazione XML, provare a commentare questo fuori ..

Possibilmente due moduli sono sia aggiungendo jquery tramite la configurazione XML di Magento. Rimuovere una di queste voci nei file di configurazione XML dei moduli e i problemi dovrebbero scomparire. Consiglierei di rimuovere jquery-1.4.4.min.js come questo è incluso dopo la maggior parte degli altri plugin jquery che causeranno ancora più problemi.

2)

jQuery.noConflict() è chiamato dopo jquery è stato usato. Come suggerito sopra, il modo migliore per ottenere arounf è aprire il file jquery.js e aggiungerlo alla fine del file: ; jQuery.noConflict();

Answer 5

Il modo migliore per spostarsi conflitti nella mia esperienza è la seguente:

• Rimuovere 1 versione di jQuery - avete 2 installato. Di solito l'ultimo dovrebbe essere compatibile con tutti i tuoi plugin.
• Modificare il file tuo jQuery e fare, per esempio: jquery-1.7.1-custom.js
  • aggiungere jQuery.noConflict(); alla fine del file.
• Quello che stai facendo è corretto - non usare il segno $, basta usare il prefisso jQuery per tutto.
• Il più importante nel tuo caso. Assicurarsi che i file vengono caricati nel seguente ordine:
  • Prototype
  • jQuery (personalizzato)
  • jQuery plugin

Answer 6

È problema principale è che si sta tra cui jQuery prima di prototipo (visualizza l'origine della pagina)

<script type="text/javascript" src="..../js/jquery/jquery.js"></script> 
<script type="text/javascript" src="..../js/prototype/prototype.js"></script> 

È necessario cambiarlo in

<script type="text/javascript" src=".../js/prototype/prototype.js"></script> 
<script type="text/javascript" src=".../js/jquery/jquery.js"></script> 
//best to add jQuery noConflict right after 

Per questo fisso aperta

/design/frontend/default/[theme]/layout/page.xml

o (se non jquery trovato supra)

/app/design/frontend/default/[theme]/template/page/html/head.phtml

tuo page.xml dovrebbe essere simile

<default translate="label" module="page"> 
    ...... 
     <block type="page/html_head" name="head" as="head"> 
      <action method="addJs"><script>prototype/prototype.js</script></action> 
      <action method="addJs"><script>lib/ccard.js</script></action> 
      <action method="addJs"><script>prototype/validation.js</script></action> 
      <action method="addJs"><script>scriptaculous/builder.js</script></action> 
      ...... 
      <action method="addJs"><script>mage/translate.js</script></action> 
      <action method="addJs"><script>mage/cookies.js</script></action> 


      <action method="addItem"><type>skin_js</type><name>js/jquery-1.7.2.min.js</name></action> 
      <action method="addItem"><type>skin_js</type><name>js/jquery.noconflict.js</name></action> 
      <action method="addItem"><type>skin_js</type><name>js/jqforms/jquery.jqtransform.js</name></action> 
      <!- all other jquery plugin below --> 
    ..... 

Creare un jquery.noconflict chiamata file.js e aggiungere

var $j = jQuery.noConflict(); // you could also add this to the end of jquery-1.7.2.min.js 

Nel codice jQuery personalizzato, non è possibile utilizzare $... più (uso esclusivo prototypeJs) è necessario utilizzare uno $j... o jQuery...

Poi rimuovere

<script src="http://modulesoft.biz:/projects/magento/extream/skin/frontend/base/default/js/jquery-1.4.4.min.js"></script>