Question

I have jEditable working fine with a textarea to edit the content inside an object. I’m submitting onBlur using jEditable’s onblur option directly to a function (instead of an url) and all works as expected UNLESS you change windows using for e.g. alt+tab. When I use alt+tab it looks like the content is submitted through an actual http request ignoring my callback function.

My very basic sample implementation looks like this:

$(".editable").editable(function(content,settings){
        content = content.replace(/\n/gi,"<br />");
        return content;
    },{
    data: function(value, settings) {
        return value.replace(/<br[\s\/]?>/gi, '\n');
    },
    type: "textarea",
    onblur: "submit"
});​

You can test it here: http://jsfiddle.net/xmajox/wePp5/

I’ve tried all other window operations: resize, move, etc and even moving between tabs on the browser works great (submits the data and exits the edit mode).

Any ideas of how this might be tamed?

UPDATE:
After a few more tests and some colaboration from other people, it seems that this depends on the os (window manager?). It happens consistently on ubuntu 12.10 with unity but doesn’t happen on mac or windows (haven’t tested other linux boxes).

Also, it is now proved that my callback method does run when I use alt-tab but the form gets POST’d anyway afterwards. Adding a live preventDefault didn’t seem to help.

Answer 1

Found the fix for this, but coulnd’t quite understand why it happens on such a specific situation.

First of, I must be the (un)luckiest guy in the world because I’ve tried this on 10ths of other combinations and it didn’t have this problem, only place I could get it to happen was:

 Ubuntu 12.10 (with Unity) and Chrome (v22 at the time of this post)

Disclaimer: This doesn’t mean it does not happen on other places, I just couldn’t reproduce it on the ones I tested (or asked friends to test).

Problem:
When focus is lost, jEditable – as of version 1.7.1 – sets a timeout before actually executing any action (200ms by default) to prevent duplicate actions according to the comments in the source. If you (using the above browser/os combination) alt+tab out of the browser window before the timeout is fired (aka. before the data is submitted and your method is ran) it will force a POST request with the data, completely ignoring the preventDefaults or return falses. It won’t have this problem if you press alt… keep it pressed (more than those 200ms, i.e. enough time for the timeout to be fired) and then press alt to move away.

Solution:
I edited jEditable’s source to reduce the timeout (or even remove it). So I around line 280, where it says:

(...)
    input.blur(function(e) {
         // prevent double submit if submit was clicked 
         t = setTimeout(function() {
              form.submit();
         }, 200);
    });
(...)

I changed it to:

(...)
    input.blur(function(e) {
        form.submit();
    });
(...)

Notes:
I removed this because on my situation (submitting textareas ONLY on blur and without any other controls that allow the user to submit the data) I coulnd’t reproduce the double submit issue that Mika Tuupola was mentioning on the comments. If you have text input fields (that are submitted pressing enter) with the submit onBlur active, you might fall into that situation. On those cases I suggest you just reduce the timeout or simply avoid to use onBlur submits.