Wie werden die zurückgegebenen Daten in einem Bootstrap-Modal-Popup nach dem Senden von Daten in Yii2 angezeigt?

Question

Ich habe ein Modal-Popup, das zwei Felder hat, das erste ist, einige Informationen zu senden und eine interne Abfrage in eine Datenbank zu machen, und das zweite Feld in diesem Modal-Popup zeigt die zurückgegebenen Daten an. Aber wenn ich unabhängig teste (ohne ein Modal zu sein), funktionierte es, aber wenn es als Modal getestet wurde, reichte es nur die Daten ein, aber zeigte kein Ergebnis auf dem gleichen Modal, was könnte falsch sein? Vielen Dank.

Dies ist die Ansicht, die das Modal-Popup aufruft.

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

Dies ist die mypopup Ansicht:

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

Dies ist die Steuerung von 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]); 
      } 
    } 

Dies ist die js-Datei:

$(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

ich überwunden haben das Problem durch die Änderung von zwei Teilen:

Zuerst habe ich eine jQuery BeforeSubmit-Methode in der main.js-Datei erstellt, so dass es die Seite nicht aktualisieren und das Formular über Ajax senden würde.

Dieser Code geht unter den vorherigen Code der js-Datei.

$('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; 
    }); 
      } 
    }); 

Zweitens, dann wird es den Ajax anrufen, um Aktion zu bilden; und in der Ansicht habe ich eine Bedingung hinzugefügt, um zu überprüfen, ob es einige Daten von ajax posten und dann die Ergebnisse in div name Ergebnissen anzeigen.

Dieser Code geht vor allem den Code auf der mypopup Datei:

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

und auf der gleichen Datei am Ende:

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

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