@Iossarian

Как предотвратить редирект при ajax запросе в модальном окне?

Добрый день. Суть такова:
Есть кнопка, при нажатии на которую выполняется ajax на отправку смски для подтверждения регистрации и тут же открывается модалка с полем для ввода этой смски. Внутри модали помимо поля для ввода смс сабмит кнопка для подтверждения, которая отправляет форму. Здесь все ок.
Понадобилось в этой же модалке добавить кнопку на запрос новой смски с таймером. При клике по кнопке надо просто выполнить ajax в контроллер и перегенерить некоторые даннные, но проблема в том, что по клику по этой кнопке вместо выполнения ajax-запроса получаю редирект на предыдущую страницу.
Я так понимаю модалка не особо дружит с аяксом внутри. Как можно поправить это действие, чтобы по клику на "Выслать новый код" на странице ничего не менялось, а просто выполнялся ajax?
В коде ничего нового - бутстраповская модалка и событие onclick с аяксом на кнопке повторной отправки кода.
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);
            }
        });
})
  • Вопрос задан
  • 106 просмотров
Пригласить эксперта
Ответы на вопрос 1
@hellion35
При открытии модалки, там же передавай JS скрипт который будет отслеживать нажатие кнопок в этой модалке и отправлять ajax на сервер.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы