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.

Ruffled

Answer 1

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

Island

thanks, but I didn't manage to solve it... coulde you be so kind and edit it in my jsfiddle? jsfiddle.net/jjdJX – Ruffled

I just updated you jsfiddle, check it, I don't know how jsfiddle works so here's the link jsfiddle.net/jjdJX/1 – Island

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... – Ruffled

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? – Ruffled

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? – Ruffled

you mean, you want it to be editable only once. if user clicks it again it shouldn't open the edit box – Island

no, he can click again, but in the time he clicked, and input box is showed. the .edit is hidden – Ruffled

I think that you've posted the samje jsfiddle link as before... please check – Ruffled

Hi, how to add other params ? like validate: function(value) { alert(0) if($.trim(value) == '') { return 'The content can not be blank!'; } }, – Totaquine

Hy Why :), I don't know if you've already figured it out, but here's the solution jsfiddle.net/jjdJX/3. – Island

@HiberKnight how to enable editing only by clicking "edit" not on "mr. Doe" in jsfiddle.net/jjdJX/3 ? – Theatheaceous

cannot update question due to queue being full. so here is an updated fiddle(jsfiddle.net/xkcu64mh) updated the resource urls to be valid. – Scare