After reading several threads and blog posts I’m still struggling with this issue.
I’m in the middle of a project where my client asked me to prepare the application to be able touse editable grids. For this reason I included bootstrap and x-editable extensions. In order to create new record into the grid I use a button which calls a modal window into which I render my controller/create action, where I use eselect2 dropdowns.
When I call my controller/create action from the browser it works fine and generates all eselect2 dropdowns,however when I render it into a bootstrap modal window it generates simple html selects.
I read that thisis an existing issue with bootstarp and select2 and there are some workaroundsbut I couldn’t make none of them working at all.
I recognized in the generated HTML that when view is rendered into the modal window the eselect2 script is not included into the HTML header. I added eselect2 script manually to the header but it didn’t solve my issue.
Can someone helpme out on this?
Please find herewith my code:
Generate button in my admin view to create new item:
<?php $this->widget('bootstrap.widgets.TbButton', array(
'label'=>'Új cikk rögzítése',
'type'=>'primary', // null, 'primary', 'info', 'success', 'warning', 'danger' or 'inverse'
'size'=>'normal', // null, 'large', 'small' or 'mini'
'htmlOptions'=>array(
'data-toggle'=>'modal',
'data-target'=>'#myModal',
'href'=>$this->createUrl('cikk/create'),
),
)); ?>
Generate modal in my admin view
<?php $this->beginWidget('bootstrap.widgets.TbModal', array(
'id'=>'myModal',
'options' => array(
'backdrop' => 'static',
'keyboard' => true),
)); ?>
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h4>Új cikk rögzítése</h4>
</div>
<div class="modal-body">
<?php //echo $this->renderPartial('_form', array('model'=>$model),false, true); ?>
</div>
<div class="modal-footer">
<?php $this->widget('bootstrap.widgets.TbButton', array(
'type'=>'primary',
'label'=>'Adatok rögzítése',
'url'=>'',
'htmlOptions'=>array('onclick' => '$("#cikk-form").submit()'),
)); ?>
<?php $this->widget('bootstrap.widgets.TbButton', array(
'label'=>'Mégsem',
'url'=>'#',
'htmlOptions'=>array('data-dismiss'=>'modal'),
)); ?>
</div>
<?php $this->endWidget(); ?>
<script type="text/javascript">
$("a[data-toggle=modal]").click(function(){
var target = $(this).attr('data-target');
var url = $(this).attr('href');
if(url){
$(target).find(".modal-body").load(url);
}});
$(function(){$("#myModal").draggable().resizable();});
</script>
My _form view that is rendered into the modal window:
<?php $form=$this->beginWidget('bootstrap.widgets.TbActiveForm', array(
'id'=>'cikk-form',
'type'=>'horizontal',
// Please note: When you enable ajax validation, make sure the corresponding
// controller action is handling ajax validation correctly.
// There is a call to performAjaxValidation() commented in generated controller code.
// See class documentation of CActiveForm for details on this.
'enableAjaxValidation'=>false,
)); ?>
<p class="note">A <span class="required">*</span> -al jelölt mezők kitöltése kötelező.</p>
<?php echo $form->errorSummary($model); ?>
<fieldset>
<?php echo $form->textFieldRow($model, 'megnevezes', array('class'=>'span3')); ?>
<?php echo $form->labelEx($model,'mertekegyseg'); ?>
<?php $this->widget('ext.select2.ESelect2', array(
'model' => $model,
'attribute' => 'mertekegyseg',
'data' => Mertekegyseg::model()->getMertekegysegOptions(),
'htmlOptions'=>array('empty' => 'Válasszon mértékegységet!')
));?>
<?php echo $form->error($model,'mertekegyseg'); ?>
</fieldset>
<?php $this->endWidget(); ?>