How to get JQuery-Steps to call an ajax service when clicking 'next' on step 1

Question

I'm using jquery steps although I need to call a c# service via ajax when the first 'next' is clicked, is this possible to be called and returned before the step 2 is displayed? The following code works although the ajax event returns after step 2 is loaded.

Many thanks, any help appreciated.

Jquery steps

http://www.jquery-steps.com/Examples#basic

I've noticed these methods? Maybe these are what I need

onStepChanging: function (event, currentIndex, newIndex)
onFinishing: function (event, currentIndex)
onFinished: function (event, currentIndex)

My ajax event

    $(function () {
        $('a[href="#next"]').click(function () {
            var url = "...";

            $.ajax({
                url: url,
                success: function (response) {
                    // Form fields on second step
                    $("#EmailAddress").val(response.Email);
                    $("#FirstName").val(response.Firstname);
                    $("#LastName").val(response.Lastname);
                },
                error: function () {
                    alert("something went wrong");
                }
            });
        });

    });

See `.then` https://api.jquery.com/deferred.then/ – IronAces Oct 18 '16 at 08:51 — IronAces, Oct 18 '16 at 08:51

score 4 · Answer 1 · answered Jul 05 '18 at 12:20

var is_async_step = false;
$("#wizard").steps({
        onStepChanging: function (event, currentIndex, newIndex) {
            //USED TO SEND USER TO NEXT STEP IS ASYNC REQUEST IS PRESENT - FOR AJAX CALL 
            if (is_async_step) {
                is_async_step = false;
                //ALLOW NEXT STEP
                return true;
            }

            if (currentIndex == 2) {                
                $.ajax({
                    type: 'POST',
                    url: "Reservation.aspx/SomeFunction",
                    data: serializeData({  }),
                    contentType: "application/json",
                    dataType: 'json',
                    success: function (data) {
                        move = data.d;

                        //Add below 2 lines for every Index(Steps).                            
                        is_async_step = true;
                        //This will move to next step.
                        $(form).steps("next");
                    },
                    error: ajaxLoadError
                });
            }
             //Return false to avoid to move to next step
             return false;
        },
        saveState: true
    });

That worked thank you! Is there another way to go to the next step after an ajax call? This seems like a hack, a worked around. Maybe there is something built in for async calls? — Miles M., May 16 '20 at 09:06

sandrina-p · Accepted Answer · 2016-10-18T09:09:33.697

2

If i'm not wrong, placing the ajax call inside onStepChanging method should work.

Note that you have 3 parameters available, one of them - event - should be the button clicked. Use that to better define your url var, if you need to. Also with currentIndex you can detect if you are on the first step or not.

form.steps({
    onStepChanging: function (event, currentIndex, newIndex)
    {

       if (currentIndex == 0) { //I suppose 0 is the first step
           var url = "..."; 

           $.ajax({
               url: url,
               success: function (response) {
                   // Form fields on second step
                   $("#EmailAddress").val(response.Email);
                   $("#FirstName").val(response.Firstname);
                   $("#LastName").val(response.Lastname);
                   return true;
               },
               error: function () {
                   alert("something went wrong");
                   return false; //this will prevent to go to next step
               }
           });
       }
    },
});

edited Oct 18 '16 at 09:09

answered Oct 18 '16 at 09:07

sandrina-p

3,794
8
32
60

I agree, but I assume this means this will get executed for every step? I only want this ajax call when you click 'next' on the first step. – Jamie Oct 18 '16 at 09:09
Also, if you have that ajax call in multiple places, I recommend you to create a function with that ajax, outside the `form.steps` and then call it wherever you need it. – sandrina-p Oct 18 '16 at 10:02
what is form.steps? – Fernando Torres May 29 '19 at 21:22
1

You're confusing the Ajax success (and error) 'scope' with the onStepChanging scope. In this Snippet it's the success function that returns true and not the onStepChanging. Additionally, the Ajax is Asynchronous so onStepChanging exits before the Ajax response is returned – Am Ben Nov 23 '21 at 07:52
If we return true/false within the ajax, it won't proceed/stop the onStepChanging. So you should change like this let status = false; $.ajax({ ajax: false, success: function({ status = true; }) error: function({ status = false; }) }) return status; – Prakash Arul Mani Jun 27 '22 at 10:51

How to get JQuery-Steps to call an ajax service when clicking 'next' on step 1

2 Answers2

Linked