Question

I am new to jQuery queues so I can use some help here. It is hard to set up a demo page for this situation so I hope you can follow along based on my description.

I am coding inline-editing into my photo community web site. Users can click the title or description of an image and just start typing. When they exit the field or hit [enter] their value is saved. For this I am using the jEditable plugin, which is awesome.

On to the problem. It concerns error handling. The back-end script which validates the input may return with an error if the value is not valid, this error I will then catch in the errorhandler of jEditable. Such an error could be “title cannot be empty”.

What I would like to do is overwrite the title field with the error text. Next, after 3 seconds the error text will be gone and the original value before the edit is shown. I actually have this working using the following code. Note that I am only showing the relevant part:

onerror: function(settings, original, xhr) {
console.log('error');

// set error text
$("#" + original.id).html('<span class=\"error\">' + xhr.responseText + </span>').delay(3000).queue(function() {
original.reset();
});
}

As you can see, the reset of the original value is delayed for 3 seconds whilst the error text is visible. This is working fine, but only the first time. If I once again edit the resetted title and forcefully enter an invalid value again, the error text appears, but it seems the reset is never called. Through logging I have confirmed that the error handler is called the second time, yet not the reset code. Why not?

Answer 1

Answering my own question: It turns out I need to dequeue the reset after calling it:

original.reset();
$(this).dequeue();

Works fine now!