I
I
Iossarian2020-04-15 10:26:12
Yii
Iossarian, 2020-04-15 10:26:12

How to prevent redirect on ajax request in modal window?

Good afternoon. The bottom line is this:
There is a button, when clicked, ajax is performed to send an SMS to confirm registration and a modal immediately opens with a field for entering this SMS. Inside the modal, in addition to the SMS input field, there is a submit button for confirmation, which submits the form. Everything is ok here.
It was necessary to add a button in the same modal to request a new SMS with a timer. When you click on the button, you just need to execute ajax in the controller and regenerate some data, but the problem is that when you click on this button, instead of performing an ajax request, I get a redirect to the previous page.
As I understand it, the modal is not particularly friendly with Ajax inside. How can I fix this action so that when clicking on "Submit new code" nothing changes on the page, but just ajax is performed?
There is nothing new in the code - bootstrap modal and onclick event with ajax on the code resubmit button.

Modal::begin([
    'header' => '<div class="common__board-title-big" style="text-align: center; font-size: 18px">На указанный номер отправлено смс с проверочным кодом. Введите полученный код в поле ниже. </div>',
    'toggleButton' => [
        'label' => 'Зарегистрироваться',
        'tag' => 'button',
        'class' => 'guest__btn_submit modal-register register',
    ],
]);
?>
<div class="m-b-15  row">
    <div class="col-md-12 common__board-col" style="padding-left:30%; padding-right: 30%">
        <div class="form-group highlight-addon  has-success">
            <?= Html::hiddenInput('hash-code', $hash_code, ['class' => 'hash-code']) ?>
            <?= Html::input('text', 'code', '', ['class' => 'modal-input', 'style' => "font-size: 25px; padding: 5% 20%; text-align: center;"]) ?>
        </div>
        <div class="form-group">
            <?= Html::submitButton('Отправить', ['class' => 'btn-n-brd-lblue__fill send-button register']) ?>
        </div>
        <div class="form-group">
            <?= Html::button('Получить новый код', ['class' => 'btn-n-brd-lblue__fill get_new_code', 'style' => 'display: none']) ?>
            <div id="timerBlock" class="common__board-title-big" style="text-align: center; font-size: 15px">
                <p>Перезапросить код через <span class="seconds"> 10 </span> секунд</p>
            </div>
        </div>
    </div>
</div>
<?php Modal::end(); ?>

$('.get_new_code').on('click', function(event) {
      //event.preventDefault();
  var number = $('#profile-phone').val();
  var hash = $('.hash-code').val();
  $.ajax({
            url: '/registration/generate-new-hash',
            type: 'POST',
            data: {number : number, hash : hash},
            success: function(res){
                console.log(res);
            },
            error: function(xhr, status, error){
                console.log(error);
            }
        });
})

Answer the question

In order to leave comments, you need to log in

1 answer(s)
H
hellion35, 2020-04-15
@hellion35

When opening a modal, pass a JS script in the same place that will track button presses in this modal and send ajax to the server.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question