Avoid changing tab with javascript

Question

Avoid changing tab with javascript

Navigation

#1 by (2 votes)
#2 by (2 votes)

2

I am working with tabs on my project, the tab I build it like this:

<div class="tab-container">
    <ul class="nav nav-tabs nav-fill" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" data-toggle="tab" id="unidadrecaudadora"  href="#DatosUR" role="tab">Datos Unidad Recaudadora</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" id="encargdo" href="#Encargados">Encargados</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" id="datostransfe"  href="#DatosTrans" role="tab">Datos Transferencia</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" id="aporte" href="#AportParr" role="tab">Aporte Parroquial</a>
        </li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane active fade show" id="DatosUR" role="tabpanel">
        @include('modulos.procesos.unidad_recaudadora.includes.DatosUR')
        </div>
        <div class="tab-pane fade" id="Encargados" role="tabpanel">
        @include('modulos.procesos.unidad_recaudadora.includes.Encargados')
        </div>
        <div class="tab-pane fade" id="DatosTrans" role="tabpanel">
        @include('modulos.procesos.unidad_recaudadora.includes.DatosTransf')
        </div>
        <div class="tab-pane fade" id="AportParr" role="tabpanel">
        @include('modulos.procesos.unidad_recaudadora.includes.AportParr')
        </div>
    </div>
</div>

and the way I'm validating the change is with js at the moment it's like this:

   $('#encargdo').click(function (event) {
    if($('#btnactualizar').attr('disabled') != 'disabled'){
        var mensaje = confirm('los cambios no se han guardado, ¿Desea Continuar?');
        if (!mensaje) {

        }
    }
})

What I'm doing is that on the screen of the collection unit at the time of editing, the update button is enabled, which is what is validated in js at the time of changing the tab if canceling returns false and should not be done the tab change if not keep in the current one,

my problem is that I do not know how to do it I'm not an expert in js and using preventdefault () is not working or I'm not applying it well

javascript jquery php

asked by Pablo Moraga 03.07.2018 в 19:18

source

2 answers

2

Instead of listening to the event click , you should listen to the bootstrap event show.bs.tab like this:

   $('.nav-tabs').on("show.bs.tab", "#encargdo", function (event) {
    if($('#btnactualizar').attr('disabled') != 'disabled'){
        var mensaje = confirm('los cambios no se han guardado, ¿Desea Continuar?');
        if (!mensaje) {
            event.preventDefault();
        }
    }
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="tab-container">
    <ul class="nav nav-tabs nav-fill" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" data-toggle="tab" id="unidadrecaudadora"  href="#DatosUR" role="tab">Datos Unidad Recaudadora</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" id="encargdo" href="#Encargados">Encargados</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" id="datostransfe"  href="#DatosTrans" role="tab">Datos Transferencia</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" id="aporte" href="#AportParr" role="tab">Aporte Parroquial</a>
        </li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane active fade show" id="DatosUR" role="tabpanel">
        @include('modulos.procesos.unidad_recaudadora.includes.DatosUR')
        </div>
        <div class="tab-pane fade" id="Encargados" role="tabpanel">
        @include('modulos.procesos.unidad_recaudadora.includes.Encargados')
        </div>
        <div class="tab-pane fade" id="DatosTrans" role="tabpanel">
        @include('modulos.procesos.unidad_recaudadora.includes.DatosTransf')
        </div>
        <div class="tab-pane fade" id="AportParr" role="tabpanel">
        @include('modulos.procesos.unidad_recaudadora.includes.AportParr')
        </div>
    </div>
</div>

answered by 03.07.2018 в 19:32

How to generate a csv file from a list? Get the remaining time between two Date dates on Android

score 2 · Accepted Answer

You can do it in the following way:

//$('#encargdo').click(function() { //esta linea en vez de la siguiente si quieres que solo se confirme al querer acceder a la tab de encargado.
$('.tab-container .nav-tabs a').click(function() {
  var mensaje = confirm('los cambios no se han guardado, ¿Desea Continuar?');
  if (mensaje) {
     $(this).tab('show')
  } else {
     return false;
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

<div class="tab-container">
    <ul class="nav nav-tabs nav-fill" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" data-toggle="tab" id="unidadrecaudadora"  href="#DatosUR" role="tab">Datos Unidad Recaudadora</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" id="encargdo" href="#Encargados">Encargados</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" id="datostransfe"  href="#DatosTrans" role="tab">Datos Transferencia</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" id="aporte" href="#AportParr" role="tab">Aporte Parroquial</a>
        </li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane active fade show" id="DatosUR" role="tabpanel">
        @include('modulos.procesos.unidad_recaudadora.includes.DatosUR')
        </div>
        <div class="tab-pane fade" id="Encargados" role="tabpanel">
        @include('modulos.procesos.unidad_recaudadora.includes.Encargados')
        </div>
        <div class="tab-pane fade" id="DatosTrans" role="tabpanel">
        @include('modulos.procesos.unidad_recaudadora.includes.DatosTransf')
        </div>
        <div class="tab-pane fade" id="AportParr" role="tabpanel">
        @include('modulos.procesos.unidad_recaudadora.includes.AportParr')
        </div>
    </div>
</div>