web-dev-qa-db-fra.com

X - entrée modifiable modifiable en cliquant sur un autre élément

J'ai une entrée modifiable en x, que j'utilise pour modifier les noms d'utilisateur. L'action par défaut de l'élément est que lorsque vous cliquez sur lui-même, vous pouvez modifier une valeur. Mais je veux activer le clic sur l'élément modifiable et pouvoir modifier la valeur à l'intérieur de mon entrée. Pour raccourcir les choses, voici n jsfiddle de ma situation actuelle.

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>

Ce serait bien si quelqu'un pouvait m'aider et éditer mon jsfiddle lié de la manière que j'ai décrite. Cliquez sur .edit pour pouvoir modifier la valeur.

javascriptjquerytwitter-bootstrapx-editable
21
dzordz

Il a une fonction appelée enable que vous pouvez utiliser pour activer l'édition

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

Cela ne fonctionnera pas si vous n'ajoutez pas la première ligne car le comportement par défaut consiste à désactiver la modification au clic d'un autre élément.

Modifier:

Pour activer la modification uniquement sur le clic du bouton Modifier et non sur le texte, définissez la propriété toggle sur manual.

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

JSFiddle

48
bitkot