javascript - jQuery shows buttons on last box -


i have issue whenever click edit button goes through each box showing edit state before landing on last input box. console.log in code shows correct box every box clicked

the result should every box has own edit function. why code walking?

normal state:

enter image description here

when edit button clicked:

enter image description here

jquery:

$(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();        $('.updatefield').editable('toggle');        $('.edit').hide(); });     $(document).on('click', '.editable-cancel, .editable-submit', function(){         $('.edit').show();     })         //ajax emulation. type "err" 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 = '';           }     } });   }); 

normal state 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 --> 

your code doesn't closest input, shows , hides $('.edit') elements.

$('.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(); // !!     })         

Comments

Popular posts from this blog

Load Balancing in Bluemix using custom domain and DNS SRV records -

oracle - pls-00402 alias required in select list of cursor to avoid duplicate column names -

python - Consider setting $PYTHONHOME to <prefix>[:<exec_prefix>] error -