1

I have an ajax function which is obviously by default asynchronous. But I've this function in the first step of a wizard. So when the function executes, the purpose is to save something and after saving it returns an ID of the last inserted row. Things works fine.

But the problem am facing is this is executing in the next step button of the wizard and so the ajax call is async, step clearly jumped to the next step. but the server side function still executes in the background. So in the second step I need that ID generated in the first step. But if the user immediately click on Next button on the second page, that will not get the ID since the process still running in server side. Ofcourse I can override this by validating the second page. But other than than I need to make a wait or delay after the first page ajax call initiated. That means I need a 2-3 seconds of delay when the user clicks on the next button of the first page, but after the Ajax request initiated.

How can make that work?

 My AJAX call
 Delay of 5 seconds
 Only then wizard should step ahead
Sandeep Thomas
  • 4,303
  • 14
  • 61
  • 132
  • 1
    Basically you answered your question. The specific details can't be answered without seeing your code. The idea is that whatever you do now to show the next step of the wizard, is done instead in the success-callback of the ajax call. It might also be useful to look into promises, they can help a lot with asynchronous code. – Hans Roerdinkholder Mar 13 '14 at 13:48
  • What is wrong with using ajax callback??? – A. Wolff Mar 13 '14 at 13:50
  • @Hans Actually when I use the ajax success callback, it will execute when the server side function finishes. But since that ajax call is asynchronous, when the server side function executes the wizard will clearly move to next step. So there is a chance user may click on the continue button of the new page of the wizard. To avoid this I thought putting a small purposeful delay after the AJAX call (Other than Async=false) So since I have ladda button, user can see something is running and so he can wait.. – Sandeep Thomas Mar 13 '14 at 13:53
  • Maybe you misunderstood me. What I'm suggesting is that you wait with updating the interface to move to the next step of the wizard, UNTIL your request is done. If you want to show the user something in the meantime, show a spinner next to the button or whatever to indicate that the next step IS loading. – Hans Roerdinkholder Mar 13 '14 at 13:56
  • @Hans Yes.. Now you got my situation. So you are saying only the step increment of the wizard only upon the success callback? But am afraid that will make the user to wait some time if the process is lengthy. So what I thought is I can add a forcefull delay of 3-4 seconds after the ajax call initated and can move to next step. So when the user will not have to wait much for the next step and then while he do the second step stuffs, the server side execution finishes.. Yea.. Clearly a weird situation.. – Sandeep Thomas Mar 13 '14 at 14:06
  • another thing you could do is disable the 'next' button on step 2 (so going from step 2 to step 3 should be disabled) until the call that is done at the end of step 1 is complete. So a user can immediatly go on to step 2 and fill in the information, but he can't submit until step 1 is done on the backend. – Hans Roerdinkholder Mar 13 '14 at 14:11
  • @Hans I thought the same. But then I think, if thats a very normal user doesnt no much and if he saw the next button disabled on second step without a reason, he might think something wrong with the page and there is a chance of he may refresh or reloads the page. It can happen in case if the server side codes take much time to finish. So what am trying is if normally the server side function requires 10 seconds, I'd like to add a 5 second delay on Step 1 itself (forceful delay), and then only move to next step. So instead on 10 seconds user only needs to wait 5 seconds. – Sandeep Thomas Mar 13 '14 at 14:16
  • I think ultimately this is a problem in your design: if it takes that long to process step 1 (five seconds or more), then you shouldn't do the processing at all until the whole wizard is done. Either that or you HAVE to make your user wait for it. I would focus on either making the process faster, or thinking of a pattern where the user doesn't have to sit and wait it out but can proceed with his work while you do the job in the background. – Hans Roerdinkholder Mar 13 '14 at 14:20
  • @Hans Yea, unfortunately that maybe a mistake. Actually you know we are modifying a system someone already did. In the first step they are creating a Job Details which is actually returns a JOBID. So on the next step the details is the user details for that Job. So clearly that step requires JOBID on the first step. Unfortunately client never agree with a change in that flow. – Sandeep Thomas Mar 13 '14 at 14:25
  • You could split up the work. First create empty job details that has an ID. Return that ID to the frontend. Execute another task on the backend to fill in the details while the frontend continues. – Hans Roerdinkholder Mar 13 '14 at 14:29
  • @Hans OK.. If so I need to try that way. But am just searching is there is any simple function in jquery like Sleep in .net, which is to delay the next line of code to execute after a specified time – Sandeep Thomas Mar 13 '14 at 14:43
  • There is the functin 'setTimeout', but this is not like sleep. It is basically like your ajax call. You can specify a callback to execute when the timeout is done, just like the success callback. There isn't anything more like sleep in JavaScript. – Hans Roerdinkholder Mar 13 '14 at 15:04
  • @Hans yes my friend, I already tried that. But doesnt help me out. Anyway I think I need to change the flow a bit if so. – Sandeep Thomas Mar 13 '14 at 15:15

1 Answers1

0

You need to use a callback function that runs after the ajax call have finished

$.get("/get/something/", function(data) {
    // now you can do your thing when
    // ajax call have finished
    // in data variable you have the response from the server

    // if you need more time
    setTimeout(function () { 
         // this code will execute after half a second
    }, 500); 
})

Edit after comments clarifications:

If you don't need the step 1 data to carry on, you should just jump to the next step and let's the process go in the background. Just let the user know. 

$("#infopanel").html("Processing...");
$.get("/get/something/", function(data) {
    $("#infopanel").html("Ready!");
})

If you still want to wait 5 second before move on:

    setTimeout(function () { 
         MoveToNextStep();
    }, 5000);
Eduardo Molteni
  • 38,786
  • 23
  • 141
  • 206
  • Just consider if the server side function of the first step is a lengthy function which may take upto 10 seconds. So since Ajax call is asynchronous, it obviously will not wait for that serverside function to finish and so smart wizard will jump to the next step. Hope that point is clear. So if at that time gap of 10 seconds (Remember the server side process not finished) if the user clicks on Next button of the second step, that step will not get the ID which is created after the first server side code. Hope its clear now. – Sandeep Thomas Mar 13 '14 at 13:59
  • The ajax callback will execute after the server side function returns the response (yes, after the 10 seconds) – Eduardo Molteni Mar 13 '14 at 14:01
  • Yea, Im correcting your sentence a little "Ajax callback will execute ONLY after the server side function returns the response". Thats the problem. But if make a forcefull 5 sec delay to the user after first step, and so the process clearly will finishes in next 5 seconds and at that time user can do the second page stuffs.. So he dont need to wait the whole 10 seconds and that time we can reduce upto 5. Sorry for this strange requirement.. – Sandeep Thomas Mar 13 '14 at 14:10