Jquery-steps | send data to server when loading ajax content

Question

I am using http://www.jquery-steps.com/Examples#async in my project. This is 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 to send additional data using an AJAX call to my server. My backend will take the next step based on this value.

I was looking for documentation and source code but could not find the answer.

Answer 1

There are currently two ways to implement this. One with more and the other with less effort. But less effort also means less control - in other words, jQuery Steps handles showing and hiding the boot message and the asynchronous call itself. Anyway, the first solution (less effort) requires you to add a default async step during initialization, as you are used to.

<div id="wizard"> <h1>Choose</h1> <div> <select id="choose"> <option value="0" selected="selected">default</option> <option value="1">extraordinary</option> </select> </div> <h1>Result 1</h1> <div data-mode="async" data-url="/rest/service/0"></div> </div> 

Then add a small piece of code to the onStepChanging event, such as the mentioned melc. This code should analyze the data of the previous step and, if necessary, delete the default async step and add a new one in the same position, but with a different URL.

 <script> $(function() { var wizard = $("#wizard").steps({ onStepChanging: function(event, currentIndex, newIndex) { if (currentIndex === 0) { if ($("#choose > option:selected").val() === "1") { wizard.steps("remove", 1); // In this case you could also use add instead of insert wizard.steps("insert", 1, { title: "Result 2", contentMode: "async", contentUrl: "/rest/service/1" }); } } return true; } }); }); </script> 

Another solution has already been described by melc.

Answer 2

The documentation mentions the event that fires before the step changes, https://github.com/rstaib/jquery-steps/wiki/Settings#events

So, you need to add a callback function to this event and get data from the server based on what was selected in the current step. Once you get the data, update the contents of the next step.

Care must be taken since your server is called asynchronously and the onStepChanging event is fired before proceeding to the next step. In order for it to work correctly for both you and your users (without blocking), you need to display the download counter on the next page until you get a response from your aimax call to the server, and then replace the counter by filling in the steps.

Answer 3

The final step is to install the contents of the “new” empty step. What is the most effective way to determine the context of this step? DIV identifiers are generated dynamically, so I cannot select them. PS Maybe I give only 1 answer

There was the same problem with user2779014. When using complex selectors to retrieve the contents of a wizard for the right step

 $.ajax({ url: './Advanced Example Content Loading with AJAX Alternative With More Control.php', data: { GenerateContentName: $("#GenerateContentID > option:selected").val() }, type: 'POST', success: function(output) { //Gets the options object (object passed to the steps() function) var options = wizard.data("options"); var bodyTag = options["bodyTag"]; wizard.children(".content").children(bodyTag).eq(newIndex).html(output); } }); 

Full code: http://plnkr.co/edit/OyHkcZEBv8Fon3vJv7PZ

Please note that the full code does NOT work without downloading it and posting it through a web server, since it uses PHP.