Как отобразить возвращенные данные во всплывающем окне Bootstrap Modal после отправки данных в Yii2?

У меня есть модальное всплывающее окно с двумя полями, первое из которых предназначено для отправки некоторой информации и выполнения внутреннего запроса в базу данных, а второе поле в этом модальном всплывающем окне — для отображения возвращаемых данных. Однако, когда я тестировал независимо (не будучи модальным), он работал, однако при тестировании в качестве модального он только отправлял данные, но не отображал никаких результатов в том же модальном режиме, что может быть не так? Спасибо.

Это представление, которое вызывает модальное всплывающее окно.

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

});

javascript ajax yii2 pjax
person Jan Beeck    schedule 09.08.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я преодолел проблему, изменив две части:

Прежде всего, я создал метод jQuery beforeSubmit в файле main.js, чтобы он не обновлял страницу и не отправлял форму через 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.

Этот код идет выше всего кода в файле mypopup:

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

и в том же файле в конце:

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

<?php ActiveForm::end(); ?>
<?php Pjax::end(); ?>
person Jan Beeck    schedule 11.08.2017