X - editable input editable on click on other element

Question

I have an x-editable input, which I'm using to edit usernames. The default action of the element is when you click on itself, you can edit a value. But I want to enable click on the element's .editable and be able to edit the value inside my input. To shorten stuff here is a jsfiddle of my current situation.

jQuery:

$(function(){
  $.fn.editable.defaults.mode = 'inline';
  $('#publicname-change').editable({
    type: 'text',
    url: '/post',
    pk: 1,
    placement: 'top',
    title: 'Enter public name'
  }
);

//ajax emulation. Type "err" to see error message
$.mockjax({
  url: '/post',
  responseTime: 100,
  response: function(settings) {
    if(settings.data.value == 'err') {
      this.status = 500;
      this.responseText = 'Validation error!';
    } else {
      this.responseText = '';
    }
  }
});

HTML:

<div class="control-group control-group-inline">
  <label class="control-label labelModified" for="publicname-change">Public name:</label>
  <div class="controls">
    <a href="#" id="publicname-change" class="editable editable-click inline-input">Mr.    Doe</a>
    <div class="edit">edit <i class="icon-pencil pencil-input-change"></i></div>
  </div>
</div>

It would be nice if someone can help me and edit my linked jsfiddle in the way I described. On click .edit, be able to edit value.

bitkot · Accepted Answer · 2014-08-05T14:51:40.070

49

It has a function called enable you can use that to enable edit

$('.edit').click(function(e){    
       e.stopPropagation();
       $('#publicname-change').editable('toggle');
});

This won't work if you don't add the first line because default behaviour is to disable edit on click of any other element.

Edit:

To enable editing only on the click of edit button and not the text, set toggle property to manual.

$('#publicname-change').editable({
    type: 'text',
    url: '/post',
    pk: 1,
    placement: 'top',
    title: 'Enter public name',
    toggle:'manual'
}

JSFiddle

edited Aug 05 '14 at 14:51

answered Jun 03 '13 at 08:08

bitkot

4,466
2
28
39

thanks, but I didn't manage to solve it... coulde you be so kind and edit it in my jsfiddle? http://jsfiddle.net/jjdJX/ – dzordz Jun 03 '13 at 08:32
1

I just updated you jsfiddle, check it, I don't know how jsfiddle works so here's the link http://jsfiddle.net/jjdJX/1/ – bitkot Jun 03 '13 at 08:40
I have another one problem... Maybe you could help me, so I don't ask another question on stackoverflow. I wanna to do it so when .edit is clicked, it gets hidden... – dzordz Jun 03 '13 at 08:58
no, when edit is clicked, it gets hidden, you modify you input, click check button, and after that it's showed again... sort of opposit of that two button that are showing now. you get it? – dzordz Jun 03 '13 at 09:48
in short way, I want it to be disabled when is clicked already, I think that in first place we meant same, sorry for misunderstood. How can be made then so it would be disabled when the edit clicked again? – dzordz Jun 03 '13 at 10:01
you mean, you want it to be editable only once. if user clicks it again it shouldn't open the edit box – bitkot Jun 03 '13 at 10:08
no, he can click again, but in the time he clicked, and input box is showed. the .edit is hidden – dzordz Jun 03 '13 at 10:46
I think that you've posted the samje jsfiddle link as before... please check – dzordz Jun 03 '13 at 11:27
Hi, how to add other params ? like `validate: function(value) { alert(0) if($.trim(value) == '') { return 'The content can not be blank!'; } },` – why Aug 07 '13 at 15:24
Hy Why :), I don't know if you've already figured it out, but here's the solution http://jsfiddle.net/jjdJX/3/. – bitkot Aug 12 '13 at 08:43
@HiberKnight how to enable editing only by clicking "edit" not on "mr. Doe" in jsfiddle.net/jjdJX/3 ? – EmptyData Aug 05 '14 at 12:06
cannot update question due to queue being full. so here is an updated fiddle(https://jsfiddle.net/xkcu64mh/) updated the resource urls to be valid. – Renier Apr 05 '22 at 08:46

X - editable input editable on click on other element

1 Answers1

Linked