CODEWITHSUNDEEP
jqueryyii2
Mohammad Hammadi
Mohammad Hammadi

Reputation: 793

Yii2 conflict with JQuery. TypeError: $(...).dialog is not a function

I am using Yii2 Framework. I have a conflict with jQuery. I used the jQuery dialog in specific view, but it didn't work: Getting this error: TypeError: $(...).dialog is not a function.

I disabled the default javascript of Yii2 in config/web.php by adding the below code:

'assetManager' => [
        'bundles' => [
            'yii\web\JqueryAsset' => [
                'js'=>[]
            ],
            'yii\bootstrap\BootstrapPluginAsset' => [
                'js'=>[]
            ],
        ],
    ],

then I added the latest JQuery in specific view using the below code:

<?php   $this->registerJsFile('@web/js/jquery-3.2.1.js',['position' => \yii\web\View::POS_HEAD]);
    $this->registerJsFile('@web/js/jquery-ui.js',['position' => \yii\web\View::POS_HEAD]); ?>

then I registered my JS code in the same view: 

<?php
        $this->registerJs(
            "$(document).ready(function($){
                 $('.add-product-button').on('click', function() {
                     var pid = $(this).attr('id');
                     var qty = $('#txt-qty-' + pid).val().trim();
                     $.ajax({
                         url: '?r=sales-order/addproduct',
                         data: {id: pid, value: qty},
                         beforeSend: function(){
                             $('#dialog').html('Adding product...');
                             $('#dialog').dialog();
                         },
                         success: function(data) {
                           $('#dialog').dialog('close');
                          }
                    });

                    return false;
                });

            }); ",
            View::POS_END,
            'my-button-handler'
        );
        ?>
    <?php }; ?>

The above makes jQuery dialog work. But the the yii2 javascript not working.

How can I solve this problem?

Upvotes: 1

Views: 1698

Answers (2)

Phemelo Khetho
Phemelo Khetho

Reputation: 280

I encountered the same problem and this is how I solved it;

  1. Navigate to \vendor\yiisoft\yii2-jui\src\Dialog.php at line 45 and add the following code;

    if($.fn.button && $.fn.button.noConflict !== undefined){

    var bootstrapButton = $.fn.button.noConflict();

    $.fn.bootstrapBtn = bootstrapButton;

}

Upvotes: 0

gmc
gmc

Reputation: 3990

First, let Yii2 jquery assets as they were. The error you were getting was due to the use of the dialog function, which if I am not wrong is not part of jQuery but jQuery UI. Then, you need only to add jQuery UI to you page.

You can do that in different ways. On way would be installing the Yii2 official JUI extension and adding it in the depends section of the asset bundle you are using. Or if you are going to use it very often, you can configure it as a dependence of Yii2's default jquery asset:

'assetManager' => [
        'bundles' => [
            'yii\web\JqueryAsset' => [
                'depends' => 'yii\jui\JuiAsset'
            ],

Upvotes: 1

Related Questions