JQuery: вернуть обратный вызов $ .get () во внешнюю область видимости.

Question

Я работаю над этим сценарием проверки для моего последнего проекта, и одно из требований заключается в том, что он проверяет, находится ли значение, которое вводит пользователь, в базе данных, и если нет, возвращает ошибку.

function validateSteps(){
    var FormErrors = false;
    for(var i = 1; i < fieldsetCount; ++i){
        var error = validateStep(i);
        if(error == -1)
            FormErrors = true;
    }
    $('#formElem').data('errors',FormErrors);   
}

function validateStep(step){
    if(step == fieldsetCount) return;

    var error = 1;
    var hasError = false;
    $('#formElem').children(':nth-child('+ parseInt(step) +')').find(':input:not(button)').each(function(){
        var $this       = $(this);
        var valueLength = jQuery.trim($this.val()).length;
        var inputValue = jQuery.trim($this.val());
        var errorID = $this.attr('name') + "_err";
        var errorPrepend = "<div class='rf_error' id='" + errorID +"'>";
        var errorAppend = "</div>";
        var errorMsg = "";

        /* =================================
         MORE VALIDATION STATEMENTS HERE
         ============================ */

        if($this.is('.rf_GrpCode') && !hasError)
        {
            $.get("inc/scripts/formHandle.php", { GrpCode: inputValue, type: "groupCode" }, function(data) {
                if(!data.GrpCode)
                {
                    hasError = true;
                    errorMsg = "The code you have entered is invalid.";

                }
            }, "json");
        }

        if(hasError)
        {
            $this.css('background-color','#FFEDEF');
            //alert("Has error: " + errorID);
            if(errorMsg)
            {

                if($('#' + errorID).length)
                {
                    $('#' + errorID).html(errorMsg);
                }
                else
                {
                    $this.after(errorPrepend + errorMsg + errorAppend);
                }
            }
        }
        else
        {
            //alert("Has no error: " + errorID);
            $('#' + errorID).remove();
            $this.css('background-color','#FFFFFF');    
        }
    });

   var $link = $('#navigation li:nth-child(' + parseInt(step) + ') a');
    $link.parent().find('.error,.checked').remove();

    var valclass = 'checked';
    if(hasError){
        error = -1;
        valclass = 'error';
    }
    $('<span class="'+valclass+'"></span>').insertAfter($link);

    return error;
}

$('#registerButton').bind('click',function(){
    if($('#formElem').data('errors')){
        $.confirm({
            'title'     : 'Ooops!',
            'message'   : 'It appears some of the information you have entered is invalid. Please go back through the steps a amend the marked fields.',
            'buttons'   : {
                'OK'    : {
                    'class' : 'blue',
                    'action': function(){}
                }
            }
        });
        return false;
    }   
});

Сам запрос $ .get () работает нормально и попадет в оператор if, если в базе данных нет экземпляра значения. Однако, когда дело доходит до раздела обработки ошибок, он не собирает переменные, которые я установил в операторе if.

Я могу понять, почему это не работает, потому что эти переменные выходят за рамки остальной части функции. К сожалению, это настолько далеко, насколько мне известно, и я в растерянности относительно того, как заставить эти переменные быть распознанными секцией обработки ошибок в конце.

Надеюсь, что это имеет смысл,

Любая помощь очень ценится, спасибо,

Линдон

Answer 1

Проблема в том, что get - это просто ярлык для выполнения запроса на получение AJAX.AJAX является асинхронным, поэтому запрос возвращается после проверки переменной.У вас есть несколько вариантов здесь.Обычно я не рекомендую блокировать вызов ajax (что-то вроде поражения цели), но если это происходит при отправке, это может иметь смысл.

Вы можете изменить get на ajax и установить async: false.Это будет ждать завершения запроса, прежде чем двигаться дальше.

Если у вас есть несколько таких вызовов, которые вам нужно ждать, вы должны взглянуть на http://api.jquery.com/jQuery.when/, это позволит запросамработать параллельно, но все же дождаться завершения всех, прежде чем двигаться дальше.

Answer 2

Проблема в том, что ваш ajax-вызов асинхронный.Таким образом, ваша проверка состояния if(hasError) { будет выполнена до того, как ваш обработчик успеха даже установит значение для hasError.Вы не можете выполнить код сразу после того, как инициировали вызов ajax.Вместо этого имейте весь другой код в вашем слушателе успеха.

if($this.is('.rf_GrpCode') && !hasError)
{
    $.get("inc/scripts/formHandle.php", { GrpCode: inputValue, type: "groupCode" }, function(data) {
        if(!data.GrpCode)
        {
            errorMsg = "The code you have entered is invalid.";


            $this.css('background-color','#FFEDEF');
            //alert("Has error: " + errorID);
            if(errorMsg)
            {

                if($('#' + errorID).length)
                {
                    $('#' + errorID).html(errorMsg);
                }
                else
                {
                    $this.after(errorPrepend + errorMsg + errorAppend);
                }
            }
        }
        else
        {
            //alert("Has no error: " + errorID);
            $('#' + errorID).remove();
            $this.css('background-color','#FFFFFF');    
        }
    }, "json");
}

Answer 3

Функция get является асинхронной.Вы обрабатываете результаты, вероятно, до получения ответа.

Answer 4

Запрос $.get() является асинхронным.Вы получите hasError set после ответа, что намного позже, чем когда вы его проверяете.