jQuery is too fast (faster than mysql)

Question

I am developing a cakephp application that uses jquery and post methods in the background.

When cakephp sends a post request in the background, a div has to refresh (or regenerate), and it has to show new content.

Post method calls other php file that does a MySQL query. The div also call mysql, and select proper data from database.

Problem is that div is refreshed (or regenerated) before the first mysql query. So it works ok, but how can I tell that div to "wait" a bit, until the mysql query is executed?

Here is my code...

$.post('/publications/deleteItem/' + valueClicked, function(data) {
}, 'html');

$.post('/publications/getItems/' + val + '/' + val1, function(data) {
    $("#relatedNumerationPublications").empty().append(data);
}, 'html');

UPDATE: ok, so, i get where is problem. like Chetan Sastry suggested below, tryed with:

$.post('/publications/deleteItem/' + valueClicked, function() {
    $.post('/publications/getItems/' + val + '/' + val1, function(data) {
        $("#relatedNumerationPublications").empty().append(data);
    }, 'html');
}, 'html');

problem is cause response for '/publications/deleteItem/' + valueClicked is Page Not Found. guess that's cause of cakephp (in fact, that page exists, but cakephp returns like it's not).

is it possible somehow to skip error 'Page not found', and to continue with code?

Answer 1

Where do you put your regenerate function?

I think it's should be okay if you put it on your onSuccess callback function.

Answer 2

Ajax calls are (by definition) asynchronous, so if you just put the next javascript instruction right after the ajax call, you'll always experience that problem. As said, use the onSuccess parameter or a synchronous ajax call (I recall jquery provides something like that).

Answer 3

You can have Ajax poll every so often afte the first SQL action for a change. Only do your regeneration after you get back a new value for the poll from PHP.

Answer 4

Just put the call to get items in the callback of the delete items function. Something like this-

$.post('/publications/deleteItem/' + valueClicked, function() {
    $.post('/publications/getItems/' + val + '/' + val1, function(data) {
        $("#relatedNumerationPublications").empty().append(data);
    }, 'html');
}, 'html');

Now your getItems will wait until deleteItems finishes. (Assuming you aren't using an asynchronous backend technology!)