如何在yii2中加載遠程模態內容

Question

我一直在嘗試在相同的yii2視圖上為不同的bootstrap模式加載遠程內容

<?php
    $label  = $model->getAttributeLabel('educationId');
    $addon = [
        'prepend' => [
            'content' => Html::icon('book')
        ],
        'append' => [
            'content' => Html::button(
                Html::icon('plus'), [
                    'class' => 'btn btn-success',
                    'title' => 'Add New' . $label,
                    'onclick' => new JsExpression('showModal();'),
                ]
            ),
            'asButton' => true
        ]
    ];
    echo  Html::tag('label',$model->getAttributeLabel('educationId'), ['class'=>'control-label']);
    echo Select2::widget([
        'model' => $model,
        'attribute' => 'educationId',
        'data' => ArrayHelper::map ( EducationLevel::find ()->all (), 'id', 'name' ),
        'options' => ['placeholder' => 'Select Education Level ...','template' => 'label}\n{error}'],
        'addon' => $addon,
        'pluginOptions' => [
            'maximumInputLength' => 10
        ],
    ]);

JS功能

Function showModal(){
    $('#addEducationModal').modal({
        remote: 'modal.html',
        show: true
    });
}

因此，用戶將點擊文本字段的插件按鈕，模式將顯示，其他文本字段應具有相同的機制和不同的模態內容。

然而，我得到的只是褪色的背景。

Answer 1

我能夠使它工作，而不僅僅是。

我的問題主要是因為yii cashes生成文件所以解決我刪除生成的文件並確保內容生成新鮮:)

我沒有使用JQuery加載函數。

見下面的代碼：

PHP查看代碼

        $label  = $model->getAttributeLabel('majorId');
        $addon = [
        'prepend' => [
        'content' => Html::icon('book')
        ],
        'append' => [
        'content' => Html::button(Html::icon('plus'), [
                'class' => 'btn btn-success',
                'title' => 'Add New' . $label ,
                'data-toggle' => 'modal',
                'data-target' => '#addModal',
                'href'=> 'addMajorModal.html',
                ]),
                'asButton' => true
                ]
                ];
        echo  Html::tag('label',$model->getAttributeLabel('majorId'),['class'=>'control-label']);
        echo Select2::widget([
                'model' => $model,
                'attribute' => 'majorId',
                'data' =>ArrayHelper::map ( Major::find ()->all (), 'id', 'name' ),
                'options' => ['placeholder' => 'Select Major ...','template' => 'label}\n{error}'],
                'addon' => $addon,
                'pluginOptions' => [
                'maximumInputLength' => 10
                ],
                ]);

<div class="modal fade" id="addModal" >
  <div class="modal-dialog" dir="rtl">
    <div class="modal-content" dir="rtl">
                <!-- Content will be loaded here from "addMajorModal.html" file -->
            </div>
        </div>
    </div>

Modal文件內容

 <div class="modal-header panel-primary" dir="rtl" horizantal-aligned="">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">إضا�ة جديد</h4>
      </div>
      <div class="modal-body" dir="rtl">
        <div id="login-boxs" class="login-popup>
           <form id="newCat" method="post" class="signin" dir="rtl" action="#">
               <div class="form-group">
                    <label for="certName" class="control-label">مسمى التخصص </label>
                    <input type="text" name="name" data-val="true" data-val-required="ErrMsg" data-rule-required="true" placeholder="مسمى الشهادة" class="form-control" id="certName">
               </div>
                <div class="form-group">
                    <label for="certShortDesc" class="control-label">وص� قصير </label>
                    <input type="text" name="shdesc"  data-rule-required="true" placeholder="وص� قصير" class="form-control" id="certShortDesc" required>
               </div>
          </form>
                            </div>
      </div>
      <div class="modal-footer" dir="rtl">
      <div class="col-lg-6" dir="rtl">
        <div class="progress" >
                       <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 100%;" id="progresBarUpload">       
                       </div>
                   </div>
      </div>
      <div class="col-lg-6" dir="rtl">
      <button type="button" class="btn btn-danger" dir="rtl" data-dismiss="modal"><i class="glyphicon glyphicon-remove"> </i>Close</button>
        <button id="submitButton" type="button" dir="rtl" class="btn btn-primary" onclick="createCertificate()"><i class="glyphicon glyphicon-ok"> </i>Save changes</button>

      </div>

              </div>

多數民眾贊成，這個模式將基於yii追加HTML的生成加載

據我所知，這將在Bootstrap 3.3之前可行，因為版本4中將棄用遠程內容