Synchronous ajax method

I've made a form to register a new account. In this form I'm checking if the email chosen is available or not, but I'm checking that with a webservice it takes a few seconds. Let's see that beautiful method :

function validateEmail(email) {
    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    if(re.test(email) == true) {
        var status;
        $.ajax({
            type: "POST",
            url: "ajax/checkEmail.php",
            data: "email="+email,
            async: false,
            cache: false,
            timeout: 30000
        }).done(function( data ) {
            $(".spinner").hide();
            status = msg;
        });
        return status;
    }
}

I've been forced to put async to false unless the function didn't wait my ajax to be done and returned nothing. With that async:false, he does but my whole front is blocked until the loading's end (my mouse is blocked and I can't fill any others fields).

I'm sure I'm not the first one to be confronted to that situation so I'm counting on you mates :-) !

Thanks !

Answers


Use the asynchronous method, but have the return function enable the "Submit" button (or equivalent).

function validateEmail(email) {
    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    if(re.test(email) == true) {
        var status;
        $.ajax({
            type: "POST",
            url: "ajax/checkEmail.php",
            data: "email="+email,
            timeout: 30000
        }).done(function( data ) {
            //move your result processing here
            checkResult(data);
        });
        return status;
    }
}

function checkResult(svcdata) {
     $(".spinner").hide();
     status = msg;
    //code here to check the result value and enable further action
    if (svcdata.approved) {  
        $("#submitid").attr("disabled",false);
    } else {
        $("#submidid").attr("disabled",true);
        //other alerting methods (highlight field, refocus, etc)
    }
}

Try

$.when(ajaxCall).then(function(response){})


you can use promises:

<script>
$.postData = function(url, form_data) {
    return $.ajax({
        url: url,
        type: 'POST',
        data: form_data,
        dataType: 'json'
    }).promise();
};
$.postData("your_url", "your_form_data").then(function (data) {
    // do whatever you have to do with data
});
</script>

You never return the result of the AJAX method like you're doing, instead you would pass a callback and keep async:true

function validateEmail(email, callback) {
...
...
}).done(function( data ) {
    $(".spinner").hide();
    status = data;
    callback(status);
});

And your callback

function doWork(status) {
    console.log(status);
}

And how you call that:

validateEmail(email, doWork);

Need Your Help

Making accordions with tabs in asp.net using jquery

javascript jquery html asp.net css

Im making accordion tabs using jquery in visual studio and the panes don't expand or collapse at the moment. I'm getting this error

Show specific month when zoomed on a quarterly chart using highcharts

javascript jquery highcharts

I'm looking for a way to reveal the months between specific quarters on an areaspline chart.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.