I'm encountering an issue with a Modal popup that contains two fields. The first field is used to submit information and perform an internal database query, while the second field should display the returned data. Oddly enough, when testing the functionality of these fields independently (not within a Modal), everything works smoothly. However, when tested within the Modal, only the data submission occurs without displaying any results on the same Modal. What could be causing this discrepancy? Thank you for your help.
The following code snippet shows how the Modal popup is triggered:
<?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(); ?>
This corresponds to the view for the mypopup feature:
<?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(); ?>
Shown below is the controller function for mypopup:
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]);
}
}
Lastly, here is the corresponding JavaScript file used in the implementation:
$(function(){
$('#modalButton').on('click', function(){
$('#modal').modal('show')
.find('#modalContent')
.load($(this).attr('value'));
});
$(document).ajaxComplete(function (event, xhr, settings) {
alert(xhr.getResponseHeader());
});
});