Отправка формы JQuery SmartWizard

Итак, у меня есть проект Spring Boot API с использованием Jquery SmartWizard. Первый шаг из 4 содержит простую форму. Ради тестирования я использую одно поле (ID: имя).

При нажатии кнопки Next мастера должен выполниться метод jquery, данные формы будут отправлены в базу данных, а затем перейти к Next Step мастера (т.е. 2).

$( document ).ready(function() {
$('#wizard').smartWizard({
    onLeaveStep: function() {
                 ajaxPost();
    }
});

$('.buttonNext').addClass('btn btn-success');
$('.buttonPrevious').addClass('btn btn-primary');
$('.buttonFinish').addClass('btn btn-default');

function ajaxPost(){

    var formData = {
        name : $("#first-name").val()
        //lastname :  $("#lastname").val()
    };

    // DO POST
    $.ajax({
        type : "POST",
        contentType : "application/json",
        url : "http://localhost:8080/api/uc/create",
        data : JSON.stringify(formData),
        dataType : 'json',
        success : function(result) {
            console.log(result)
        },
        error : function(e) {
            alert("Error!");
            console.log("ERROR: ", e)
        }
    });

    //$('#wizard').smartWizard('goForward');

    // Reset FormData after Posting
    //resetData();

}

function resetData(){
    $("#first-name").val("");
    //$("#lastname").val("");
}
});

ajaxPost() работает, но Мастер не переходит к следующему шагу. Если я раскомментирую эту строку //$('#wizard').smartWizard('goForward');, функция ajaxPost() реплицирует много данных в базе данных.

Как заставить мастера перейти к шагу 2 после отправки формы с помощью функции ajax, нажав кнопку «Далее».


spring-boot javascript jquery ajax smart-wizard
person Marcellinus    schedule 22.04.2017    source источник
comment
Я следую вашему коду для хранения данных, но получаю эту ошибку -> Uncaught RangeError: превышен максимальный размер стека вызовов.   -  person Alauddin Ahmed    schedule 31.05.2019

Ответы (1)


arrow_upward
0
arrow_downward

Сообщение ajax является асинхронным, поэтому javascript должен дождаться ответа.

Скорее всего, вы захотите продолжить работу с мастером, только если ajax-запрос прошел успешно.

Итак, переместите «goForward» в обработчик успеха:

...
success : function(result) {
        $('#wizard').smartWizard('goForward');
    },
...

Вы написали, много записей добавлено в базу. Это может иметь две причины:

  1. Сервер работает некорректно, поэтому добавьте туда точки останова, чтобы видеть, когда он вызывается и сколько записей создается за вызов.
  2. Клиент обращается к серверу много раз, поэтому вам нужно отладить интерфейс
person Stefan Isele - prefabware.com    schedule 23.04.2017
comment
Да, я пробовал это, и по какой-то причине он несколько раз вставлял запись в БД, точно так же, как это было, когда я закомментировал ее в приведенном выше коде... - person Marcellinus; 23.04.2017
comment
1. Проблема не с сервером. Я запустил его с помощью других инструментов RestClient, и он отлично работает. 2. Да, видимо, именно это и происходит, проблема в том, как это исправить и/или как правильно вызвать функцию для перехода на следующую вкладку после ajaxPost() . - person Marcellinus; 24.04.2017