Bootstrap Modal With Select2 Issue

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'






)); ?>

Generate modal in my admin view

<?php $this->beginWidget('bootstrap.widgets.TbModal', array(


		'options' => array(

				'backdrop' => 'static',

				'keyboard' => true),

  	)); ?>


<div class="modal-header">

    <a class="close" data-dismiss="modal">&times;</a>

    <h4>Új cikk rögzítése</h4>



<div class="modal-body">

    <?php //echo $this->renderPartial('_form', array('model'=>$model),false, true); ?>



<div class="modal-footer">

    <?php $this->widget('bootstrap.widgets.TbButton', array(


        'label'=>'Adatok rögzítése',


        'htmlOptions'=>array('onclick' => '$("#cikk-form").submit()'),

    )); ?>

    <?php $this->widget('bootstrap.widgets.TbButton', array(




    )); ?>



<?php $this->endWidget(); ?>


<script type="text/javascript">


    var target = $(this).attr('data-target');

    var url = $(this).attr('href');






My _form view that is rendered into the modal window:

<?php $form=$this->beginWidget('bootstrap.widgets.TbActiveForm', array(



	// 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.


)); ?>

	<p class="note">A <span class="required">*</span> -al jelölt mezők kitöltése kötelező.</p>

	<?php echo $form->errorSummary($model); ?>


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


<?php $this->endWidget(); ?>

Anybody who interested in the solution can found the answer here: StackOverflow thread