title: Issue with Bootstrap Modal and Select2 in Yii
body: <p>I have posted this question on Yii developers forum as well but didn't get any reply so far, so I thought it worth to try to post the quietsion here.</p>
  
  <p>After reading several threads and blog posts I’m still struggling with this issue. </p>
  
  <p>I’m in the middle of a project where my client asked me to prepare the application to be able to use 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. </p>
  
  <p>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. </p>
  
  <p>I read that thisis an existing issue with bootstarp and select2 and there are some workarounds but I couldn’t make none of them working at all. </p>
  
  <p>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. </p>
  
  <p>Can someone helpme out on this?</p>
  
  <p>Please find herewith my code:</p>
  
  <p><strong>Generate button in my admin view to create new item:</strong></p>
  
  <pre><code>&lt;?php $this-&gt;widget('bootstrap.widgets.TbButton', array(
      'label'=&gt;'Új cikk rögzítése',
      'type'=&gt;'primary', // null, 'primary', 'info', 'success', 'warning', 'danger' or 'inverse'
      'size'=&gt;'normal', // null, 'large', 'small' or 'mini'
      'htmlOptions'=&gt;array(
          'data-toggle'=&gt;'modal',
          'data-target'=&gt;'#myModal',
          'href'=&gt;$this-&gt;createUrl('cikk/create'),
      ),
  )); ?&gt;
  </code></pre>
  
  <p><strong>Generate modal in my admin view</strong></p>
  
  <pre><code>&lt;?php $this-&gt;beginWidget('bootstrap.widgets.TbModal', array(
                  'id'=&gt;'myModal',
                  'options' =&gt; array(
                                  'backdrop' =&gt; 'static',
                                  'keyboard' =&gt; true),
          )); ?&gt;
  
  &lt;div class="modal-header"&gt;
      &lt;a class="close" data-dismiss="modal"&gt;&amp;times;&lt;/a&gt;
      &lt;h4&gt;Új cikk rögzítése&lt;/h4&gt;
  &lt;/div&gt;
  
  &lt;div class="modal-body"&gt;
      &lt;?php //echo $this-&gt;renderPartial('_form', array('model'=&gt;$model),false, true); ?&gt;
  &lt;/div&gt;
  
  &lt;div class="modal-footer"&gt;
      &lt;?php $this-&gt;widget('bootstrap.widgets.TbButton', array(
          'type'=&gt;'primary',
          'label'=&gt;'Adatok rögzítése',
          'url'=&gt;'',
          'htmlOptions'=&gt;array('onclick' =&gt; '$("#cikk-form").submit()'),
      )); ?&gt;
      &lt;?php $this-&gt;widget('bootstrap.widgets.TbButton', array(
          'label'=&gt;'Mégsem',
          'url'=&gt;'#',
          'htmlOptions'=&gt;array('data-dismiss'=&gt;'modal'),
      )); ?&gt;
  &lt;/div&gt;
  
  &lt;?php $this-&gt;endWidget(); ?&gt;
  
  &lt;script type="text/javascript"&gt;
  $("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();});
  
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>My _form view that is rendered into the modal window:</strong></p>
  
  <pre><code>&lt;?php $form=$this-&gt;beginWidget('bootstrap.widgets.TbActiveForm', array(
          'id'=&gt;'cikk-form',
          'type'=&gt;'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'=&gt;false,
  )); ?&gt;
  
          &lt;p class="note"&gt;A &lt;span class="required"&gt;*&lt;/span&gt; -al jelölt mezők kitöltése kötelező.&lt;/p&gt;
  
          &lt;?php echo $form-&gt;errorSummary($model); ?&gt;
  &lt;fieldset&gt;
          &lt;?php echo $form-&gt;textFieldRow($model, 'megnevezes', array('class'=&gt;'span3')); ?&gt;
  
          &lt;?php echo $form-&gt;labelEx($model,'mertekegyseg'); ?&gt;
          &lt;?php $this-&gt;widget('ext.select2.ESelect2', array(
                  'model' =&gt; $model,
                  'attribute' =&gt; 'mertekegyseg',
                  'data' =&gt; Mertekegyseg::model()-&gt;getMertekegysegOptions(),
                     'htmlOptions'=&gt;array('empty' =&gt; 'Válasszon mértékegységet!')
                ));?&gt;
          &lt;?php echo $form-&gt;error($model,'mertekegyseg'); ?&gt;
  
  &lt;/fieldset&gt;
  &lt;?php $this-&gt;endWidget(); ?&gt;
  </code></pre>
  
  <p><strong>SOLUTION:</strong></p>
  
  <p>I copy the solution here before you get lost in comments below.</p>
  
  <p>In my case the problem was that some of my javascripts tangled with other scripts and that's why select2 was not loaded correctly.</p>
  
  <p>I applied <code>Yii::app()-&gt;clientscript-&gt;scriptMap['*.js'] = false;</code> in my _form view and that was solved my problem.</p>
  
  <p>Big up to agriboz for helping me track down the problem!</p>