jquery-steps | send data to server on ajax content load

Question

I'm using: http://www.jquery-steps.com/Examples#async in my project. It's a nice Jquery-plugin for adding wizards.

My question is about dynamic steps. The content of the next step should depend on the answer of the previous step. How can I send additional data with the AJAX call to my backend. My backend will server the next step based on that value.

I searched the documentation and source code, but couldn't find an answer.

Answer 1

In the documentation it mentions an event that is fired before changing a step, https://github.com/rstaib/jquery-steps/wiki/Settings#events

So what you need to do is add a callback function on this event and retrieve the data from server based on what has been selected on the current step. Once you get the data refresh the content of the next step.

Care must be taken, since the call to your server is async and the onStepChanging event is called before transitioning to the next step. In order to make it work right both for you and your users (non blocking), you need to display a loading spinner on the next page until you get the response from your ajax call to the server and then replace the spinner by populate the data of the step.