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>