Yii2でデータを送信した後、返されたデータをBootstrap Modalポップアップに表示するには？

Question

私は2つのフィールドを持つモーダルポップアップを持っています。最初は、内部クエリをデータベースに送信し、そのモーダルポップアップの2番目のフィールドは返されたデータを表示することです。しかし、私が独立して（モーダルではなく）テストしたところ、モーダルとしてテストされたときにはデータを提出するだけでしたが、同じモーダルで結果を表示するのではなく、何が間違っているのでしょうか？ありがとう。

これは、モーダルポップアップを呼び出すビューです。

<?php Pjax::begin() ?> 
     <p> 
     <?= Html::button('Quick Search', ['value' =>Url::to('index.php?r=site/mypopup'),'class' =>'btn btn-success', 'id'=>'modalButton']) ?> 
     </p> 
     <?php 
     Modal::begin([ 
     'header'=> '<h4>My Modal Popup</h4>', 
     'id' => 'modal', 
     'size' => 'modal-lg', 
     ]); 
     echo "<div id='modalContent'></div>"; 
     Modal::end(); 
<?php Pjax::end(); ?> 

これはmypopup図である：

<?php Pjax::begin(['enablePushState' => false]); ?> 

      <?php $form = ActiveForm::begin(['id' => 'mypopup-form', 'options' => ['data-pjax' => true],]); ?> 

       <?= $form->field($model, 'pattern')->textArea(['rows' => 1]) ?> 

       <div class="form-group"> 
        <?= Html::submitButton('Submit', ['class' => 'btn btn-primary', 'name' => 'mypopup-button']) ?> 
       </div> 
       <?php 
        echo "<pre>"; 
        //SECOND FIELD 
        print_r($model->data); 
       ?> 
      <?php ActiveForm::end(); ?> 
      <?php Pjax::end(); ?> 

これはmypoupのコントローラである：

public function actionMypopup() 
    { 

      $model = new PopupForm(); 

      if ($model->load(Yii::$app->request->post()) && $model->validate()) { 

        $model->insertPopup(); 
       return $this->renderAjax('mypopup', ['model' => $model]); 

      } else { 
       return $this->renderAjax('mypopup', ['model' => $model]); 
      } 
    } 

これは、JSファイルです：私は克服している

$(function(){ 

    $('#modalButton').on('click', function(){ 
      $('#modal').modal('show') 
       .find('#modalContent') 
       .load($(this).attr('value')); 
      }); 

     $(document).ajaxComplete(function (event, xhr, settings) { 
     alert(xhr.getResponseHeader()); 
    }); 

}); 

Answer 1

2つの部分を変更することによって問題：

まず、main.jsファイルでjQuery beforeSubmitメソッドを作成しました。そのため、ページをリフレッシュせずにajax経由でフォームを送信します。

このコード・コードは、jsファイルの前のコードの下にあります。

$('body').on('beforeSubmit', 'form#mypopup-form', function() { 
    var form = $(this); 
    if (form.find('.has-error').length) { 
     return false; 
    } 

    $.ajax({ 
     url: form.attr('action'), 
     type: 'post', 
     data: form.serialize(), 
     success: function(data) { 
     $(form).find('.results').html(data); 

    return false; 
    }); 
      } 
    }); 

第二に、それは行動を形成するために、AJAXを呼び出します後。ビューでは、ajaxからのデータを投稿するかどうかを確認する条件を追加し、div名の結果に結果を表示します。

<?php if(isset($_POST['MyPopupForm'])) 
       { 
        echo "<pre>"; 
        print_r($model->data); 
        echo '</pre>';exit(); 
       }?> 

と終わりに同じファイル上：

<div class="results"></div> 

<?php ActiveForm::end(); ?> 
<?php Pjax::end(); ?> 

このコードはmypopupファイル上のすべてのコードの上に行きます