jqueryformsblurjeditable

How to update jEditable text field when user click mouse outside the form?


I am working with jEditable plug-in. My question is that How can I detect when user click outside text field of jEditable?

When user clicks outside jEditable text field, still cursor stays in text field and nothing happens?

Edit:
My jEditable form looks like

<span class="edit">
    <form>
        <input/>
    </form>
</span>

Here is my current code

$(".edit").editable("path/to/url", {
    indicator : "saving...",
    type   : 'text',
    event  : 'custom_event',
    submitdata : function(value, settings) {
        return {
            _method   : "post",
            myId    : jQuery("#id").val(), //extra needed id
        };
    },
    select : true,
    onblur : 'submit',
});

'onblur' is working when I press {tab key} then it submits content of text field. But when I click mouse outside text field then nothing happens and text field stays as it.

I would like also to submit content of text field when user clicks outside that text field.


Solution

  • I just found working solution for my question and may it helps others...

    $(document).mouseup(function (e) {
        var container = $(".edit");
        if (!container.is(e.target) // if the target of the click isn't the container...
            && container.has(e.target).length === 0) // ... nor a descendant of the container
        {
            if(container.find("form").length > 0) {
                container.find("form").submit();
            }
        }
    });
    

    I found this answer from one of SO Answer. So if anybody interested please have a look on link given.