1

So I have a Spring Boot API project using Jquery SmartWizard. The first Step of 4 contains a simple form. For the sake of testing, am using with one field (ID: first-name).

On clicking of the Next button of the Wizard, the jquery method should execute, form details posted to the database and then go to the Next Step of the Wizard(i.e. 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("");
}
});

The ajaxPost() works but the Wizard doesnt move to the next step. If I uncomment this line //$('#wizard').smartWizard('goForward'); The ajaxPost() function replicates alot of data in the database then.

How do I get the Wizard to move to Step 2 after doing the form submit via the ajax functionality by clicking on the next button.

Community
  • 1
  • 1
Marcellinus
  • 134
  • 2
  • 15
  • I'm following your code to store data, but i'm getting this error -> Uncaught RangeError: Maximum call stack size exceeded. – Alauddin Ahmed May 31 '19 at 13:29

1 Answers1

0

The ajax post is asynchronous, so the javascript needs to wait for the response.

Most likely you want to continue with the wizzard, only if the ajax request was successful.

So move 'goForward' into the success handler :

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

You wrote, many entries are added to the database. This can have two reasons :

  1. The server does not work correctly, so add breakpoints there to see when its called and how many entries per call are created
  2. The client calls the server many times, so you need to debug the frontend
Stefan Isele - prefabware.com
  • 8,905
  • 4
  • 28
  • 31
  • Yeah, I tried that and for some reason, it inserted the record several times into the DB, just like it did when I commented it out in the above code... – Marcellinus Apr 23 '17 at 09:29
  • 1. The problem is not with the server. I ran it using other RestClient tools and it works perfectly. 2. Yeah, apparently that is what is happening, the problem is how do I fix that, and/or what is the appropriate way to call the function to go to the next tab after the `ajaxPost()` . – Marcellinus Apr 24 '17 at 12:30