Failure invoking a modal window through jquery in Yii

Question

I tried to add modal window to my yii app. For this I use jquery from the framework. Yet, It 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'
In 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) through googleapis by registering it 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 it in the view:

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

The full code pertaining to the case is here:

<!-- modal window -->      
<?php $this->beginWidget('bootstrap.widgets.TbModal', 
    array('id'=>'dataModal')); ?>
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h4><?=Yii::t("ui", "Выберите номенклатуру")?></h4>
        <!--?php $this->widget('bootstrap.widgets.TbButton', array(
            'label'=>Yii::t("ui", "Справочник номенклатуры"),
            'url'=>$this->createUrl('assortment/index'),            
            'htmlOptions'=>array('data-dismiss'=>'modal', 'class' => 'btn btn-medium btn-primary', /*'style'=>'float:right; clear:both;'*/),
        )); ?-->
    </div>
    <div class="modal-body"></div>
    <div class="modal-footer">
    <?php $this->widget('bootstrap.widgets.TbButton', array(
            'label'=>Yii::t("ui", "Справочник номенклатуры"),
            'url'=>Yii::app()->createUrl('assortment/index'),           
            'htmlOptions'=>array(/*'data-dismiss'=>'modal',*/ 'class' => 'btn btn-medium btn-primary', 'style'=>'float:left; /*clear:both;*/'),
        )); 
        $this->widget('bootstrap.widgets.TbButton', array(
            'label'=>Yii::t("ui", "Отмена"),
            'url'=>'#',
            'htmlOptions'=>array('data-dismiss'=>'modal'),
        )); ?>
    </div>
<?php $this->endWidget(); ?>
<!-- modal end --> 
 ...
<script type="text/javascript">
// this function calls the modal thru AJAX
$('#data-select-btn').click(function(){
   var buttn = this; 
   // $(buttn).button('loading'); 
    $.ajax({
      url: "<?php echo $this->createAbsoluteUrl('order/loadData') ?>", /*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;
            },
        });
      }          
    });
})
</script>

For Jquery-ui these are also included:

<script type="text/javascript" src="/application/assets/6d25656/jui/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="/application/assets/6d25656/jui/js/jquery-ui-i18n.min.js"></script>

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-ui, does sequence matter?

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
...
<script type="text/javascript" src="/application/assets/7d883f12/js/bootstrap.js"></script>

End of the view file:

<script type="text/javascript" src="/application/assets/6d25656/jui/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="/application/assets/6d25656/jui/js/jquery-ui-i18n.min.js"></script>

to use .modal or .dialog, you must also include a reference to the jqueryUI script — Daniel Ward, Oct 11 '13 at 14:00
I see you're using the Yii Bootstrap extension, you should probably look there for a missing modal() function. jQueryUi only has a dialog() function. — davey, Oct 11 '13 at 14:14
@davey, how can i find missing modal() function in bootstrap? — Igor Savinkin, Oct 11 '13 at 14:40
I took a look at it, is the bootstrap.min.js included on your page somewhere? (although there isn't a model() function as well) — davey, Oct 11 '13 at 14:46
@davey, see my question update. bootstrap.min.js is not included. It's supposed to appear in production mode. — Igor Savinkin, Oct 11 '13 at 14:50
What is select2.min.js? That's probably the problem, that bootstrap(.min).js is not included for some reason. — davey, Oct 11 '13 at 14:56
sorry my typo, @davey, there should be It's located in extentions' folder, but it gets loaded out from assets folder. — Igor Savinkin, Oct 11 '13 at 14:58
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/39073/discussion-between-igor-savinkin-and-davey) — Igor Savinkin, Oct 11 '13 at 15:02
probably `jQuery.noConflict()` will work for you . Make sure js lib does not conflict see this further http://stackoverflow.com/questions/8586306/bootstrap-modal-is-not-a-function — sakhunzai, Oct 11 '13 at 17:00

score 0 · Answer 1 · answered Oct 13 '13 at 07:13

0

Try this... In order/loadData make sure your renderPartial isn't loading scripts a second time.

$this->renderPartial('view_partial', array(
    'model' => $model,
), false, false);

http://www.yiiframework.com/doc/api/1.1/CController#renderPartial-detail

answered Oct 13 '13 at 07:13

Travis

636
8
11

actually the modal window does load some tabled content needing for some more scripts. So there is there: $this->renderPartial('view_partial', array( 'model' => $model, ), false, **true**); – Igor Savinkin Oct 14 '13 at 08:29

Marcos · Answer 2 · 2013-10-14T20:15:25.510

0

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 ;)

<script src="<?php echo $this->baseURL ?>/js/jquery.min.js"></script>

edited Oct 14 '13 at 20:15

answered Oct 14 '13 at 19:49

Marcos

1,240
10
20

jQuery-ui as well as jquery are automatically loaded by Yii (all ajax calls performed with them). Bootstrap.js is also supposed to be autoloaded since i've installed Bootstrap ext. – Igor Savinkin Oct 14 '13 at 20:04
the Yii loads first (in head section) *jquery.js*, litte down *bootstrap.js* then at the bottom right **before**
tag there go *jquery-ui.min.js* *jquery-ui-i18n.min.js* and *jquery-ui-timepicker-addon.js*
– Igor Savinkin Oct 14 '13 at 20:08
the thing is that i do not include anything. Yii is smart enough to register all core files in different assets folders (jquery and jquery-ui being in one folder) and register them for each page accordingly. You might try to see this link: [source](view-source:http://blogandtraffic.com/application/index.php?r=order/createorder) – Igor Savinkin Oct 14 '13 at 20:11
Is asking for password :( – Marcos Oct 14 '13 at 20:18
in this the page the last button ajusted to dropdown is where modal is attached. – Igor Savinkin Oct 14 '13 at 20:20
yes, when i inserted 'coreScriptPosition' => CClientScript::POS_END, all the stuff is at the bottom (inside though). Yet now the debugger tells me **$ is not defined**, looks like jquery is not loaded properly. – Igor Savinkin Oct 14 '13 at 20:24
The problem is that the scrips are before the call for the *.js files, try move the – Marcos Oct 14 '13 at 20:28
So, change the order again, lets see what happens – Marcos Oct 14 '13 at 20:30
ok, i've done it. Positions are like original. (i couldn't move my script to the bottom cause of breadcrumbs, but as down as possible). – Igor Savinkin Oct 14 '13 at 20:34
Thank you, Marcos, it doesn't help though. I'll try to reorder scripts' loading according to your sugestion tomorrow (now midnight is coming...) – Igor Savinkin Oct 14 '13 at 20:40
Ok, try bring the jquery ui to the head, it still in the end of the file – Marcos Oct 14 '13 at 20:44
actually there is a dateTimePicker using jquery-ui, standing above the – Igor Savinkin Oct 14 '13 at 20:53

Failure invoking a modal window through jquery in Yii

Update

2 Answers2