Magento顯示jQuery彼此衝突

我是Magento的新手。我用banner rotaor script來顯示橫幅。因爲我不得不在每個頁面上顯示橫幅，這就是爲什麼我在header.phtml文件中實現了滑塊，以便我可以在每個頁面中顯示橫幅。所以在我的header.phtml滑塊的代碼是這樣的Magento顯示jQuery彼此衝突

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

這裏的滑塊運轉良好，但是當我在Firefox看着console tab我得到了一些errors.Here是控制檯選項卡中的錯誤形象。 enter image description here 爲了解決我搜索的所有問題，並瞭解到jQuery有衝突。因此爲了清楚說明我使用了jQuery.noConflict並且還將$的全部刪除爲jQuery。但我仍然遇到同樣的問題。任何幫助和建議都將非常可觀。由於

直播現場，可以發現here

來源

2013-02-05 NewUser

您必須添加jQuery.noConflict();到你的jquery.js腳本文件的末尾，而不是在它之外，因爲它有之前被列入prototype.js中的腳本調用。

來源

2013-02-05 13:17:27

感謝@Domen Vrankar的答覆。但是，你能告訴我，我必須使用jQuery.noConflict（）嗎？由於我對magento很新手，所以很困惑...... – NewUser

打開jquery.js文件。轉到最後一行的末尾並粘貼jQuery.noConflict（）;那裏。 –

是的，我做了你說的，但我仍然得到同樣的問題.. :( – NewUser

將jquery.noConflict包含在app/design/frontend/default/[主題名稱] /template/page/html/head.phtml文件中。

你想添加這個權利，你包括jQuery的後，和getCssJsHtml（）

前右我進了一步，我的實現，它調用一個附加$ J變種，但你可以做到這一點，或只是實現jquery.noConflict（）;

如果您使用var $ j，那麼您所有的jQuery調用都將與該對象一起使用。

我這樣做：

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

在header.phtml你需要打電話給你的滑塊是這樣的：

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

來源

2013-02-05 15:14:51

感謝您的答覆。我來通過您的示例代碼。但因爲我使用decostore主題這就是爲什麼我面臨一點點問題我的代碼爲head.phtml文件看起來像http://pastebin.com/6AVG2rGy 所以，你可以告訴我在哪裏更改文件？ – NewUser

你還需要注意下面的問題，你包括jQuery兩次:) – Andrew

您可以使用此Magento的模塊：https://github.com/sotastudio/Mage.Ext.Jquery

它只是重新組織JavaScript的東西，並將jQuery直接設置到第一個位置。另外，你可以在這個片段中輕鬆的激發jQuery的東西：

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

來源

2013-02-11 13:30:27 Andy

你有兩個問題。

1）

您包括jQuery的兩次。你有jquery.js（1.7.1），還包括jquery-1.4.4.min.js。這是導致正在看到的問題。

搜索項目的字符串「jQuery的1.4.4.min.js」，你可能會發現一個XML配置文件中的exntry，儘量評論了這一點..

可能是兩個模塊都添加jquery通過Magento XML配置。刪除模塊XML配置文件中的這些條目之一，問題應該消失。我會建議刪除jquery-1.4.4.min。js，因爲大多數其他jquery插件會導致更多的問題。

2）

jQuery.noConflict（）的jquery已經被使用之後被調用。如上所示，獲取這個結果的最好方法是打開你的jquery.js文件，並將其添加到文件的最後： ; jQuery.noConflict（）;

來源

2013-02-11 13:44:59 Andrew

來解決衝突以我的經驗，最好的辦法是：

刪除1個版本的jQuery - 安裝了2個。通常最新的應該與你的所有插件兼容。
編輯您的jQuery的文件，並進行，例如：jquery-1.7.1-custom.js
- 在文件的最後添加jQuery.noConflict();。
你在做什麼是正確的 - 不要使用$符號，只需使用 jQuery前綴的一切。
您的情況最重要。確保您的文件順序加載：
- 原型
- 的jQuery（自定義）
- jQuery插件

來源

2013-02-13 01:01:14

您的主要問題是，你包括原型之前的jQuery（查看頁面源文件）

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

您需要將其更改爲

<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

爲了固定該開放

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

或（如果不jquery的上面找到）

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

你page.xml應該像

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

創建一個文件調用jquery.noconflict。js和添加

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

在您自定義的jQuery代碼，您不能使用$...了（使用僅prototypeJs），您需要爲使用$j...或jQuery...

然後刪除

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

來源

2013-02-14 15:09:18

Magento顯示jQuery彼此衝突

回答

相關問題