'tab bane bootstrap buttons disappear after clicking on another tab
My tab pane has a grid table that should be displayed in 4 languages the bootstrap buttons only appear in the english pane but disappear when i click on another language pan
This is my view
This is what i tried i expect that the buttons appear in every pane
That is my English tab and french tab respectively what am i missing
<div class="tab-pane fade show active " id="nav-0{{$language->abbreviation}}" role="tabpanel" aria-labelledby="nav-en-tab">
<div class="row">
<div class="col-12">
<div class="table-responsive">
<table id="zero_config" class="table table-striped table-bordered">
<thead>
<tr>
<th scope="col">Degree</th>
<th scope="col">Degree Type</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
@foreach($degrees_en as $en)
<tr>
<td name="unit_nameEn">{{$en->degree_name}}</td>
<td>{{$en->type_inf->degree_type_name}}</td>
<td>
<div class="d-flex">
<!-- Edit Modal -->
<form action="{{ route('unit.update', $en->degree_id) }}" name="edit_unit" method="POST" id="editUnit{{$en->degree_id}}">
<div class="modal fade" id="editModal{{$en->degree_id}}" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="editModalLabel{{$en->degree_id}}" aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<div class="modal-header">
<h2 class="fw-bolder" id="editModalLabel{{$en->degree_id}}">Edit</h2>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-4">
<div class="row">
<div class="col-12">
<div class="form-group">
<label> Degree Type </label>
<select id="type_id" name="type_id" class="select form-select shadow-none" style="width: 100%; height: 36px" required>
<option value="ss" selected>hbu</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="row">
<div class="col-12">
<div class="form-group">
<label> Degree Name </label>
<input type="text" name="unit_nameFr" class="form-control bg-light" placeholder="Add french unit" value="{{ $en->degree_name}}" required>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-info float-end" onclick="document.getElementById('editUnit{{$en->degree_id}}').submit();">Save changes</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
{{ csrf_field() }}
@method('PUT')
</div>
</div>
<div class="ml-auto">
<!-- edit button -->
<button type="button" id="{{$en->degree_id}}" name="edit_unit" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#editModal{{$en->degree_id}}">
<span><i class="fas fa-edit"></i>Edit</span>
</button>
</div>
</form>
<div class="mr-auto">
<div class="mr-auto">
<form action="{{ route('unit.destroy', $en->degree_id)}}" method="post" id="deleteUnit{{$en->degree_id}}">
@csrf
@method('DELETE')
<div class="modal fade" id="deleteModal{{$en->degree_id}}" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel{{$en->degree_id}}" aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<div class="modal-header">
<h2 class="fw-bolder" id="deleteModalLabel{{$en->degree_id}}">Delete</h2>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</button>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-info float-end" onclick="document.getElementById('deleteUnit{{$en->degree_id}}').submit();">Yes</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
<a class="btn btn-danger" id="delete{{$en->degree_id}}" data-bs-toggle="modal" data-bs-target="#deleteModal{{$en->degree_id}}">Delete</a>
</form>
</div>
</div>
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
///////////////////////////////////////////////////////////////////////////////////////////////////////
@elseif($language->language_id==3))
<div class="tab-pane fade show " id="nav-0{{$language->abbreviation}}" role="tabpanel" aria-labelledby="nav-en-tab" >
<div class="row">
<div class="col-12">
<div class="table-responsive">
<table id="zero_config" class="table table-striped table-bordered">
<thead>
<tr>
<th scope="col">Degree</th>
<th scope="col">Degree Type</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
@foreach($degrees_fr as $fr)
<tr>
<td name="unit_nameEn">{{$fr->degree_name}}</td>
<td>{{$fr->type_inf->degree_type_name}}</td>
<td>
<div class="modal fade" id="editModal{{$fr->degree_id}}" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="editModalLabel{{$fr->degree_id}}" aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<div class="modal-header">
<h2 class="fw-bolder" id="editModalLabel{{$fr->degree_id}}">Edit</h2>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-4">
<div class="row">
<div class="col-12">
<div class="form-group">
<label> Degree Type </label>
<select id="type_id" name="type_id" class="select form-select shadow-none" style="width: 100%; height: 36px" required>
<option value="ss" selected>hbu</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="row">
<div class="col-12">
<div class="form-group">
<label> Degree Name </label>
<input type="text" name="unit_nameFr" class="form-control bg-light" placeholder="Add french unit" value="{{ $fr->degree_name}}" required>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-info float-end" onclick="document.getElementById('editUnit{{$fr->degree_id}}').submit();">Save changes</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
{{ csrf_field() }}
@method('PUT')
</div>
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|