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

Question

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.

I think u need to add onblur : function () in jsedit to handle outside click. — Neha, Jan 13 '14 at 09:13
As ur code is not in que this is working sample- http://jsfiddle.net/78McZ/ — Neha, Jan 13 '14 at 09:32
@Neha, in your jsfiddle you have alerted message when User clicks in text field. But I would like to click outside text field. — Smile, Jan 13 '14 at 09:38
You want to implement behaviour on "click outside". Checkout this SO answer: http://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it?lq=1 — Ziggy, Jan 13 '14 at 10:05
You are not supposed to include the code for form in your HTML when using Jeditable plugin. — Mika Tuupola, Jan 13 '14 at 13:00
@MikaTuupola, You're right and I haven't added :). I have just shown you my html and jQuery code only. I know that jEdiable creates its own form when User clicks on it ;) — Smile, Jan 13 '14 at 13:11

score 3 · Accepted Answer · edited May 23 '17 at 11:53

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.

score 1 · Answer 2 · answered Jan 14 '14 at 03:29

1

The problem is event : attr which u setting "custom_event" it need to be some js events like click etc. that's why onblur is not working .. this the working solution --- Fiddle Demo

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

answered Jan 14 '14 at 03:29

Neha

1,548
2
10
13

Hi, I appreciate your answer but about `custom_event`, I set it meaningfully that I don't want to show text field when user clicks on `` text but only when user clicks on image icon just after text. – Smile Jan 15 '14 at 05:08
did u mean when u click on some image element the span tag become editable ? – Neha Jan 15 '14 at 05:26
Yes :), Correct. I don't want to span tag to become editable when mouse is clicked on it but only when mouse is clicked on an image. – Smile Jan 15 '14 at 05:36
Yes. I did it same way like you had just explained in jsfiddle example. But when I implemented sortable then after this click functionality has been disturbed anyhow :( I will look in to it later on but currently main concern is to submit form once user clicks mouse outside :( – Smile Jan 15 '14 at 05:40
I found how to disable jEditable text field on click from this [SO Answer](http://stackoverflow.com/questions/3367885/jquery-jeditable-how-to-disable-on-click-editing) but anyhow right now it's not working. – Smile Jan 15 '14 at 05:46
I will look that solution meanwhile u can look this if its help -- http://jsfiddle.net/78McZ/5/ – Neha Jan 15 '14 at 05:50

score 0 · Answer 3 · answered Jan 13 '14 at 12:43

0

try focusout event instead/with blur.

Reference : http://api.jquery.com/focusout/

answered Jan 13 '14 at 12:43

Ashish Kumar

2,991
3
18
27

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

3 Answers3