jQuery conserver les autres boîtes non éditées état

Question

Dans le code ci-dessous lorsque je clique sur Modifier, les autres cases perdent l'icône modifiée jusqu'à ce que l'utilisateur clique sur Annuler.

Y at-il loin que je peux l'avoir de sorte que si une boîte n'est pas en cours d'édition, il conserve l'état normal du code?

La bibliothèque J'utilise est: https://vitalets.github.io/x-editable/

Etat normal:

Lorsqu'un bouton d'édition est cliqué:

jQuery:

/* X-Editable */ 

$(function(){ 


$.fn.editable.defaults.mode = 'inline'; 

$.fn.editable.defaults.params = function (params) { 
    params._token = $("#_token").data("token"); 
    return params; 
}; 
    var dataURL = $('.updateField').data('url'); 
    var inputName = $('.updateField').attr("name"); 

$('.updateField').editable({ 
    type: 'text', 
    url: dataURL,  
    name: inputName,  
    placement: 'top', 
    title: 'Enter public name', 
    toggle:'manual', 
    send:'always', 
    ajaxOptions:{ 
     dataType: 'json' 
    }  
}); 

$('.edit').click(function(e){ 
    var container = $(this).closest('.input-group'); // !! 
    var input  = container.find('.updateField'); 
    var inputName = input.attr('name'); 
    var dataURL = input.data('url'); 

     console.log(inputName); 
     e.stopPropagation(); 
     container.find('.updateField').editable('toggle'); // !! 
     container.find('.edit').hide(); // !! 
}); 
    $(document).on('click', '.editable-cancel, .editable-submit', function(e){ 
     $(e.target).closest('.input-group').find('.edit').show(); // !! 
    })   
//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 = ''; 
     } 
    } 
}); 

}); 

Etat normal HTML:

<input name="__RequestVerificationToken" type="hidden" value="{{ csrf_token() }}" /> 
    <div class="box-body"> 
     <div class="form-group"> 
     <label class="col-sm-2 control-label" for="siteName">Website Name</label> 

     <div class="col-sm-3"> 
      <div class="input-group"> 
      <input class="form-control updateField" data-url="{{ route('generalDataSubmit', 1)}}" data-title="Website Name" name="siteName" placeholder="Email" type="input" value="{{ old('siteName', $siteSettingsData->siteName)}}"> <span class="input-group-btn"><button class="btn btn-default edit" type="button"><span class="glyphicon glyphicon glyphicon-pencil"></span></button></span> 
      </div> 
     </div> 
     </div> 


     <div class="form-group"> 
     <label class="col-sm-2 control-label" for="siteEmail">Website E-Mail Address</label> 

     <div class="col-sm-3"> 
      <div class="input-group"> 
      <input class="form-control updateField" data-url="{{ route('generalDataSubmit', 1) }}"data-title="Website E-Mail Address" name="siteEmail" placeholder="Site E-Mail" type="email" value="{{ old('siteEmail', $siteSettingsData->siteEmail) }}"> <span class="input-group-btn"><button class="btn btn-default edit" type="button"><span class="glyphicon glyphicon glyphicon-pencil"></span></button></span> 
      </div> 
     </div> 
     </div> 


     <div class="form-group"> 
     <label class="col-sm-2 control-label" for="siteCopyright">Website Copyright</label> 

     <div class="col-sm-3"> 
      <div class="input-group"> 
      <input class="form-control updateField" data-url="{{ route('generalDataSubmit', 1)}}" data-title="Website Copyright" name="siteCopyright" placeholder="Site Copyright" type="input" value="{{ old('siteCopyright', $siteSettingsData->siteCopyright)}}"> <span class="input-group-btn"><button class="btn btn-default edit" type="button"><span class="glyphicon glyphicon glyphicon-pencil"></span></button></span> 
      </div> 
     </div> 
     </div> 
    </div> 
    <!-- /.box-body --> 

Answer 1

essayez de changer la ligne suivante:

container.find('.edit').hide(); 

à

$(this).hide(); 

Answer 2

Il semble que vous utilisez une certaine conception de bootstrap template.From mon point de vue le code

$('.edit').click(function(e){ 
    var container = $(this).closest('.input-group'); // !! 
    var input  = container.find('.updateField'); 
    var inputName = input.attr('name'); 
    var dataURL = input.data('url'); 

     console.log(inputName); 
     e.stopPropagation(); 
     container.find('.updateField').editable('toggle'); // !! 
     container.find('.edit').hide(); // !! 
}); 

semble ok.I ne comprennent pas la ligne container.find ('updateField'). Modifiable ('basculer'); // !! dans la fonction.Vous utilisez une sorte de bibliothèque. Ma suggestion est de supprimer cette ligne de votre code et test. Vérifiez également si vous obtenez la valeur correcte de inputName sortie. Et enfin vérifier dans la console pour les erreurs lorsque vous cliquez sur le bouton d'édition.

Answer 3

Essayez d'utiliser $ (e) au lieu de $ (ce) dans le code suivant:

$('.edit').click(function(e){ 
    //var container = $(this).closest('.input-group'); 
    var container = $(e).closest('.input-group'); 
    var input  = container.find('.updateField'); 
    var inputName = input.attr('name'); 
    var dataURL = input.data('url'); 

     console.log(inputName); 
     e.stopPropagation(); 
     container.find('.updateField').editable('toggle'); // !! 
     container.find('.edit').hide(); // !! 
});