我在我的一种形式使用jQuery。在单击提交按钮时,我调用一个功能QuoteDetailValidation()。我在其中验证字段。但是在验证了这些字段之后,我尝试获取所有具有errorActive类的字段。但是不幸的是我听不懂。

看我的代码

$('#saveQuote').on('click', function(event) {

    var descriptionData1 = $('input[name=\"QuoteDetail[description][]\"]');
    QuoteDetailValidation(descriptionData1);

    var selectors = document.querySelectorAll('#quote-quoteItems-form .errorActive').length;

    alert(selectors);
    return false;
});

function QuoteDetailValidation(descriptionData1) {

    for (var i = 0; i < descriptionData1.length; i++) {

        var id = descriptionData[i].id;
        var value = descriptionData[i].value;
        var costid = costData[i].id;
        var costValue = costData[i].value;

        $.ajax({
            type: 'GET',
            url: "<?php echo Yii::app()->createUrl('QuoteData/validatedata'); ?>",
            data: 'descvalue=' + value + '&Descname=description&costValue=' + costValue + '&costName=cost&descId=' + id + '&costId=' + costid,
            success: function(data) {
                var obj = $.parseJSON(data);
                var cost = obj.cost;
                var desc = obj.desc;

                if (desc != '' || cost != '') {

                    if (cost != '') {

                        $('#' + costid).addClass('errorActive');
                        $('#' + costid).prev().addClass('error');
                        $('#' + costid).next().remove();
                        $('#' + costid).after(cost);
                        $('#' + costid).parent().removeClass('success');
                        $('#' + costid).parent().addClass('error');

                    }

                }
            },
            error: function(data) {
                alert('Your data has not been submitted..Please try again');
            }


        });
    }
}


现在会发生什么,当出现错误QuoteDetailValidation()时,将errorActive类附加到字段。

通过var selectors = document.querySelectorAll('#quote-quoteItems-form .errorActive').length;我尝试获取具有errorActive类的字段的长度。但是在发出selectors警报时,它始终给出0。但是当我在获得所有errorActive类之前发出警报时,然后发出警报selectors给我完美的计数。我认为在上课errorActive之前会因为警报而有所延迟。这样我才能数如何使用它。请帮忙。提前致谢。

最佳答案

您可以确定正确选择选择器所需的确切延迟。无论我们添加什么作为延迟都将是假设,并且可能会短暂
ajax请求中使用以下选项的一种

async: false


如下所示:

$.ajax({
            type: 'GET',
            async: false,
            url: "<?php echo Yii::app()->createUrl('QuoteData/validatedata'); ?>",
            data: 'descvalue=' + value + '&Descname=description&costValue=' + costValue + '&costName=cost&descId=' + id + '&costId=' + costid,
            success: function(data) {}});


将async设置为false意味着要调用的语句必须先完成,然后才能调用函数中的下一条语句。如果您设置async:true(默认值),则该语句将开始执行,无论async语句是否已完成,都将调用下一条语句。 Helpful question

但是我仍然建议您在ajax成功的情况下移动选择器部分,如下所示:-

$.ajax({
            type: 'GET',
            url: "<?php echo Yii::app()->createUrl('QuoteData/validatedata'); ?>",
            data: 'descvalue=' + value + '&Descname=description&costValue=' + costValue + '&costName=cost&descId=' + id + '&costId=' + costid,
            success: function(data) {
                var obj = $.parseJSON(data);
                var cost = obj.cost;
                var desc = obj.desc;

                if (desc != '' || cost != '') {

                    if (cost != '') {

                        $('#' + costid).addClass('errorActive');
                        $('#' + costid).prev().addClass('error');
                        $('#' + costid).next().remove();
                        $('#' + costid).after(cost);
                        $('#' + costid).parent().removeClass('success');
                        $('#' + costid).parent().addClass('error');

                    }

                }
var selectors = document.querySelectorAll('#quote-quoteItems-form .errorActive').length;
alert(selectors);
//some logice here or move the above in some function and call it here

            },
            error: function(data) {
                alert('Your data has not been submitted..Please try again');
            }


        });


或使用call back functions.

更新:尝试如下所示。它将保持异步为真,并将计数逻辑保持在$ .ajax之外。

function QuoteDetailValidation(descriptionData1,submitFormOrAddError) {

    for (var i = 0; i < descriptionData1.length; i++) {

        var id = descriptionData[i].id;
        var value = descriptionData[i].value;
        var costid = costData[i].id;
        var costValue = costData[i].value;

        $.ajax({
            type: 'GET',
            url: "<?php echo Yii::app()->createUrl('QuoteData/validatedata'); ?>",
            data: 'descvalue=' + value + '&Descname=description&costValue=' + costValue + '&costName=cost&descId=' + id + '&costId=' + costid,
            success: function(data) {
                var obj = $.parseJSON(data);
                var cost = obj.cost;
                var desc = obj.desc;

                if (desc != '' || cost != '') {

                    if (cost != '') {

                        $('#' + costid).addClass('errorActive');
                        $('#' + costid).prev().addClass('error');
                        $('#' + costid).next().remove();
                        $('#' + costid).after(cost);
                        $('#' + costid).parent().removeClass('success');
                        $('#' + costid).parent().addClass('error');

                    }

                }
                submitFormOrAddError(data);
            },
            error: function(data) {
                alert('Your data has not been submitted..Please try again');
            }


        });
    }
}


这样称呼它:

$('#saveQuote').on('click', function(event) {

    var descriptionData1 = $('input[name=\"QuoteDetail[description][]\"]');
    QuoteDetailValidation(descriptionData1);


    QuoteDetailValidation(descriptionData1,function(output){
            // here you use the output
            var selectors = document.querySelectorAll('#quote-quoteItems-form .errorActive').length; //This line is excuted only after call completes
            alert(selectors);
            //form submit here if error is zero.
        });

        alert("hii");//this  line is executed without waiting for above call..
        return false;
});

10-06 12:32