jQuery conditional queue events

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

Post some code so we can see the problem better

Pablo Mescher
– Pablo Mescher

2012-07-03 12:30:51 +00:00
Commented Jul 3, 2012 at 12:30 — Pablo Mescher
– Pablo Mescher, Commented Jul 3, 2012 at 12:30

techfoobar · Accepted Answer · 2012-07-03 12:32:52Z

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;
        }
    );
}

answered Jul 3, 2012 at 12:32

techfoobar

66.8k14 gold badges117 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1498572 Over a year ago

That's working thank you ! :) I thought the edit function for cell#2 would not be called because saveInProgress is true and so I'd have to "wait" for saveInProgress to be false and click again but it seems I was wrong. Js is probably much faster than I am :)

Collectives™ on Stack Overflow

jQuery conditional queue events

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related