Использование JQuery и Prototype на одной странице - PullRequest
Новая
       33

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

33 голосов
/ 16 января 2009

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

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 и две строки кода, показанные выше
  • Импорт jquery-noconflict.js (вместо jquery.js) во все мои страницы JSP / HTML

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

Ответы [ 12 ]

19 голосов
/ 30 октября 2011

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

<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's $().

5 голосов
/ 16 января 2009

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

4 голосов
/ 04 сентября 2010

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

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

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

$j(document).ready(function() {
    $j('#div_id').innerfade({
         // some stuff
    });
});
3 голосов
/ 16 января 2009

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

2 голосов
/ 05 сентября 2011

Так же, как записка для других, которые наткнуться на это. Решения описаны здесь (особенно с упоминанием прототипа): http://docs.jquery.com/Using_jQuery_with_Other_Libraries

2 голосов
/ 27 октября 2009

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

1 голос
/ 10 января 2012

Ваш 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>");

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

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

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

1 голос
/ 21 мая 2009

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

var $j = jQuery;
В этом случае прототип

получит контроль над $.

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

1 голос
/ 16 января 2009 
<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
0 голосов
/ 17 февраля 2011

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

jQuery.noConflict();

var $j = jQuery;

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

Совместная работа JQuery и Prototype

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...