Magento pokazujące konflikt jQuery ze sobą

Question

Jestem całkiem nowicjuszem na Magento. Użyłem banner rotaor script, aby wyświetlić baner. Ponieważ musiałem wyświetlać baner na każdej stronie, dlatego zaimplementowałem suwak w pliku header.phtml, dzięki czemu mogę wyświetlić baner na każdej stronie. Więc w header.phtml mojego kodu suwak jest coś takiego

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

tutaj suwak działa dobrze, ale kiedy spojrzałem na console tab Firefox Mam niektóre errors.Here jest obraz na karcie Konsola błędów. Aby rozwiązać wszystkie problemy, które zgłosiłem, poznałem, że jQuery jest w konflikcie. Aby wyczyścić, użyłem jQuery.noConflict, a także usunąłem cały $ do jQuery. Ale wciąż mam ten sam problem. Każda pomoc i sugestie będą naprawdę znaczące. Dzięki

żywo miejscu można znaleźć here

Answer 1

Trzeba dodać jQuery.noConflict(); do końca pliku jquery.js skryptu, a nie poza nim, gdyż musi być wywołana przed prototype.js skrypt zostanie włączone.

Answer 2

Dołącz plik jquery.noConflict do pliku app/design/frontend/default/[theme name] /template/page/html/head.phtml.

Chcesz dodać to prawo po to jQuery, a tuż przed getCssJsHtml()

poszedłem o krok dalej w moim wdrażania i wezwał go do $ j var, ale można to zrobić lub po prostu implementacja jquery.noConflict();

Jeśli używasz var $ j, wtedy wszystkie twoje wywołania jQuery będą z tym obiektem.

Zrobiłem to:

!-- 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() ?> 

w header.phtml trzeba będzie połączyć się suwak tak:

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

Answer 3

Można użyć tego modułu Magento: https://github.com/sotastudio/Mage.Ext.Jquery

It po prostu reorganizuje dołączanie elementów JavaScript i ustawia jQuery bezpośrednio na pierwszą pozycję. Ponadto można w łatwy sposób wywoływać elementy jQuery w tym fragmencie:

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

Answer 4

Masz dwie problemy.

1)

Jesteś tym jQuery dwukrotnie. Zawierasz plik jquery.js (1.7.1), a także jquery-1.4.4.min.js w dalszej części. Powoduje to problemy.

Szukaj projekt dla napisu „jquery-1.4.4.min.js” i prawdopodobnie będzie znaleźć exntry wewnątrz pliku konfiguracyjnym XML, spróbuj tego zakomentowanie ..

Ewentualnie dwa moduły są zarówno dodawanie jquery poprzez konfigurację Magento XML. Usuń jeden z tych wpisów wewnątrz plików konfiguracyjnych XML modułów, a problemy powinny zniknąć. Polecam usunięcie jquery-1.4.4.min.js, ponieważ jest dołączony do większości innych wtyczek jquery, co spowoduje jeszcze więcej problemów.

2)

jQuery.noConflict() jest wywoływana po jQuery używana. Zgodnie z sugestią powyżej najlepszym sposobem uzyskania tego jest otwarcie pliku jquery.js i dodanie tego na samym końcu pliku: ; jQuery.noConflict();

Answer 5

Najlepszym sposobem, aby dostać się wokół konfliktów w moim doświadczeniu jest w następujący sposób:

• Usuń 1 wersję jQuery - masz 2 zainstalowany. Zwykle najnowszy powinien być zgodny z wszystkimi wtyczkami.
• Edycja jQuery złożyć i zrobić, na przykład: jquery-1.7.1-custom.js
  • dodać jQuery.noConflict(); na końcu pliku.
• Co robisz jest poprawny - nie używać znak $, wystarczy użyć jQuery prefiks za wszystko.
• Najważniejsze w Twoim przypadku. Upewnij się, że pliki są ładowane w tej kolejności:
  • Prototype
  • jQuery (na zamówienie)
  • jQuery wtyczki

Answer 6

Ty Głównym problemem jest to, że jesteś w tym jQuery przed prototypu (Wyświetl źródło strony)

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

trzeba go zmienić na

<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 

do stałej ten otwarty

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

lub (If jQuery nie znajdują się w powyżej)

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

Twój page.xml powinien wyglądać

<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 --> 
    ..... 

Tworzenie jquery.noconflict rozmowę plików.js i dodać

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

W niestandardowego kodu jQuery, można nie używać $... już (wykorzystanie tylko przez prototypeJs) trzeba użyć albo $j... lub jQuery...

Następnie usunąć

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