Модальное окно Bootstrap открывается при успешной отправке формы, но не остается закрытым при нажатии кнопки «Закрыть».

У меня есть контактная форма, которая при успешной отправке открывает модальное окно Bootstrap, сообщая пользователю, что отправка прошла успешно. Он отлично открывается после успеха, но когда я нажимаю закрыть, он не остается закрытым. Через секунду или две он снова открывается и отправляет другую форму/сообщение. Пожалуйста, смотрите код ниже. Я где-то зацикливаюсь и думаю, что мне где-то не хватает «возврата» или «preventDefault ()». Спасибо!

$(document).ready(function() {    

$(function() {

// Get the form.
var form = $('#ajax-contact');

// Get the messages div.
//var formMessages = $('#form-messages');

$('#successModal').modal({
    show: false
});

$('#errorModal').modal({
    show: false
});

// Set up an event listener for the contact form.
$("button").click(function(e) {

    // Stop the browser from submitting the form.
    e.preventDefault(e);

    // Serialize the form data.
    var formData = $(form).serialize();

    // Submit the form using AJAX.
    $.ajax({
        type: 'POST',
        url: $(form).attr('action'),
        data: formData,
        success: function(result){
            $('#contact-name').val('');
            $('#contact-email').val('');
            $('#contact-website').val('');
            $('#contact-message').val('');

            $('#successModal').modal({
                show: true
            });

        },
        error: function(xhr,status,error){
            //$('#errorModal').modal('show')
        }


    });



});



});



});

forms html jquery twitter-bootstrap bootstrap-modal
person Andrew    schedule 06.05.2015    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Функция успеха вызывает это, чтобы показать модальное окно, а не закрыть его. :

    $('#successModal').modal({
            show: true
        });

Если вы хотите, чтобы он закрылся в случае успеха, вы можете использовать это вместо этого

   $('#successModal').modal('hide');

или вы также можете добавить это к кнопке отправки.

data-dismiss="modal"

Я не знаю, почему вы называете это:

 $('#successModal').modal({
show: false
});
person Macsupport    schedule 06.05.2015
comment
Я читал, что сначала нужно инициализировать модальное окно, вот тут и появилась последняя часть. Но я понимаю, что вы имеете в виду, это не обязательно. «Скрыть» - хорошая идея, но если я «покажу», а затем сразу же «спрячу» после того, как он просто мигает модальным. Не уверен, что добавление отказа от данных сработает, поскольку отображение модального окна зависит не от нажатия кнопки «Отправить», а скорее от успеха публикации, если я чего-то не понимаю. Модальный режим должен оставаться открытым после успеха до тех пор, пока пользователь не закроется, проблема в том, что, когда я закрываю, он автоматически открывается и отправляет другой запрос ajax. Спасибо! - person Andrew; 06.05.2015
comment
Я понял это, пришлось дать моей кнопке «Отправить» отдельный идентификатор. Размещение того, что, по моему мнению, происходило в ответе. - person Andrew; 07.05.2015

arrow_upward
0
arrow_downward

Так что я считаю, что понял это. Мое событие щелчка, запускающее процесс POST ajax, захватывает «кнопку», ну, «Закрыть» в модальном режиме также является «кнопкой», поэтому, когда я нажимаю, он снова запускает Javascript. Я дал своей кнопке «Отправить» в своей форме отдельный идентификатор, изменил его в своем файле Javascript, и теперь он отлично работает. Не могу поверить, что это было так просто.

person Andrew    schedule 07.05.2015