Failure invoking a modal window thru jquery in Yii-Collection of common programming errors

2 years ago

admin

2 minutes

I try to add modal window to my yii app. For this i use jquery from the framework. Yet, i does not work with jquery (1.8.3) from the framework: framework/web/js/source The error is Uncaught TypeError: Object [object Object] has no method ‘modal’ to this line:

$('#dataModal').modal().css({
            width: 'auto',
            height: 'auto',
    });

(see the full code below). The same happens when i exchange modal() to dialog().

Yet, when i try to upload the latest jquery (1.10.2) thru googleapis by registering as a client script it works (only one time at each view call though): config/main.php:

'components'=>array(
...
 'clientScript'=>array(
    'packages'=>array(
        'jquery'=>array(
            'baseUrl'=>'//ajax.googleapis.com/ajax/libs/jquery/1/',
            'js'=>array('jquery.min.js'),
        ),
    ),
 ),

and register in a view:

Yii::app()->clientScript->registerCoreScript('jquery');

The full code pertaining to the case is here:

×

        
    
    
    
    
    

 
 ...

// this function calls the modal thru AJAX
$('#data-select-btn').click(function(){
   var buttn = this; 
   // $(buttn).button('loading'); 
    $.ajax({
      url: "", /*LoadDataCheckBox*/
      cache: false,
      data: "type="+$("#Order_type").val(),
      success: function(html){
        $(".modal-body").html(html);       
        //$(buttn).button('reset');
        $('#dataModal').modal().css({
            width: 'auto',
            height: 'auto',
            'margin-top': '-50px',
            'margin-left': function () {
                return -($(this).width() / 2) - 80;
            },
        });
      }          
    });
})

Jquery-ui is also included:

Update

As far as Yii bootstrap extention i do use it, and in bootstrap.js there is the modal class definition and plugin definition. this file is being loaded after jquery, yet before jquery-iu, does sequence matter?

...

end of view file:

The sequence matters.

You should first load jquery, then jquery-ui, thw bootsttrap.js

Try indicate the position in the registerScript:
```
Yii::app()->clientScript->registerCoreScript('jquery', CClientScript::POS_HEAD);
```
More info here: http://www.yiiframework.com/doc/api/1.1/CClientScript#registerScriptFile-detail

And how you are including the jQuery UI?

===EDIT=== Try changing the order of the scripts in the config/main using this:
```
'components'=>array(
...
    'clientScript' => array(
        'coreScriptPosition' => CClientScript::POS_END,
    )
),
```
If nothing work, just disable the autoloding like that:
```
'clientScript' => array(
    'scriptMap'=>array(
        'jquery.js'=>false,
        'jquery.min.js'=>false
    ),
),
```
And load then just like the old days 😉

Originally posted 2013-11-15 09:08:09.