2

Tengo el siguiente modal:

<div class="modal fade" id="TanqueBajo" role="dialog">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Tanque Bajo y Pozos</h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label for="txtTanqueBajoInspeccionados">Inspeccionados:</label>
          <input id="txtTanqueBajoInspeccionados" name="txtTanqueBajoInspeccionados" type="number" class="form-control" placeholder="Número de inspeccionados">
        </div>
      </div>
      <div class="modal-footer">
        <button id="btTanqueBajo" type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
      </div>
    </div>
  </div>
</div>

Que lo llamo al hacer clic el siguiente botón:

<button id="btTanqueBajo" type="button" class="btn btn-default btn-block" data-toggle="modal" data-target="#TanqueBajo">Tanque Bajo y Pozo</button>

Deseo cambiar la clase del botón, después de cerrar el modal, para ello tengo la siguiente función:

$(document).ready(function() {
$('#TanqueBajo').on('hidden.bs.modal', function(e) { document.getElementById("btTanqueBajo").className = 'btn btn-primary btn-block';});
});

Pero no me funciona. Podrían ayudarme indicándome que estoy haciendo mal o alguna otra alternativa de solución. Gracias de antemano.

4
  • Probé tu código y si me funciona => codepen, ¿Estás seguro que estás llamando a las librerías de javascript correspondientes?
    – user22721
    Commented el 7 abr. 2018 a las 4:01
  • Podrías también cambiar la clase del botón al momento de pulsar este, ej: $('#btTanqueBajo').on('click'...
    – fwBasic
    Commented el 7 abr. 2018 a las 12:57
  • Estimado @KacosPro, paree que es lo que indicas, podrías indicarme que librerías exactas son las que debería llamar? Estoy llamando al jquery y bootstrap, pero tal vez no sea las versiones correctas. Commented el 7 abr. 2018 a las 14:13
  • 1
    Muchas gracias @KacosPro, ya di con el error, tenías dos versiones JQuery jalando y se cruzaban, me quedé con una y quedó bien. Commented el 7 abr. 2018 a las 14:35

2 respuestas 2

0

espero te sriva

var element = $('#btTanqueBajo');
$('#classA').text("Clase inicial : "+element.attr("class"));

$("#TanqueBajo").on('hidden.bs.modal', function() {
  element.attr("class", "btn btn-primary btn-block");
  $('#classN').text("Clase actual : "+element.attr("class"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<button id="btTanqueBajo" type="button" class="btn btn-default btn-block" data-toggle="modal" data-target="#TanqueBajo">Tanque Bajo y Pozo</button>
<p id="classA"></p>
<p id="classN"></p>


<!-- Modal -->
<div class="modal fade" id="TanqueBajo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

2
  • Gracias @Hector Lara, efectivamente estaba llamando mal las librerías, tenía a dos versiones jquery jalando y parece que se cruzaban. Muchas gracias. Commented el 7 abr. 2018 a las 14:33
  • @AlcibiadesPalestini un placer ayudar hermano Commented el 7 abr. 2018 a las 14:42
-1

Otra solución podría ser cambiar la clase del botón al momento de pulsar este.

Ejemplo: Cambiar

$(document).ready(function() {
$('#TanqueBajo').on('hidden.bs.modal', function(e) { document.getElementById("btTanqueBajo").className = 'btn btn-primary btn-block';});
});

Por

$(document).ready(function() {
$('#btTanqueBajo').on('click', function(e) { document.getElementById("btTanqueBajo").className = 'btn btn-primary btn-block';});
});
1
  • El OP también solicitaba alguna otra alternativa de solución al problema, entonces porque calificar negativo la respuesta!!
    – fwBasic
    Commented el 7 abr. 2018 a las 13:57

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.