Question

I need to revert an object based on an AJAX call that I make. However, I’m finding that the AJAX call does not finish before the function is finished executing.

I’ve tried various approaches but each one seems to come back to the same asynchronous problem – and I do not want to do a synchronous call.

How do I somehow wait until the AJAX call is complete and the answer is there before I move on to determine if I should revert or not?

$(document).ready(function() {

$.ajax
({
    type: "GET",
    url: "quizData.xml",
    dataType: "xml",
    success: function(xml)
    {
        var questionIdCount = 0;
        $(xml).find('question').each(function()
        {
            questionIdCount++;
            $("#question-container").append("<div class=\"question\" id=\"question-number-" + questionIdCount + "\">" + $(this).text() + "</div>");

            $("#question-number-" + questionIdCount).data('id', questionIdCount);

            $(".question").droppable(
            {

            }
            );

        });

        var answerIdCount = 0;
        $(xml).find('answer').each(function()
        {
            answerIdCount++;
            $("#answer-container").append("<div class=\"answer-id\" id=\"answer-number-" + answerIdCount + 
            "\">" + answerIdCount + "</div><div class=\"answer\">" + $(this).text() + "</div>");    

            $("#answer-number-" + answerIdCount).data('id', answerIdCount);

            $(".answer-id").draggable({
              revert: function(socketObj)
              {
                 if(!socketObj)
                 {
                     return true;
                 }
                 else
                 {
                    var questionId = $("#" + socketObj.attr('id')).data('id')
                    var answerId = $("#" + $(this).attr('id')).data('id');

                    return checkAnswer(questionId, answerId);
                 }


              },
              containment: "#containment-wrapper",
              scroll: true
            });


        }); 
    }
});
  $(document).ready(function() {

$.ajax
({
    type: "GET",
    url: "quizData.xml",
    dataType: "xml",
    success: function(xml)
    {
        var questionIdCount = 0;
        $(xml).find('question').each(function()
        {
            questionIdCount++;
            $("#question-container").append("<div class=\"question\" id=\"question-number-" + questionIdCount + "\">" + $(this).text() + "</div>");

            $("#question-number-" + questionIdCount).data('id', questionIdCount);

            $(".question").droppable(
            {

            }
            );

        });

        var answerIdCount = 0;
        $(xml).find('answer').each(function()
        {
            answerIdCount++;
            $("#answer-container").append("<div class=\"answer-id\" id=\"answer-number-" + answerIdCount + 
            "\">" + answerIdCount + "</div><div class=\"answer\">" + $(this).text() + "</div>");    

            $("#answer-number-" + answerIdCount).data('id', answerIdCount);

            $(".answer-id").draggable({
              revert: function(socketObj)
              {
                 if(!socketObj)
                 {
                     return true;
                 }
                 else
                 {
                    var questionId = $("#" + socketObj.attr('id')).data('id')
                    var answerId = $("#" + $(this).attr('id')).data('id');

                    return checkAnswer(questionId, answerId);
                 }


              },
              containment: "#containment-wrapper",
              scroll: true
            });


        }); 
    }
});


function checkAnswer(questionId, answerId)
{
     var ajaxAnswer;
     $.ajax
     ({
        type: "POST",
        url: "getQuizAnswers.php",
        dataType: "xml",
        data: "questionId=" + questionId + "&answerId=" + answerId,
        success: function(xml)
        {
            console.log($(xml));
            $(xml).find("answer").each(function()
            {
                //alert($(this).text());
                if($(this).text() == "true")
                    ajaxAnswer = true;
                else
                    ajaxAnswer = false;

            });             
        }
      })

    return ajaxAnswer;  
}



});


});

Answer 1

Spencer,

You should be able to control things with a deferred object, together with a reorganisation of the code to ensure that draggable is only set once the ajax within checkAnswer has responded.

I’m not 100% confident in every aspect of this but here goes :

$(document).ready(function() {
    function setDraggable(revert) {
        $(".answer-id").draggable({
            revert: revert
            containment: "#containment-wrapper",
        });
    }
    $.ajax({
        type: "GET",
        url: "quizData.xml",
        dataType: "xml",
        success: function(xml) {
            var questionIdCount = 0;
            $(xml).find('question').each(function() {
                questionIdCount++;
                $("#question-container").append("<div class=\"question\" id=\"question-number-" + questionIdCount + "\">" + $(this).text() + "</div>");
                $("#question-number-" + questionIdCount).data('id', questionIdCount);
                $(".question").droppable({});
            });
            var answerIdCount = 0;
        $(xml).find('answer').each(function() {
            answerIdCount++;
            $("#answer-container").append("<div class=\"answer-id\" id=\"answer-number-" + answerIdCount + "\">" + answerIdCount + "</div><div class=\"answer\">" + $(this).text() + "</div>");
            $("#answer-number-" + answerIdCount).data('id', answerIdCount);
            if(socketObj) {
                var questionId = $("#" + socketObj.attr('id')).data('id')
                var answerId = $("#" + $(this).attr('id')).data('id');
                $.when(checkAnswer(questionId, answerId)).done(function() {
                    setDraggable(true);
                }).fail(function() {
                    setDraggable(false);
                });
            }
            else {
                setDraggable(true);
            }
            scroll: true
        });
        }
    });
    function checkAnswer(questionId, answerId) {
        var ajaxAnswer = true;//remains true unless an incorrect answer is received
        var def =  new $.Deferred();
        $.ajax({
            type: "POST",
            url: "getQuizAnswers.php",
            dataType: "xml",
            data: {"questionId":questionId, "answerId":answerId},
            success: function(xml) {
                console.log($(xml));
                $(xml).find("answer").each(function() {
                    ajaxAnswer = ajaxAnswer && ($(this).text() == "true");
                });
                if(ajaxAnswer) 
                    def.resolve();//success
                else 
                    def.reject();//failure
            },
            error: function(){
                def.reject();//assume failure if ajax fails
            }
        });
        return def;//IMPORTANT!!
    }
});

This is moderately tricky and needs to be explained …

Starting with checkAnswer, you will see that it now returns a deferred object, which becomes either resolved or rejected at some point in the near future (when “getQuizAnswers.php” responds).

Back in the .find('answer').each(...) loop, you will see that that the code has been turned inside-out. Now, instead of calling checkAnswer() within the draggabe, draggable is set in response to checkAnswer (more specifically, in response to checkAnswer’s deferred being resolved or rejected).

As the draggable needs to be set under several conditions, the draggable code has been moved into a utility function, thus avoiding duplication. You may need to pass more parameters into this function to control its behaviour more specifically (in particular the jQuery selector).

This may need tweeking/debugging and there may be a simpler approach but this is what immediately comes to mind.