Вопрос по javascript, drupal, drupal-theming, jquery-plugins, jquery – Включить две версии jQuery на страницу, не затрагивая старые плагины

4

Наш сайт на drupal работает с jQuery версии 1.2.1, которую мы не обновляли.

Проблема заключается в следующем:

Нам нужно добавить новый плагин с именем jQuery Tokeninput, но он работает только в последних версиях jQuery. Мы попытались добавить последнюю версию jQuery со старой версией, но она дает странные результаты.

Мой вопрос: как включить последний файл jQuery, не затрагивая старые плагины jQuery?

Ваш Ответ

3   ответа
7

Method #1: (recommended)

Вы могли бы сделать что-то вроде этого:

<script type='text/javascript' src='js/jquery_1.7.1.js'></script>   
<script type='text/javascript'>  
 // In case you wonder why we pass the "true" parameter,
 // here is the explanation:
 //   - When you use jQuery.noConflict(), it deletes
 //     the "$" global variable.
 //   - When you use jQuery.noConflict(true), it also
 //     deletes the "jQuery" global variable.
 var $jq = jQuery.noConflict(true);  
</script>  
<script type='text/javascript' src='js/jquery_1.2.1.js'></script> 

И таким образом, когда вы хотите что-то сделать с новой версией JQuery вместо$ использование$jq.

$jq('.selector').on('click', function(){  
    //do something  
});

Method #2: (might break things on your site - not recommended)

В вашемtemplate.php файл:

<?php
function {theme_name}_preprocess(&$vars, $hook) {
if (arg(0) != 'admin' && $hook == "page") {
// Get an array of all JavaScripts that have been added
$javascript = drupal_add_js(NULL, NULL, 'header');

// Remove the original jQuery library
unset($javascript['core']['misc/jquery.js']);

// Add in our new jQuery library
// We do it this way to keep the includes in the same order
$core = array(
//Alternative jQuery
drupal_get_path('theme', '{theme_name}').'/js/libs/jquery-1.7.1.min.js' => array(
'cache' => TRUE,
'defer' => FALSE,
)
);

// Merge back into the array of core JavaScripts
$javascript['core'] = array_merge($javascript['core'], $core);

// Rerender the block of JavaScripts
$vars['scripts'] = drupal_get_js(NULL, $javascript);
}
}

Be sure to only do this on the frontend of your site. It can mess up admin toolbars if they are dependent on Drupal's version of jQuery.

Также используйтеjQuery.noConflict( true )иначе две версии jQuery будут сталкиваться :-).jQuery.noConflict() просто удаляет$ переменная, передаваяtrue параметр также удаляетjQuery переменная.
Хороший улов. Обновлено! :)
Спасибо за ваше предложение. Я обновил свой ответ, чтобы рекомендовать лучшее решение.
Второй способ хорош. Первый способ, однако, может сломать ваш сайт. Существует причина, по которой «Обновление jQuery» модуль получает только версию 1.3. * на d6.
0

Модуль обновления jQuery который будет обновлять версии JQuery для вас без необходимости кодировать его. Посмотрите на него, если он представляет интерес, но я не думаю, что модуль сохраняет старую версию jQuery, а скорее заменяет ее новой.

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

Вы правы, он заменяет его, что, по сути, не то, о чем просил ОП. Обновление jQuery прекрасно, но только если у вас нет МАССИВНОГО сайта с множеством старых плагинов и нет места для регрессионного тестирования (всхлип).
3

is completely backward compatible with pre-existing scripts

should have no side effects (except for obvious side effect of adding an additional JS download)

allows any versions of jQuery in any order -- you can have the "default" be an old version of jQuery and the "additional" be a newer version, or vice versa. How to use 2 versions of jQuery on the same page
<!-- IMPORTANT: ORDER is vital. Do not change the order of the following. -->

<script src="//code.jquery.com/jquery-1.4.2.min.js"></script>
<script>
    // Save original jQuery version to another variable
    var $Original = jQuery.noConflict(true);
</script>

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
    // Save new jQuery version to another variable
    var $v1_11_0 = jQuery.noConflict(true);

    // Replace the original jquery version on $ and jQuery so pre-existing scripts don't break
    // No need to declare "var" here since the $ and jQuery still exist as "undefined"
    $ = $Original;
    jQuery = $Original;

    // Optional: Here I'm saving new jQuery version as a method of "$" -- it keeps it more organized (in my opinion)
    $.v1_11_0 = $v1_11_0;
</script>
See it in action here:

http://jsfiddle.net/dd94h/

Here's the entire HTML that you can drop in an html file to test
<!DOCTYPE html>
<html>
<head>
    <title>jQuery within jQuery</title>
    <style media="all" type="text/css">
        h1 span { font-weight: normal; }
    </style>

    <!-- IMPORTANT: ORDER is vital. Do not change the order of the following. -->

    <script src="//code.jquery.com/jquery-1.4.2.min.js"></script>
    <script>
        // Save original jQuery version to another variable
        var $Original = jQuery.noConflict(true);
    </script>

    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
        // Save new jQuery version to another variable
        var $v1_11_0 = jQuery.noConflict(true);

        // Replace the original jquery version on $ and jQuery so pre-existing scripts don't break
        // No need to declare "var" here since the $ and jQuery still exist as "undefined"
        $ = $Original;
        jQuery = $Original;

        // Optional: Here I'm saving new jQuery version as a method of "$" -- it keeps it more organized (in my opinion)
        $.v1_11_0 = $v1_11_0;
    </script>
</head>
<body>
<h1>Default jQuery: <span id="default-jquery">Loading...</span></h1>
<h1>Additional jQuery: <span id="additional-jquery">Loading...</span></h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id felis quam. Morbi ultrices nisi vel odio vestibulum nec faucibus diam congue. Etiam cursus, turpis id rutrum adipiscing, ligula justo rhoncus ipsum, sed posuere diam orci vel mi. Etiam condimentum tincidunt metus, non dictum ligula hendrerit et. Nulla facilisi. Aenean eleifend volutpat nibh, eu tempor nulla auctor ac. Proin ultrices cursus scelerisque. Curabitur sem sapien, tempus et dictum nec, viverra vel odio. Nulla ullamcorper nisl a dolor laoreet eu eleifend tellus semper. Curabitur vitae sodales nisl. Donec tortor urna, viverra sed luctus in, elementum sit amet turpis.</p>

<script>
    // Continue to use "$" for the original jQuery version
    $( document ).ready(function(){
        $('#default-jquery').text($().jquery);
    });

    // Use $.v1_11_0(...) for the newly-added version
    $.v1_11_0( document ).ready(function(){
        $.v1_11_0('#additional-jquery').text($.v1_11_0().jquery);
    });
</script>
</body>
</html>

Похожие вопросы