Question

What I have is 2 functions (“edit” and “save”), which are event handlers bound respectively to click and blur events of table cells.
Basically “edit” replace the content of the cell by an input with the same content, and save do the opposite, both with some ajax calls to update the DB.

That works pretty fine. Problem is that now I want to “link” 2 cells so when I change the value of the first one, the second one is updated according to the value of the first one.

That is almost working, except in one case : Let’s say I edit cell#1, make some changes to the value, and then click on the second one.
What’s happening is that the blur event is triggered on the cell#1, calling the “save” function, which make the first cell back to a normal state with the new value, and also change the value of cell#2.

But the click event is also triggered on cell#2 because I just clicked on it, so “edit” is called and start processing, before “save” is finished and has done the change to cell#2.

What I would like is that “edit” on cell#2 wait for save to be completed before it starts, so it will have the right value.

I read some things about synchronizing events in JS etc… but I’ve not apply it successfully to my problem so far.

Can anyone help me ?

Thanks

Answer 1

For every ‘edit’ action, you should probably apply a precondition that mandates that the previous ‘save’ action if any is complete.

For example:

$('...').click(function() {

    // precondition
    if(saveInProgress) return false;

    // .. you code to switch to edit mode ...

});

$('...').blur(function() {

    // precondition
    if(saveInProgress) return false;

    // AJAX call for saving
    doSave();

});

var saveInProgress = false;
function doSave() {

    saveInProgress = true;
    $.ajax(...,
        success: function() {
            // ... your code ...
            saveInProgress = false;
        },
        error: function() {
            // ... your code ...
            saveInProgress = false;
        }
    );
}