Question

I have form autocomplete code that executes when value changes in one textbox. It looks like this:

$('#myTextBoxId)').change(function () {
    var caller = $(this);
    var ajaxurl = '@Url.Action("Autocomplete", "Ajax")';
    var postData = { myvalue: $(caller).val() }
        executeAfterCurrentAjax(function () {
            //alert("executing after ajax");
            if ($(caller).valid()) {
                //alert("field is valid");
                $.ajax({ type: 'POST',
                    url: ajaxurl,
                    data: postData,
                    success: function (data) {
                        //some code that handles ajax call result to update form
                        }
                    });
                }
            });
        });

As this form field (myTextBoxId) has remote validator, I have made this function:

function executeAfterCurrentAjax(callback) {
    if (ajaxCounter > 0) {
        setTimeout(function () { executeAfterCurrentAjax(callback); }, 100);
    }
    else {
        callback();
    }
}

This function enables me to execute this autocomplete call after remote validation has ended, resulting in autocomplete only when textbox has valid value. ajaxCounter variable is global, and its value is set in global ajax events:

$(document).ajaxStart(function () {
        ajaxCounter++;
    });
$(document).ajaxComplete(function () {
        ajaxCounter--;
        if (ajaxCounter <= 0) {
            ajaxCounter = 0;
        }
    });

My problem is in IE (9), and it occurs only when I normally use my form. Problem is that function body inside executeAfterCurrentAjax(function () {…}); sometimes does not execute for some reason. If I uncomment any of two alerts, everything works every time, but if not, ajax call is most of the time not made (I checked this by debugging on server). If I open developer tools and try to capture network or debug javascript everything works as it should.

Answer 1

It seems that problem occurs when field loses focus in the same moment when remote validation request is complete. What I think it happens then is callback function in executeAfterCurrentAjaxCall is executed immediately, and in that moment jquery validation response is not finished yet, so $(caller).valid() returns false. I still do not know how alert("field is valid") helps in that scenario, and that could be sign that I’m wrong and something else is happening. However, changing executeAfterCurrentAjaxCall so it looks like this seems to solve my problem:

function executeAfterCurrentAjax(callback) {
    if (ajaxCounter > 0) {
        setTimeout(function () { executeAfterCurrentAjax(callback); }, 100);
    }
    else {
        setTimeout(callback, 10);
    }
}