How can i disable a column without disabling the action buttons? - php

Question

By clicking the row 1. with Institute Name, the Lab of this Institute appears on the right size. So everywhere I am clicking the system appears the Labs on the right. So if I click the edit or delete button, the Labs tab continues to pop up, and after a few seconds, the Institute's edit tab opens. Any ideas?
#section('javascript')
<script>
var laboratories = '{{htmlspecialchars(json_encode($laboratories), ENT_QUOTES, 'UTF-8')}}';
laboratories = laboratories.replace( /"/g, '"' );
laboratories = JSON.parse(laboratories);
// console.log(laboratories);
function getLaboratories(id)
{
$("table#laboratories").empty();
var table = "<tr>" +
"<th>ID</th>" +
"<th>{{ __('Laboratory\'s Name') }}</th>" +
"<th>{{ __('Laboratory\'s Acronym') }}</th>" +
"<th>{{ __('Actions') }} </th>" +
"</tr>";
for(var i=0; i<laboratories[id].length; i++)
{
table += '<tr><td>'+id+'.'+(i + 1)+'</td><td>'+laboratories[id][i].name+'</td><td>'+laboratories[id][i].acronym+'</td>';
table += '<td><a alt="{{ __('Delete Laboratory')}}" title="{{ __('Edit Laboratory')}}" class="btn btn-sm btn-default" href="laboratories/'+laboratories[id][i].id+'/edit"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>' +
'<form action="laboratories/delete/'+laboratories[id][i].id+'/" method="post" class="form-delete2">{{csrf_field()}}{{method_field('DELETE')}}'+
'<button alt="{{ __('Delete Laboratory')}}" title="{{ __('Delete Laboratory')}}" class="btn btn-sm btn-default delete" id="delete_modal2" name="delete_modal2"><span class="glyphicon glyphicon-trash"></span></button></form></td></tr>';
}
$("table#laboratories").append(table);
// EXTRA
var href = $("#create_lab").attr('href');
// console.log(href);
let positiion = href.search("institute_id");
href = href.substring(0,positiion)+"institute_id="+id;
// console.log(href);
$("#create_lab").attr('href', href)
$("#create_lab").attr('disabled', false);
}
</script>
<div class="container-fluid">
<div class="row">
<div class="col-md-5">
<div class="panel panel-default">
<div class="panel-heading">
<span class="glyphicon glyphicon-plus"></span> {{ __('Create New Institute') }}
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-bordered table-hover" data-toggle="dataTable" data-form="deleteForm">
<tr>
<th>ID</th>
<th>{{ __('Institute\'s Name') }}</th>
<th>{{ __('Institute\'s Acronym') }}</th>
<th>{{ __('Actions') }}</th>
</tr>
#if(count($institutes) > 0)
#foreach($institutes as $institute)
<tr onclick="getLaboratories({{$institute->id}});">
<td>{{$institute->id}}</td>
<td>{{$institute->name}}</td>
<td>{{$institute->acronym}}</td>
<td>
<a alt="{{ __('Edit Institute')}}"title=" {{ __('Edit Institute')}}" class="btn btn-sm btn-default" href="{{route('institutes.edit', $institute->id)}}"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>
<form action="{{route('institutes.destroy', $institute->id)}}" method="post" class="form-delete">
{{csrf_field()}}
{{method_field('DELETE')}}
<button alt="{{ __('Delete Institute')}}" title="{{ __('Delete Institute')}}" class="btn btn-sm btn-default delete" id="delete_modal" name="delete_modal">
<span class="glyphicon glyphicon-trash"></span>
</button>
</form>
</td>
</tr>
#endforeach
#else
<tr>
<td>{{ __('There are no institutes available.') }}</td>
</tr>
#endif
</table>
</div>
</div>
</div>
</div>

Answer 1

I suspect this is a javascript issue rather than a php/laravel problem, anyways: on the click handlers for the buttons you call 'stopPropagation' to stop the click event on the buttons bubbling up to fire the click event on the row. What happens is that a click on the button is ALSO a click on the row, so it reacts to both.
See this example html:
<table>
<tr><td>the row<td> <span ><input type="button" value="I am a button"/> </span></td></td></tr>
</table>
<div id="messages">
</div>
and this javascript:
$('tr').on('click', function(){
$('#messages').append('<div>You clicked the row</div>')
})
$('span').on('click', function(e){
$('#messages').append('<div>You click the button</div>')
})
As you can see. It fires the event for both the button and the row when you click the button.
if you to this instead:
$('tr').on('click', function(){
$('#messages').append('<div>You clicked the row</div>')
})
$('span').on('click', function(e){
e.stopPropagation();
$('#messages').append('<div>You click the button</div>')
})
(notice the 'e.stopProgration();') it will only fire the event for the button.