Использование JQuery и Prototype на одной странице

Некоторые из моих страниц используют как JQuery, так и Protoype. Поскольку я обновился до версии 1.3 JQuery, это вызывает проблемы, потому что обе библиотеки определяют функцию с именем "$".

JQuery предоставляет функцию noConflict(), которая отказывается от управления $другими библиотеками, которые могут ее использовать. Поэтому мне кажется, что мне нужно пройти через все мои страницы, которые выглядят так:

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

и измените их так:

<head>      
    <script type="text/javascript" src="/obp/js/prototype.js"></script>
    <script type="text/javascript" src="/obp/js/jquery.js"></script>
    <script type="text/javascript">
        jQuery.noConflict();
        var $j = jQuery;
    </script>
</head>

Затем я должен использовать '$' для Prototype и '$ j' (или 'jQuery') для JQuery. Я не совсем доволен дублированием этих двух строк кода на каждой соответствующей странице и ожидаю, что в какой-то момент кто-то, вероятно, забудет добавить их на новую страницу. Я предпочел бы иметь возможность сделать следующее

Создайте файл j query-noconflict.js который "включает" jquery.js и 2 строки кода, показанные выше
Импортировать jquery-noconflict.js (вместо jquery.js) во все мои страницы JSP/HTML

Однако я не уверен, можно ли включить один JS файл в другой, как я описал? Конечно, альтернативное решение состоит в том, чтобы просто добавить 2 строки кода выше в jquery.js напрямую, но если я это сделаю, мне нужно будет помнить, что нужно делать это каждый раз, когда я обновляю JQuery.

Ответ 1

В настоящее время вы можете сделать что-то вроде этого:

<head>          
    <script type="text/javascript" src="/obp/js/prototype.js"></script>
    <script type="text/javascript" src="/obp/js/jquery.js"></script>
    <script type="text/javascript">
        var $j = jQuery.noConflict();
    </script>
</head>

Затем используйте jQuery как $j() и Prototype $().

Ответ 2

Казалось бы, самый простой ответ - укусить пулю и включить ваши строки noConflict. Конечно, если ваши страницы не используют общий заголовок, это решение может быть не самым лучшим.

Ответ 3

Это решение отлично работало:

jQuery.noConflict();
var $j = jQuery;

Теперь используйте $j вместо $ для вашего кода jQuery, например:

$j(document).ready(function() {
    $j('#div_id').innerfade({
         // some stuff
    });
});

Ответ 4

Я прошел через это некоторое время. Это очень раздражает, и в конце концов я решил отсеять все мои старые материалы Prototype и заменить его на jQuery. Мне нравится, как Prototype обрабатывает некоторые задачи Ajax, но не стоило компромиссов с сохранением всех бесполезных вещей.

Ответ 5

Не могли бы вы просто включить код jQuery = noConflict() в исходный файл jquery.js? Почему это нужно определить таким образом?

Ответ 6

Как примечание к другим, которые натыкаются на это. Решения описаны здесь (в частности, упоминание прототипа): http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Ответ 7

<script>
    document.write(unescape('%3Cscript type="text/javascript" src="/obp/js/jquery.js"%3E%3C/script%3E'));
</script>
<script>
    jQuery.noConflict();
    var $j = jQuery;
</script>

или

var scripty = document.createElement('script');
scripty.href="/obp/js/jquery.js";
document.getElementsByTagName('head')[0].appendChild(scripty);
jQuery.noConflict();
var $j = jQuery;

EDIT:

Я опробовал это предложение, но последние 2 строки вызывают ошибку

jQuery is not defined

Ответ 8

Сначала вы можете вызвать jquery, а затем установить

var $j = jQuery;

В этом случае прототип

возьмет под контроль $.

Или вы можете просто обратиться к jQuery, используя полное имя функции jQuery (jQuery).

Ответ 9

Ваш jquery-noconflict.js должен выглядеть так (убедитесь, что все в одной строке):

document.write("<script type=\"text/javascript\" src=\"/obp/js/jquery.js\"></script><script type=\"text/javascript\">jQuery.noConflict();var $j = jQuery;</script>");

... и чем ваш include (как вы уже указывали) должен выглядеть так:

<head>      
    <script type="text/javascript" src="/obp/js/prototype.js"></script>    
    <script type="text/javascript" src="/obp/js/jquery-noconflict.js"></script>
</head>

Это решение решает все ваши требования, я думаю.

Ответ 10

Если бы я был вами, я бы отказался от кода отсутствия конфликта в файле JavaScript include, как вы говорили выше, а затем выясните какой-то процесс, в котором я бы установил эти вещи, которые мне нужно включить во все мои страницы в одно центральное место. Если вы работаете с прямыми HTML файлами, и у вас нет какой-либо возможности для создания шаблонов/сценариев на стороне сервера для того, что входит в документ, всегда есть возможность делать Server-Side Include.

В любом случае боль, которую вы испытаете при обновлении каждой из ваших страниц, на этот раз вернется, когда вам нужно будет обновить свой аналитический код или нижний колонтитул сайта.

Ответ 11

Используйте прототип ниже jQuery следующим образом:

<script type="text/javascript" src="news/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="news/jquery.easynews.js"></script>


<script type="text/javascript" src="lb/js/prototype.js"></script>
<script type="text/javascript" src="lb/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="lb/js/lightbox.js"></script>
<link href="lb/css/lightbox.css" rel="stylesheet" type="text/css" />

в этом случае функция jQuery создаст проблему, поэтому вы можете использовать ее для решения проблемы:

<script type="text/javascript">
     jQuery.noConflict();
     var JQ = jQuery;//rename $ function
</script>

Ответ 12

Вам нужно загрузить его в public/javascript/application.js

jQuery.noConflict();

var $j = jQuery;

Это также хорошая статья, которая может быть полезна.

JQuery и Prototype работают вместе