Prototype und jQuery UI-Interferenz - jquery, jquery-ui, magento, prototypejs

Ok, ich habe das schon eine Weile recherchiert undIch habe meine Javascript-Dateien neu geordnet, wer weiß wie oft. Ich weiß, dass Prototype und jQuery nicht gut miteinander funktionieren. Meine jQuery funktioniert jedoch, meine jQuery-UI-Funktionen jedoch nicht.

Ich liste meine Js-Dateien in dieser Reihenfolge auf: - prototype.js - jquery.js - jquery-ui.js - jquery-noconflict.js

Meine jQuery-Datei sieht nicht so aus:

jQuery.noConflict();

Ok, der ganze Müll ist in den Tags. Später auf einer Seite mache ich Folgendes:

<div class="product_tabs clearfix">
<ul>
<?php if ($_description): ?> <li><a href="#tabs-1"><?php echo $this->__("Details") ?></a></li> <?php endif; ?>
<li><a href="#tabs-2">Review</a></li>
<li><a href="#tabs-3">Tags</a></li>
</ul>
<div class="std clearfix">
<?php if ($_description): ?> <div id="tabs-1"><?php echo $this->helper("catalog/output")->productAttribute($this->getProduct(), $_description, "description") ?></div> <?php endif; ?>
<div id="tabs-2">
<div class="row">
<div class="span5"><?php echo $this->getChildHtml("review_form") ?></div>
<div class="span4"><?php echo $this->getChildHtml("reviews") ?></div>
</div>
</div>
<div id="tabs-3"><?php echo $this->getChildHtml("product_tag_list") ?></div>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".product_tabs").tabs();
});
</script>

Und das ist kaputt .. Allerdings mein Haupt.js-Datei, die vor meiner noconflict-Datei aufgerufen wird, aber nachdem meine js- und prototypischen Dateien mit meiner Dropdown-Navigation das gleiche ready () wie die obige Funktion verwenden.

Ich verschiebe die tabs () - Funktion jedoch in die main.js-Datei und funktioniert immer noch nicht, während ich sie von der Seite lösche. Hat jemand eine Lösung dafür?

Ich habe den noconflict auf der Seite gelöscht, die die tabs () - Funktion verwendet hat, und es funktioniert gut, aber IE8 und darunter funktioniert nicht. Das war also keine wertvolle Lösung ... Das war die einzige, an die ich denken konnte.

Und ich muss Prototyp behalten, weil ich das Magento CMS verwende!

Antworten:

Sie sollten $ für Prototypfunktionen und jQuery für jQuery "s wie folgt verwenden:

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".product_tabs").tabs();
});
</script>

Versuchen Sie, jQuery ganz oben zu laden, d. H. Vor dem Prototypen und Schreiben jQuery.noconflict() am Ende Ihrer Jquery-Datei. Dann initialisieren Sie Ihren jQuery-Code mit jQuery(document).ready(function($){...});.