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

Currently there are two ways to realize it. One with more and the other one with less effort. But less effort means also less control – in other words jQuery Steps handles showing and hiding the loading message and the async call itself of course. Anyhow, the first solution (less effort) requires that you add a default async step on initialization like you’re 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 portion of code to the onStepChanging event like melc mentioned. This code should analyze the data of the previous step and remove if necessary the default async step and add an new one at 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>

The other solution is already described by melc.