title: Bootstrap Modal in yii2 with multiple controller
body: <p>I have a view <code>checkin</code> and <code>message</code> and i want to show <code>message/create</code> as a <code>modal</code> in <code>checkin/index</code> page</p>
  
  <p>Here is what i have done so far </p>
  
  <pre><code> &lt;div class="checkin-index"&gt;
  
  &lt;h1&gt;&lt;?= Html::encode($this-&gt;title) ?&gt;&lt;/h1&gt;
  &lt;?php // echo $this-&gt;render('_search', ['model' =&gt; $searchModel]); ?&gt;
  
  &lt;div class="common-button"&gt;
      &lt;p&gt;
          &lt;?= Html::a('Send Message', ['message/create'] ,['class' =&gt; 'btn btn-danger','id' =&gt; 'buttonMessage','data-pjax' =&gt; '0']) ?&gt;
      &lt;/p&gt;
  &lt;/div&gt;
  &lt;?php
      Modal::begin(['id' =&gt;'modalMessage']);
      Modal::end();
  ?&gt;
  
  &lt;?php Pjax::begin(['id' =&gt; 'event-grid', 'timeout' =&gt; false]); ?&gt;
  
   &lt;?= GridView::widget([
          'dataProvider' =&gt; $dataProvider,
          'filterModel' =&gt; $searchModel,
          'showOnEmpty'=&gt;true,
          'columns' =&gt; [
              [
                  'class' =&gt; 'yii\grid\CheckboxColumn',
              ],
              [
  
                  'attribute' =&gt; 'event_id',
                  'label' =&gt; 'Event Title',
                  'value' =&gt; 'event.title'
              ],
              [
                  'attribute' =&gt; 'fullName',
                  'label' =&gt; 'Name',
                  'value' =&gt; 'users.fullname',
              ],
              [
                  'attribute' =&gt; 'user_id',
                  'label' =&gt; 'Email',
                  'value' =&gt; 'users.email',
              ],
              'user_type',
          ],
      ]);
   ?&gt;
  &lt;?php Pjax::end(); ?&gt;
  
  &lt;?php
  // You only need add this,
  $this-&gt;registerJs('
      var gridview_id = ""; // specific gridview
      var columns = [2]; // index column that will grouping, start 1
  
      var column_data = [];
          column_start = [];
          rowspan = [];
  
      for (var i = 0; i &lt; columns.length; i++) {
          column = columns[i];
          column_data[column] = "";
          column_start[column] = null;
          rowspan[column] = 1;
      }
  
      var row = 1;
      $(gridview_id+" table &gt; tbody  &gt; tr").each(function() {
          var col = 1;
          $(this).find("td").each(function(){
              for (var i = 0; i &lt; columns.length; i++) {
                  if(col==columns[i]){
                      if(column_data[columns[i]] == $(this).html()){
                          $(this).remove();
                          rowspan[columns[i]]++;
                          $(column_start[columns[i]]).attr("rowspan",rowspan[columns[i]]);
                      }
                      else{
                          column_data[columns[i]] = $(this).html();
                          rowspan[columns[i]] = 1;
                          column_start[columns[i]] = $(this);
                      }
                  }
              }
              col++;
          })
          row++;
      });
  ');
  
       $this-&gt;registerJs(
           '$( document ).ajaxStart(function() {
                      $("body").addClass("loading");
              });
  
              $( document ).ajaxComplete(function() {
                      $("body").removeClass("loading");
              });'
       );
  </code></pre>
  
  <p>?></p>
  
  <p>And i have also created a <code>javascript</code> to load and show the modal,which is in <code>AppAsset</code> and code is</p>
  
  <pre><code>$(function() {
  $('#buttonMessage').click(function(e) {
      e.preventDefault();
      $('#modal').modal('show').find('.modal-content')
          .load($(this).attr('href'));
     });
  });
  </code></pre>
  
  <p>But when i click on the <code>send message</code> button it doesnt open the modal but displays some error in <code>firebug</code> saying </p>
  
  <pre><code>Synchronous XMLHttpRequest on the main thread is deprecated because of its 
  detrimental effects to the end user's experience.
  For more help, check http://xhr.spec.whatwg.org/.
  </code></pre>
  
  <p>So what am i doing wrong here???
  Do i need to specify somewhere that its from different <code>model</code> and <code>controller</code> i am calling??</p>