Tengo una pantalla con un nav-tabs y un modal de Boostrap:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<!-- Nav Tab -->
<ul class="nav nav-tabs card-header-tabs" id="nav-tab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="nav-campos-tab" data-bs-toggle="tab" href="#nav-campos" role="tab"
aria-controls="nav-campos" aria-selected="true">Campos</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="nav-perfiles-tab" data-bs-toggle="tab" href="#nav-perfiles" role="tab"
aria-controls="nav-perfiles" aria-selected="false">Perfiles</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="nav-recursos-tab" data-bs-toggle="tab" href="#nav-recursos" role="tab"
aria-controls="nav-recursos" aria-selected="false">Recursos</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="nav-perfil-recurso-tab" data-bs-toggle="tab" href="#nav-perfil-recurso" role="tab"
aria-controls="nav-perfil-recurso" aria-selected="false">Perfil-Recurso</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="nav-visibilidad-tab" data-bs-toggle="tab" href="#nav-visibilidad" role="tab"
aria-controls="nav-visibilidad" aria-selected="false">Visibilidad</a>
</li>
</ul>
<div class="modal fade" id="form" tabindex="-1" aria-labelledby="formLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 id="formHeader" class="modal-title" id="formLabel"></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div id="formBody" class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
<button id="addButton" type="button" class="btn btn-primary" data-action="">Añadir</button>
</div>
</div>
</div>
</div>
EDITADO
Corrijo el problema: Cuando estoy en una de las pestañas del tab, si esta es la que levanta por primera vez el Modal, a partir de ahora esta pestaña siempre levantará el Modal, excepto en el caso de ser la primera pestaña, la que está activa por defecto, que cuyo caso hace que el click en la siguiente pestaña consecutiva levante el Modal.
Y el modal lo abro con un botón mediante Javascript con la siguiente función:
table = $('#table-campos').DataTable({
dom: 'Bfrtip',
buttons: [
{
className: 'btn btn-secondary btn-sm',
text: 'Nuevo Campo',
action: () => {
generateForm('nuevo', null);
}
},
{
className: 'btn btn-secondary btn-sm',
text: 'Editar',
action: (e, dt, node, config) => {
generateForm('editar', dt.row('.selected').data());
},
enabled: false
},
{
extend: 'excel',
className: 'btn btn-secondary btn-sm',
filename: 'tabla_campos'
}
],
select: true,
data: xml,
columns: [
{ data: 'id' },
{ data: 'nombre' },
{ data: 'descripcion' },
{ data: 'fecha_creacion' },
{ data: 'nombre_objeto' }
],
rowId: 'id'
});
function generateForm(button, data) {
var header, action, btnAction = '';
switch(button) {
case 'nuevo':
header = 'Nuevo Campo';
action = 'campos_nuevo';
btnAction = 'Añadir';
break;
case 'editar':
header = 'Editar Campo';
action = 'campos_editar';
btnAction = 'Editar';
break;
}
// Header
$('#formHeader').html(header);
// Campos input
$('#formBody').load('./view/form/createCampos.html', () => {
if(button === 'editar') {
$('#idInput').val(data.id);
$('#nombreInput').val(data.nombre);
$('#descripcionInput').val(data.descripcion);
$('#nombreObjetoInput').val(data.nombre_objeto);
}
});
// Cambiar el action del boton añadir
const ab = document.querySelector('#addButton');
ab.dataset.action = action;
ab.textContent = btnAction;
// Mostrar el Form
mostrarForm();
}
function mostrarForm() {
const bs = require('bootstrap');
var modal = document.getElementById('form');
var bsModal = bs.Modal.getInstance(modal);
if(bsModal === null) bsModal = new bs.Modal(modal);
bsModal.toggle();
}
Cuando se pulsa sobre en uno de los botones de la tabla, llamo a una función que genera el contenido del Modal dependiendo que botón se ha pulsado y al finalizar llamo a la función que muestra el modal.
También llamo a la función de mostrar el Modal, para ocultarlo cuando pulso el botón de añadir nuevo campo o editar el campo:
document.getElementById('addButton').addEventListener
¿Cómo puedo evitar que la siguiente pestaña que seleccione, abra el Modal?
Gracias de antemano.
mostrarForm()
?