jquery form send ajax

Question

i have the following validate script to run before the form is submitted:

    function validateMyForm(){
    var numberTo = $('.to').length

    $('.to').each(function(){
        var product_id = $(this).closest('tr').find('input').get(0).id;
        var todate = $(this).val();
        var from = $(this).prev().prev().val();
        $.ajax({
            type: 'POST',
            url: myBaseUrl + 'Products/ajax_change_date',
            dataType: 'json',
            data: {
                id: product_id,
                todate: todate,
                from: from

            },
            success: function (data) {
                numberTo--;
            }
        });
    });

    while(numberTo != 0){

    }
    return true;
}

However when i run this i get a message box in firefox saying its waiting for the script to complete.

How do i avoid that while still keeping the ajax?

You can't wait for an asynchronous operation to finish. Javascript is single-threaded, so while your main thread is in the loop, it never executes the callback. — Barmar, Feb 01 '14 at 14:29
Depending on how many $('.to') are in your page, you may end up with many Ajax requests, which may significantly slow down your app. You might want to group together some of the requests to save performance. — BogdanBiv, Feb 01 '14 at 14:35

score 3 · Accepted Answer · answered Feb 01 '14 at 14:28

Using:

while(numberTo != 0){

}

You create infinity loop and your scrip stop executing. This is why you get this error on Firefox.

You will need to have callback to check numberTo variable.

For example:

function validateMyForm(){
    var numberTo = $('.to').length;

    function checkNumberTo() {
        if( numberTo ===  0 ) {
            alert( 'AJAX Completed' );
            // here you should include your code to manually submit the form
        }
    }

    $('.to').each(function(){
        var product_id = $(this).closest('tr').find('input').get(0).id;
        var todate = $(this).val();
        var from = $(this).prev().prev().val();
        $.ajax({
            type: 'POST',
            url: myBaseUrl + 'Products/ajax_change_date',
            dataType: 'json',
            data: {
                id: product_id,
                todate: todate,
                from: from

            },
            success: function (data) {
                numberTo--;
                checkNumberTo()
            }
        });
    });
    return false;
}

So how do i make sure that the ajax has been completed? – Marc Rasmussen Feb 01 '14 at 14:28 — Marc Rasmussen, Feb 01 '14 at 14:28
You do what you want in the callback function. – Barmar Feb 01 '14 at 14:29 — Barmar, Feb 01 '14 at 14:29

BogdanBiv · Answer 2 · 2014-02-01T14:57:23.400

If you want a more elegant solution you might want to try a promise library. Here is an essay https://gist.github.com/domenic/3889970 that presents the downside of using callbacks and the solution to it - Promises. The essay is long, but it is worthy to read.

To get to how this new concept applies to you, you should try researching Promise composition, here is the first article I could find on Google on this: http://strongloop.com/strongblog/how-to-compose-node-js-promises-with-q/.

var x = 10; var promise1 = Q($.ajax(...)).then(function () { x = 20; }); var promise2 = Q($.ajax(...)) .then(function () { x = 30; });

var groupPromise = Q.all([ promise1(), promise2() ]) groupPromise.then(function (results) { }, console.error) // Kris Kowal's example

Promises l and 2 execute in paralel and one does not know which will be fulfilled first. Here are 2 relevant promise libraries:

jquery form send ajax

2 Answers2