0

Tengo un botón con un id:

 <li id="motivo" class="nav-item nav-elemento rounded " ><a class="nav-link" href="#" data-toggle="tooltip" title="Agregar Motivo"  style="position:relative;"> <i class="fas fa-clipboard" style="color:black;font-size:14px;"></i><i class="fas fa-exclamation" style="position: absolute; right:0.25rem;bottom:0.25rem;font-size:0.75rem;color:black;"></i></a></li>

y tengo este codigo de ajax, el cual deseo que cuando doy click al botón de arriba, aparezca una modal de bootstrap con un formulario usando el ajax de aquí abajo

 $('#motivo_rechazo').click(function (ID_SOLICITUD){
  var nombre;
    var solicitudes_id;
    $.map( $('#table_solicitudes_nombre').bootstrapTable('getSelections'), function (row) {
        nombre = row.NOMBRE;
        solicitudes_id = row.solicitudes_id;
    });
   if(!nombre){
        swal({title: "Advertencia",text: "Debe seleccionar una solicitud para generar el motivo.",icon: "warning"}); 
    } else {
    


     });

en ese else, debería tener la modal de bootstrap con un campo de texto con su id y su botón de aceptar para que, cuando el campo se llene, se guarde en la bd

  .then((confirm) => {
            if (confirm) {
                $.ajax({
                    timeout: 30000, //30 segundos
                    url:"controlador/rechazarUsuario",
                    type:"post",
                    datatype:"json",
                    data:{'solicitud_id': solicitud_id,
                        'nombre':nombre},
                    error: function(){
                        $('#no_respuesta').modal('show');
                    },
                    success:function(rechazarUsuario){
                        if(rechazarUsuario){
                            if(rechazarUsuario == 1){
                                swal({title: "Éxito",text: "Solicitud de usuario rechazada.",icon: "success"});
                                $("#modal_solicitar_usuario").modal("hide");
                                update_solicitudes_pendientes();
                            }else{
                                swal({title: "Error",text: "Hubo un problema al rechazar la solicitud.",icon: "error"});
                                $("#modal_solicitar_usuario").modal("hide");
                                update_solicitudes_pendientes();
                            }
                            
                        }
                    }
                });
            }
        })
3
  • Que version de bootstrap estas usando?
    – Lilibeth
    el 9 dic. 2021 a las 16:53
  • la version 4 de bootstrap
    – novato
    el 9 dic. 2021 a las 17:31
  • intentaste? te ha funcionado?
    – Lilibeth
    el 13 dic. 2021 a las 21:57

1 respuesta 1

0

Boton HTML

<li class="nav-item nav-elemento rounded " ><a class="nav-link" href="#motivo" data-toggle="tooltip" title="Agregar Motivo"  style="position:relative;"> <i class="fas fa-clipboard" style="color:black;font-size:14px;"></i><i class="fas fa-exclamation" style="position: absolute; right:0.25rem;bottom:0.25rem;font-size:0.75rem;color:black;"></i></a></li>

Al hacer click se abra el modal

$('a[href$="#motivo"]').on( "click", function() {
   $('#myModal').modal('show');
});

añades el codigo HTML que corresponde al modal

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<!-- Modal -->
<div id="Modal" class="modal fade" role="dialog">
  <div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Modal Header</h4>
  </div>
  <div class="modal-body">
    <p>Some text in the modal.</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
</div>

  </div>
</div>

Y dentro del modal colocas la información que necesites. el resto de tu codigo javascript puedes ponerlo dentro de la funcion click que abre el modal.

Tu Respuesta

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

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