4

Necesito condicionar el llamado a una cortina Modal según sea la condición, he intentado de la siguiente forma, me llama ambas ventanas a la vez:

/*Modal Edit */  
  $(document).on("click", ".editAsig", function () {
    //RECEPCIONO LOS PARAMETROS Y ASIGNO A VARIABLES;
    var proy = $(this).data('proy');
    var nomproy = $(this).data('nomproy');
    var zon = $(this).data('zon');
    var num = $(this).data('num');   
    var mue = $(this).data('mue');
    var _token = $('input[name="_token"]').val();
    //AQUI CON AJAX VOY AL CONTROLADOR CON LARUTA INDICADA 
    $.ajax({
      url:"..............",
      method:"POST",
      data:{proy:proy, zon:zon, num:num, mue:mue, _token:_token},  
      success:function(result)
      {
        //OBTENGO RESULTADOS Y SEGÚN ELLO EL MODAL QUE QUIERO MOSTRAR
        if(result == 0){

          //MUESTRO EL MODAL PARA EDITAR LOS REGISTROS
          $(".modal-header #nomproy").text(nomproy);
          $('#editAsig').modal('show');

        }else if(result == 1 ){
          //SI EXISTE UN REGISTRO DEBO MOSTRAR OTRO MODAL Y PARA EVITAR QUE APAREZCA EL MODAL CON FORM DE EDITAR USO LA ETIQUETA DE ABAJO
          $('#editAsig').remove();
          $('#modalAlert').modal('show'); 
        }
      }
    });       
  });   

Me ocurre que cuando obtengo los resultados si "result==1" muestra ambas ventanas modal y si es "result==0" va bien y solo muestra: $('#editAsig').modal('show');

Acá agrego el HTML de donde llamo mi código antes citado:

<td>
  <a href="" data-ruta="" data-id="" data-proy="" data-nomproy="
" data-zon="" data-num="" data-mue="" data-toggle="modal" data-target="#editAsig" class="btn btn-xs btn-primary editAsig" title="Editar"><i class="fa fa-pencil"></i></a>
</td>
5
  • 1
    Hola, ¿podrías agregar también el código html del problema? Commented el 9 ago. 2019 a las 13:38
  • 1
    Qué es eso de Eliminar");?, ahi parece que cierras comillas, pero nunca las abriste. Además, después del punto y coma del moda('show'); parece que falte parte del código o algo.
    – ArianJM
    Commented el 9 ago. 2019 a las 13:42
  • @ArianJM disculpa se me fue ese "Eliminar", omtitelo; la línea termina en: $('#modalAlert').modal('show'); Commented el 9 ago. 2019 a las 13:52
  • @the-breaker cito el código a continuación ======== === <td> <a href="" data-ruta="" data-id="" data-proy="{{$reg->Relpromue_fk_proy}}" data-nomproy="{{$qryProy->proy_nom}}" data-zon="{{$reg->Relpromue_zon}}" data-num="{{$reg->Relpromue_num}}" data-mue="{{$reg->Relpromue_mue}}" data-toggle="modal" data-target="#editAsig" class="btn btn-xs btn-primary editAsig" title="Editar"> <i class="fa fa-pencil"></i> </a> </td> Commented el 9 ago. 2019 a las 13:57
  • No no, agrégalo a la pregunta, lo puedes hacer con la opción "editar" debajo de la pregunta Commented el 9 ago. 2019 a las 13:58

1 respuesta 1

3

Puede ser que tengas algún mal cierre de etiquetas div en tu código y eso provoque el problema. Posibles Problemas:

  1. Verificar usar para cada modal <div class="modal" id="diferente_siempre">.
  2. Si usas .modal("show") remover el data-target.
  3. Usar para el if el === para validar estrictamente por tipo de dato.

Mira agrego un ejemplo con tu caso, código replicado de Bootstrap - Modal

function getAsyncModal(){
   let result = Math.random(0,1) > 0.5 ? 1 : 0
   console.log(result)
   showModal(result)
}

function showModal(result){
   if(result === 0){
      $('#exampleModal').modal('show')
   } else if(result === 1){
      $('#exampleModal2').modal('show')
   }
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<button type="button" onclick="getAsyncModal()">Modal Aleatorio</button>
<button type="button" class="btn btn-primary" onclick="showModal(0)" >If 0</button>
<button type="button" class="btn btn-primary" onclick="showModal(1)" >If 1</button>


<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar 0</button>
        <button type="button" class="btn btn-primary">OK</button>
      </div>
    </div>
  </div>
</div>


<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar 1</button>
        <button type="button" class="btn btn-primary">OK</button>
      </div>
    </div>
  </div>
</div>

4
  • Gracias no es la solución que necesito, mi solución va dada por solo un botón, explico: El usuario da click a un botón, con "$(document).on("click", ".editAsig", function ()" tomo los datos que están en el enlace y a travéz de ajax me voy al controlador, según el resultado que tenga del success debe ser el modal que voy a mostrar. Commented el 9 ago. 2019 a las 14:21
  • 1
    Hé mejorado la respuesta, agregando validacion segun si result es 0 o 1, para este caso funciona, revisa en tu codigo los div de cierre, uso ademas el === para que la comparacion sea extrica con el tipo de dato porque false == 0 da verdadero pero false === 0 da falso
    – Diego Mesa
    Commented el 9 ago. 2019 a las 14:41
  • Gracias Diego Mesa, muy amable. tu ejemplo me ha servido para entender bien lo que ocurría y es que desde uso un ID en el botón donde llamo al modal quien a su vez tiene el mismo ID por eso se me cargaba SI o SI el modal con el FORM de edición independiente del resultado que obtuviera. Commented el 9 ago. 2019 a las 15:17
  • Ok, para evitar eso puede hacer un event.stopPropagation() o event.prevendDefault(), ya que muestras los modalas usando javascript con .modal('show') a los botones les debes remover el data-target y pues si verificar usar id distintos, osea para cada <div class="modal" id="diferente_siempre">
    – Diego Mesa
    Commented el 9 ago. 2019 a las 21:41

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.