Pause switch statement until AJAX success

Question

I have a form inside a slider, and elements inside each section of the slider are controlled by their respective case in a switch statement. For example:

HTML

<ul class="slider">
    <li class="slide">
        <span class="next">Next</span>
    </li>
    <li class="slide">
        <span class="next">Next</span>
    </li>
    <li class="slide">
        <span class="next">Next</span>
    </li>
</ul>

JS

$(function(){
    $('.next','.slide').click(function (e) {
        e.preventDefault();

        var slideIndex = $(this).closest('.slide').index();

        switch (slideIndex) {
            case 0:
                someFunction();
                break;
            case 1:
                anotherFunction();
                break;
            case 2:
                $.ajax({
                    type: "POST",
                    url: "http://some.site.com/register.php",
                    data: 'some data',
                    success: function (response) {
                        if (response)
                            // Call slide();
                    }
                });
                break;
            default:
                return false;
                break;
        }
    slide();
});

The problem is, slide() is always called at the end of the click function. Is there a way to only call the function after that AJAX request has given a response?

Edit

I probably didn't make myself clear enough. I know I could just call slide() in the ajax response, but then I would also have to call it at the end of every switch case. The flow should look something like:

User clicks 'next'..

-> script checks which slide the user is on

-> do logic for that slide

-> slide()

Yeah, that's sort of obvious, but then I would have to call `slide()` at the end of every switch case. — Jezen Thomas, Sep 19 '12 at 17:33
I could, but I'd like to keep my code as DRY as possible. If there's a better way of doing this, I'm all ears :) — Jezen Thomas, Sep 19 '12 at 17:38

score 2 · Answer 1 · answered Sep 19 '12 at 17:26

$.ajax returns a promise, so you can respond to the done event that the promise raises:

$(function(){
    $('.next').click(function (e) {
        var ajaxPromise;
        e.preventDefault();

        var slideIndex = $(this).attr("id");

        switch (slideIndex) {
            case 0:
                someFunction();
                break;
            case 1:
                anotherFunction();
                break;
            case 2:
                ajaxPromise = $.ajax({
                    type: "POST",
                    url: "http://some.site.com/register.php",
                    data: 'some data'
                });
                break;
            default:
                return false;
        }

        if (ajaxPromise) {
            // execute when the promise is finished
            ajaxPromise.done(slide);
        } else {
            // execute immediately
            slide();
        }
    });
});

score 1 · Answer 2 · answered Sep 19 '12 at 17:22

You can use it.

HTML

<ul class="slider">
    <li class="slide">
        <span id="0" class="next">Next</span>
    </li>
    <li class="slide">
        <span id="1" class="next">Next</span>
    </li>
    <li class="slide">
        <span id="2" class="next">Next</span>
    </li>
</ul>

JS

$(function(){
    $('.next').click(function (e) {
        e.preventDefault();

        var slideIndex = $(this).attr("id");

        switch (slideIndex) {
            case 0:
                someFunction();
                break;
            case 1:
                anotherFunction();
                break;
            case 2:
                $.ajax({
                    type: "POST",
                    url: "http://some.site.com/register.php",
                    data: 'some data',
                    success: function (response) {
                        if (response)
                            slide();
                    }
                break;
            default:
                return false;
                break;
        }
});

I think you missed the problem, which is having a call to slide in each switch branch after the respective action is done. — Adrian Heine, Sep 19 '12 at 19:29

score 0 · Answer 3 · answered Sep 19 '12 at 17:13

Ajax is asynchronous right.. So by the time the response is out the Slide() function will have been called already

instead of calling the slide() at the end of the function why don't you call the function in the success of the ajax itself.

Also you are not closing your ajax method properly..

$.ajax({
      type: "POST",
      url: "http://some.site.com/register.php",
      data: 'some data',
      success: function (response) {
          if (response)
            slide();
          }
});

score 0 · Answer 4 · answered Sep 19 '12 at 17:14

0

Yes, you can move the call to slide into the success callback. Then it will only be called on success.

answered Sep 19 '12 at 17:14

saml

6,702
1
34
30

score 0 · Answer 5 · answered Sep 19 '12 at 17:33

0

Remove slide from the bottom and modify the AJAX call to this:

$.ajax({
    type: "POST",
    url: "http://some.site.com/register.php",
    data: 'some data',
    success: function (response) {
        if (response)
            slide();
    },
    complete: function(){
        break;
    },
    error: function(xhr, textStatus, errorThrown) {
        alert(errorThrown);//always do it, you never know when the AJAX call throws error
    }
});

Basically, don't let the case break before the AJAX call is complete.

answered Sep 19 '12 at 17:33

Pulkit Mittal

5,916
5
21
28

This looked quite promising, but it gives a JS error: `Illegal break statement`. – Jezen Thomas Sep 19 '12 at 18:00
Did you use it within the switch case block? – Pulkit Mittal Sep 19 '12 at 18:10

score 0 · Answer 6 · answered Sep 19 '12 at 19:45

I would just add a var callSlide in the click function, set it to true, and only call the slide() at the end if callSlide is true. Only set it to false in case 2:

$(function(){
 $('.next','.slide').click(function (e) {
    var callSlide = true;

    e.preventDefault();

    var slideIndex = $(this).closest('.slide').index();

    switch (slideIndex) {
        case 0:
            someFunction();
            break;
        case 1:
            anotherFunction();
            break;
        case 2:
            $.ajax({
                type: "POST",
                url: "http://some.site.com/register.php",
                data: 'some data',
                success: function (response) {
                    if (response)
                        slide();
                }
            });
            callSlide = false;
            break;
        default:
            return false;
            break;
    }

   if(callSlide)
     slide();
});

score -1 · Answer 7 · edited May 23 '17 at 12:27

-1

Per another stack overflow post:

How can I get jQuery to perform a synchronous, rather than asynchronous, Ajax request?

You can have the ajax call performed synchronously. I wouldn't normally recommend it, but it is a possible solution...

edited May 23 '17 at 12:27

Community

1
1

answered Sep 19 '12 at 17:14

Steven Hunt

2,321
19
18

This is a rather bad idea, see [this question](http://stackoverflow.com/questions/12214573). – Adrian Heine Sep 19 '12 at 19:32

Pause switch statement until AJAX success

7 Answers7