Jess McKenzie Jess McKenzie - 7 months ago 16
Javascript Question

jQuery shows buttons on last box

I have an issue where whenever I click an edit button it goes through each box showing the edit state before landing on the last input box. The

console.log
in my code shows the correct box for every box clicked

The result should be that every box has its own edit function.
Why is the code walking?

Normal State:

enter image description here

When an edit button is 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" 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 = '';
}
}
});

});


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

Answer

Your code doesn't look for closest input, shows and hides all $('.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(); // !!
    })