Lots are displayed in the GridView
and it is wrapped in Pjax
:
<?php Pjax::begin(['id' => 'lots']); ?>
Each line of the GridView
has the following button:
return Html::a('Подать цену', null, [ 'value' => Url::to(['create', 'id' => $model->id]), 'class' => 'bidButton', ]);
Clicking on each button opens a modal window and loads the url from the button:
Modal::begin([ 'header' => '<h4>Подать цену</h4>', 'id' => 'bidModal', 'size' => 'modal-md', ]); echo '<div id="bidModalContent"></div>'; Modal::end(); $this->registerJs( "$('.bidButton').click(function() { $('#bidModal').modal('show') .find('#bidModalContent') .load($(this).attr('value')); });", View::POS_READY, 'bid' );
The corresponding action
in the controller, which is loaded into the modal window:
public function actionCreate($id) { //поиск лота, на который будет подана цена и прочая валидация $lot = $this->findLot($id); $entry = new Entry(); $entry->lot_id = $id; if($entry->load(Yii::$app->request->post())) { $entry->save(); Yii::$app->response->format = \yii\web\Response::FORMAT_JSON; return ['code' => 100]; } return $this->renderAjax('modals/create', [ 'entry' => $entry, ]); }
Create form:
<?php $form = ActiveForm::begin(['id' => 'form-entry']); ?> <?= $form->field($entry, 'price')->textInput() ?> <?= Html::submitButton('Подать', ['class' => 'btn btn-success']) ?> <?php ActiveForm::end(); ?>
On the same form, the beforeSubmit
event beforeSubmit
:
$this->registerJs( "$('#bidModal').on('beforeSubmit', 'form-entry', function () { var form = $(this); data.push({ name: '_csrf', value: '" . Yii::$app->request->getCsrfToken() . "' }); $.ajax({ type: 'POST', url: form.attr('action'), data: form.serialize(), success: function (data) { $('#bidModal').modal('hide'); $.pjax.reload({container: '#lots'}); } }); return false; });", View::POS_READY, 'submit');
With this interception, an ajax request is sent, an action is called, and Entry()
is created and stored. But at the end - instead of sending a successful response, hiding the modal window and updating the GridView
wrapped in Pjax
, the page is redirected to create?id=X
with the following content: {"code":100}
.
How to prevent redirection and implement what I have planned?
$('#form-entry').submit(function () {
and everything worked out. - safeway