Как обойти конфликт js скриптов плагина pqgrid и yii2?

Question

[AlexSer]

b.widget is not a function[Подробнее] pqgrid.min.js:9:6815

$(...).pqGrid is not a function

Вроде все подключил как в инструкциях https://paramquery.com/tutorial.
Подскажите плиз.

В AppAsset: 
    public $css = [
        'css/site.css',
        'bootstrap-select/css/bootstrap-select.min.css',
        'selectic/selectik.css',
        'tags/bootstrap-tagsinput.css',
        'css/font_icons.css',
        'http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css',
        'grid_master/pqgrid.min.css',



];
    public $js = [
        'bootstrap-select/js/bootstrap-select.min.js',
        'scripts.js',
        'selectic/jquery.selectik.js',
        'selectic/jquery.selectik.min.js',
        'selectic/jquery.selectik.js',
        'selectic/jquery.mousewheel.js',
        'tags\bootstrap-tagsinput.js',
        'jquery_csv/jquery.csv.js',
        'preloader/preloader.js',
        'http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js',
        'http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js',
        'grid_master/pqgrid.min.js'

на view

<?php
$script = <<< JS
$(function(){
    var data = [ [1,'Exxon Mobil','339,938.0','36,130.0'],
            [2,'Wal-Mart Stores','315,654.0','11,231.0'],
            [3,'Royal Dutch Shell','306,731.0','25,311.0'],
            [4,'BP','267,600.0','22,341.0'],
            [5,'General Motors','192,604.0','-10,567.0'],
            [6,'Chevron','189,481.0','14,099.0'],
            [7,'DaimlerChrysler','186,106.3','3,536.3'],
            [8,'Toyota Motor','185,805.0','12,119.6'],
            [9,'Ford Motor','177,210.0','2,024.0'],
            [10,'ConocoPhillips','166,683.0','13,529.0'],
            [11,'General Electric','157,153.0','16,353.0'],         
            [12,'Total','152,360.7','15,250.0'],                
            [13,'ING Group','138,235.3','8,958.9'],
            [14,'Citigroup','131,045.0','24,589.0'],
            [15,'AXA','129,839.2','5,186.5'],
            [16,'Allianz','121,406.0','5,442.4'],
            [17,'Volkswagen','118,376.6','1,391.7'],
            [18,'Fortis','112,351.4','4,896.3'],
            [19,'Crédit Agricole','110,764.6','7,434.3'],
            [20,'American Intl. Group','108,905.0','10,477.0']];
             
    var obj = {};
    obj.width = 700;
    obj.height = 400;
    obj.colModel = [{title:"Rank", width:100, dataType:"integer"},
        {title:"Company", width:200, dataType:"string"},
        {title:"Revenues ($ millions)", width:150, dataType:"float", align:"right"},
        {title:"Profits ($ millions)", width:150, dataType:"float", align:"right"}];
    obj.dataModel = {data:data};
    $("#grid_json").pqGrid( obj );                                
 
});  


$('button').click(function() {
    var url=$(this).attr('data-url');
      $.ajax({
    type:'post',
    url:url,
    }).done(function(response) {
    $('#contents').html(response);
    });
});

JS;
$this->registerJs($script);
    ?>

Comments

[Дмитрий]

Добрый день.
Вы покажите как подключили всё это великолепие в самом yii2.

[AlexSer]

slo_nik, в AppAsset прописал..Все ссылки открываются на файлы...но ошибки выходят

[Максим Тимофеев]

Чего Вы решили что это конфликт? Ошибка о другом

[Дмитрий]

в AppAsset прописал

AlexSer, это ни о чём не говорит.
Показывайте как прописали, что в исходном коде страницы видно и так далее и тому подобно...

[AlexSer]

slo_nik,

В AppAsset: 
    public $css = [
        'css/site.css',
        'bootstrap-select/css/bootstrap-select.min.css',
        'selectic/selectik.css',
        'tags/bootstrap-tagsinput.css',
        'css/font_icons.css',
        'http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css',
        'grid_master/pqgrid.min.css',



];
    public $js = [
        'bootstrap-select/js/bootstrap-select.min.js',
        'scripts.js',
        'selectic/jquery.selectik.js',
        'selectic/jquery.selectik.min.js',
        'selectic/jquery.selectik.js',
        'selectic/jquery.mousewheel.js',
        'tags\bootstrap-tagsinput.js',
        'jquery_csv/jquery.csv.js',
        'preloader/preloader.js',
        'http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js',
        'http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js',
        'grid_master/pqgrid.min.js'

на view

<div id="#grid_json"></div>
<?php
$script = <<< JS
$(function(){
    var data = [ [1,'Exxon Mobil','339,938.0','36,130.0'],
            [2,'Wal-Mart Stores','315,654.0','11,231.0'],
            [3,'Royal Dutch Shell','306,731.0','25,311.0'],
            [4,'BP','267,600.0','22,341.0'],
            [5,'General Motors','192,604.0','-10,567.0'],
            [6,'Chevron','189,481.0','14,099.0'],
            [7,'DaimlerChrysler','186,106.3','3,536.3'],
            [8,'Toyota Motor','185,805.0','12,119.6'],
            [9,'Ford Motor','177,210.0','2,024.0'],
            [10,'ConocoPhillips','166,683.0','13,529.0'],
            [11,'General Electric','157,153.0','16,353.0'],         
            [12,'Total','152,360.7','15,250.0'],                
            [13,'ING Group','138,235.3','8,958.9'],
            [14,'Citigroup','131,045.0','24,589.0'],
            [15,'AXA','129,839.2','5,186.5'],
            [16,'Allianz','121,406.0','5,442.4'],
            [17,'Volkswagen','118,376.6','1,391.7'],
            [18,'Fortis','112,351.4','4,896.3'],
            [19,'Crédit Agricole','110,764.6','7,434.3'],
            [20,'American Intl. Group','108,905.0','10,477.0']];
             
    var obj = {};
    obj.width = 700;
    obj.height = 400;
    obj.colModel = [{title:"Rank", width:100, dataType:"integer"},
        {title:"Company", width:200, dataType:"string"},
        {title:"Revenues ($ millions)", width:150, dataType:"float", align:"right"},
        {title:"Profits ($ millions)", width:150, dataType:"float", align:"right"}];
    obj.dataModel = {data:data};
    $("#grid_json").pqGrid( obj );                                
 
});  


$('button').click(function() {
    var url=$(this).attr('data-url');
      $.ajax({
    type:'post',
    url:url,
    }).done(function(response) {
    $('#contents').html(response);
    });
});

JS;
$this->registerJs($script);
    ?>

[AlexSer]

в консоли ошибка
[Показать/скрыть детали сообщения.] Error: Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but lower than version 4.
комментирую 'ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery....',
ошибки теряются но ничего не отображается

[Дмитрий]

AlexSer, мне Ваш код в ответе на мой комментарий нафиг не нужен.
Добавляйте в вопрос!!!

Answer 1

[Дмитрий]

Определитесь с версией jquery, выберите какую-то одну из версий.

'http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js',
'http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js',

И пропишите подключение jquery первой строкой в public $js = []

И ещё, в файле AppAsset, в блоке public $depends = [] что прописано?

Comments

[Андрей К]

А как связаны версии jQuery и jQuery UI?

[Андрей К]

Ваши пункты надо объединить, jQuery не в начало поставить, а просто прописать, что зависит от него ))

[Дмитрий]

Андрей К, какие пункты?
Скрипты подключаются в том порядке, в котором они указаны в public js. А public $depends вообще можно отключить.

[Андрей К]

slo_nik, пункты про jQuery и depends.

Всё-таки правильно зависеть, а не добавлять ещё раз. А вот уже сам Asset с jQuery настроить на CDN для прода.

Хотя это нюансы.

[Дмитрий]

Андрей К, в любом случае автору вопроса надо открыть исходный код страницы и посмотреть, что и в каком порядке подключено.

Answer 2

[Максим Тимофеев]

Чего Вы решили что это конфликт? Ошибка о другом

Вроде все подключил

Возможно, но надо еще и правильно подключить. В частности убедитесь, что jquery подключился ранее Вашего скрипта, который от него зависим. Думаю дело именно в не верном подключении, а не в конфликтах. Как подключали?
Порядок скриптов сделайте верный. В частности Jquery до всего остального.