1

В xhtml файле подключаю библиотеки:

outputScript library="javascript" name="jquery-1.3.2.js"   
 outputScript library="javascript" name="ui.core.js"    
 outputScript library="javascript" name="ui.sortable.js"    
 outputScript library="javascript" name="indexFunction.js"  

В indexFunction.js:

(function ($) {  

    $.fn.shuffle = function () { 
        return this.each(function () { 
            var items = $(this).children(); 
            return (items.length) 
                    ? $(this).html($.shuffle(items, $(this))) 
                    : this;  
        });  
    };  

    $.fn.validate = function () {  
        var res = false;
        this.each(function () {
            var arr = $(this).children();
            res = ((arr[0].innerHTML === "1") &&
                    (arr[1].innerHTML === "2") &&
                    (arr[2].innerHTML === "3") &&
                    (arr[3].innerHTML === "4") &&
                    (arr[4].innerHTML === "5") &&
                    (arr[5].innerHTML === "6"));
        });
        return res;
    };

    $.shuffle = function (arr, obj) {
        for (
                var j, x, i = arr.length; i;
                j = parseInt(Math.random() * i),
                x = arr[--i], arr[i] = arr[j], arr[j] = x
                )
            ;
        if (arr[0].innerHTML === "1")
            obj.html($.shuffle(arr, obj));
        else
            return arr;
    };

})(jQuery);

$(function () {

    $("#sortable").sortable(); /*для возможности перетакивать*/

    $("#sortable").disableSelection();

    $('.captcha_wrap ul').shuffle(); /*перемешиваем*/

});  

Следующая ошибка срабатывает:

Uncaught TypeError: $(...).shuffle is not a function 

В файле indexFunction.js.xhtml?ln=javascript:392 , т е строка: $('.captcha_wrap ul').shuffle(); /*перемешиваем*/

До этого на jsp было, все работало как надо, а теперь на jsf переписывают и такое...

2
  • Попробуйте удалить явный импорт jquery-1.3.2.js и посмотреть, изменится ли что-то. Есть вероятность, что JSF-ский фреймворк импортирует другую версию JQuery. Кстати, не указано, какую реализацию JSF используете.
    – bobzer
    17 окт 2016 в 4:50
  • После удаления подключения в коде библиотеки jquery - вот такая ошибка: Uncaught ReferenceError: jQuery is not defined. Использую Primefaces. 17 окт 2016 в 5:32

2 ответа 2

1

У вас проблема в том, что переменная $ к моменту окончания загрузки документа оказывается затерта чем-то другим. Решение проблемы - в том, чтобы найти где можно сохранить ее.


Поскольку у вас блоки с объявлениями функций и их использованием находятся в одном и том же файле - надо просто переместить второй блок внутрь первого. Это будет работать, поскольку вы сохраняете $ в качестве параметра автовызванной функции.

Также, если на странице используется другая версия jquery - неплохой идеей является использование noConflict:

(function ($) {  

    $.fn.shuffle = function () { 
        ...
    };

    ...

    $(function () {

        ....    
        $('.captcha_wrap ul').shuffle(); /*перемешиваем*/

    });

})(jQuery.noConflict(true));

Если же сделать так не представляется возможным - можно воспользоваться тем свойством jquery, что она передает саму себя в обработчик события готовности документа:

$(function ($) {

    ....    
    $('.captcha_wrap ul').shuffle(); /*перемешиваем*/

});

$.noConflict(true); // Обязательно после всех ваших модулей!

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

11
  • Спасибо большое, всё работает =) jQuery.noConflict(true) помогло 17 окт 2016 в 9:30
  • @Наталья боюсь предположить как вы его использовали отдельно от остального ответа... 17 окт 2016 в 9:36
  • Именно так, как вы указали, так и сделала, т е (function ($) { $.fn.shuffle = function () { ... }; ... $(function () { .... $('.captcha_wrap ul').shuffle(); /*перемешиваем*/ }); })(jQuery.noConflict(true)); 17 окт 2016 в 9:42
  • @Наталья ну так вам помог не noConflict - а перенос куска кода. noConflict тут не для вашего кода, а чтобы чужой не сломался. 17 окт 2016 в 9:45
  • Буду иметь ввиду. Спасибо за разъяснение :) 17 окт 2016 в 9:49
0

Primefaces содержит библиотеку jQuery в своём составе. Попытка подключить jQuery явно может привести к проблемам с её версионностью.

Можно попытаться использовать jQuery, поставляемый с Primefaces, для чего следует добавить на страницу следующие импорты:

<h:outputScript library="primefaces" name="jquery/jquery.js" target="head" />
<h:outputScript library="primefaces" name="jquery/jquery-plugins.js" target="head" />

Тег target="head" нужен только в случае, если импорт осуществляется вне блока <h:head>

Если версия jQuery из Primefaces не подходит, то можно подменить её одним из следующих способов:

  1. Переопределить своей версией, осуществив импорт js-файла с именем /resources/primefaces/jquery/jquery.js. Путь к файлу и его имя должны быть именно такими, т.е. следует переименовать jquery-1.3.2.js в jquery.js и создать папку /resources/primefaces/jquery/ в корневой папке веб-части вашего приложения и сохранить js-файл в ней.
  2. Заменить версию jQuery в библиотеке Primefaces. Распакуйте primefaces.jar, замените /META-INF/resources/primefaces/jquery/jquery.js новой версией, упакуйте primefaces.jar.

Следует тщательно протестировать замену, т.к. может быть нарушена функциональность Primefaces. Способ 1 в этом плане более безопасен, т.к. можно осуществить импорт только на конкретных страницах, не затрагивая функциональность приложения в целом (как в способе 2).

1
  • Использование jQuery, поставляемой с Primefaces, к сожалению не дало положительных результатов. Помогло jQuery.noConflict(true), как посоветовали ниже 17 окт 2016 в 9:30

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.