Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 358
user2779014 Avatar asked Oct 19 '13 10:10

user2779014


People also ask

How can we send data to server using AJAX?

The jQuery. post( url, [data], [callback], [type] ) method loads a page from the server using a POST HTTP request. data − This optional parameter represents key/value pairs or the return value of the . serialize() function that will be sent to the server.

Which method is used on the returned object of AJAX () method if the AJAX call fails?

If an AJAX request fails, you can react to the failure inside the callback function added via the fail() function of the object returned by the $. ajax() function. Here is a jQuery AJAX error handling example: var jqxhr = $.

Which object use in AJAX to get data from server?

The XMLHttpRequest object is used to request data from a server.

What is content type and process data in AJAX?

contentType is the type of data you're sending, so application/json; charset=utf-8 is a common one, as is application/x-www-form-urlencoded; charset=UTF-8 , which is the default. dataType is what you're expecting back from the server: json , html , text , etc.


2 Answers

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.

like image 64
melc Avatar answered Oct 11 '22 08:10

melc


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.

like image 41
Rafael Staib Avatar answered Oct 11 '22 06:10

Rafael Staib