0

estoy intentando cerrar modal al eliminar un registro, esto me funciona correctamente, pero después eliminar, a ir a otro registro para eliminar, no me levanta el modal de eliminar. Estoy usando jsp y servlet, y tengo unas validaciones en el servlet usando jquery,y en el servlet es donde está el botón que abre el modal por bootstrap y para poder habrir el modal despues de cerrarlo con hide(), hice una funcion jquery en el servlet para abrir el modal nuevamente al presionar dicho botón. El problema es que aun así el modal se abre y se cierra altiro.

Aquí el código de jquert

     function eliminarTramosReservasAjax()
{

 var numTramoReservaAjax = $("#txtIdTramosReservaAjax").val();

$.ajax({
  url: "eliminarTramoReservaVueloAjaxServlet.do",
  data: {
   numTramoReservaJS : numTramoReservaAjax
  },
  success: function( result ) {
    $( "#idResultadoEliminarTramoReserva").html( result);
    mostrarRutaReservaPorAjax();
    $("#modalTramoReservaEliminar").modal("hide");
    //$("body").removeClass("modal-open");
    //$(".modal-backdrop").remove();
  }
}

);

acá el servlet que al final tiene las funciones de jquery

    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
    response.setContentType("text/html;charset=UTF-8");

    Reserva rv =new Reserva();
    Cliente c=new Cliente();

    TramoReservaDao trDao=new TramoReservaDao();
    Connection conn = ConexionMysqlCargomove_db.getInstance().getConnection();

    rv.setNumeroReserva(Integer.parseInt(request.getParameter("numeroReservaAjax")));

    ResultSet res=(ResultSet)trDao.verTramoReservas(rv);
    ArrayList<TramoReserva> rutaReserva = new ArrayList<TramoReserva>();
    ArrayList<Reserva> verReserva = new ArrayList<Reserva>();
    ArrayList<LineaAerea> lineaReserva = new ArrayList<LineaAerea>();


    if(res==null)
    {
        String error="No se encontraron datos";
        request.getSession().setAttribute("error", error);
        request.getRequestDispatcher("errorVerReservas.jsp").forward(request, response);
    }

    else
    {
        try
        {
            while(res.next())
            {
                rutaReserva.add(new TramoReserva(res.getInt("COD_SEQ_TVAS"),res.getString("ORI_TVAS"),res.getString("DES_TVAS"),res.getString("FECH_VLO_TVAS"),res.getString("FECH_SALIDA_TVAS"),res.getString("FECH_LLEGADA_TVAS"),res.getString("EST_TVAS"),res.getInt("PIEZAS_TVAS"),res.getDouble("KILOS_TVAS"),res.getDouble("VOLUMEN_TVAS"),res.getString("NOTAS_TVAS"),res.getDouble("TARIFA_TVAS"),res.getString("TPO_MONEDA_TVAS"),res.getInt("NUM_VLO_TVAS")));
                verReserva.add(new Reserva(res.getInt("RVAS_COD_SEQ_RVAS")));
                lineaReserva.add(new LineaAerea(res.getString("LNAR_COD_LNAR")));

            }
            request.getSession().setAttribute("rutaReserva", rutaReserva);
            request.getSession().setAttribute("verReserva", verReserva);
            request.getSession().setAttribute("lineaReserva", lineaReserva);



        }
        catch(SQLException ex)
        {
            java.util.logging.Logger.getLogger(VerTramoReservaServlet.class.getName()).log(Level.SEVERE, null, ex);
        }
        PrintWriter out = response.getWriter();
        try {

        out.println("<!DOCTYPE html>");
        out.println("<html>");
        out.println("<head>");
        out.println("<title>Servlet VerRutaResevaClienteServlet</title>");  

        out.println("</head>");
        out.println("<body>");

        out.println("<table class='table table-condensed table-hover' id='tablaResultadoTramoReservas'>");
            out.println("<thead class='input-sm'>");
                        out.println("<tr>");
                            out.println("<th style='display:none'>ID</th>");
                            out.println("<th>Origen</th>");
                            out.println("<th>Destino</th>");
                            out.println("<th style='display:none'>Fecha Vuelo</th>");
                            out.println("<th>F Salida</th>");
                            out.println("<th>F Llegada</th>");
                            out.println("<th>Estado</th>");
                            out.println("<th>Piezas</th>");
                            out.println("<th>Kilos</th>");
                            out.println("<th>Volumen</th>");
                            out.println("<th style='display:none'>Notas</th>");
                            out.println("<th>Tarifa</th>");
                            out.println("<th>Tipo Moneda</th>");
                            out.println("<th style='display:none'>Nº Reserva</th>");
                            out.println("<th>Linea Aerea</th>");
                            out.println("<th>Numero Vuelo</th>");
                            out.println("<th>Acción</th>");
                        out.println("</tr>");
            out.println("</thead>");

        for(int i=0;i<rutaReserva.size();i++)
         {
            out.println("<tbody class='input-sm'>");
                out.println("<tr>");
                    out.println("<td style='display:none'>"+rutaReserva.get(i).getIdTramoReserva()+"</td>");
                    out.println("<td>"+rutaReserva.get(i).getOrigenTramoReserva()+"</td>");
                    out.println("<td>"+rutaReserva.get(i).getDestinoTramoReserva()+"</td>");
                    out.println("<td style='display:none'>"+rutaReserva.get(i).getFechaVueloTramoReserva()+"</td>");
                    out.println("<td>"+rutaReserva.get(i).getFechaSalidaTramoReserva()+"</td>");
                    out.println("<td>"+rutaReserva.get(i).getFechaSalidaTramoReserva()+"</td>");
                    out.println("<td>"+rutaReserva.get(i).getEstadoTramoReserva()+"</td>");
                    out.println("<td>"+rutaReserva.get(i).getPiezasTramoReserva()+"</td>");
                    out.println("<td>"+rutaReserva.get(i).getKilosTramoReserva()+"</td>");
                    out.println("<td>"+rutaReserva.get(i).getVolumenTramoReserva()+"</td>");
                    out.println("<td style='display:none'>"+rutaReserva.get(i).getNotasTramoReservas()+"</td>");
                    out.println("<td>"+rutaReserva.get(i).getTarifaTramoReserva()+"</td>");
                    out.println("<td>"+rutaReserva.get(i).getTpoMonedaTramoReserva()+"</td>");
         }
         for(int i=0;i<verReserva.size();i++)
         {
             out.println("<td style='display:none'>"+verReserva.get(i).getNumeroReserva()+"</td>");
         }
         for(int i=0;i<lineaReserva.size();i++)
         {
                out.println("<td>"+lineaReserva.get(i).getCodigoLineaAerea()+"</td>");
                System.out.println("Linea aerea:"+lineaReserva.get(i).getCodigoLineaAerea());
         }
         for(int i=0;i<rutaReserva.size();i++)
         {
             out.println("<td>"+rutaReserva.get(i).getNumVueloTramoReserva()+"</td>");
             out.println("<td><button type='button'  class='btn btn-danger glyphicon glyphicon-trash btn-xs' data-toggle='modal' data-target='#modalTramoReservaEliminar' style='font-size:19px' onclick='abrirModal()'></button></td>");
         }


    } 
    catch(java.lang.NullPointerException ex)
      {


          out.println("<td><p>No se encontraron datos</p></td>");
                out.println("</tr>");

            out.println("</tbody>");

      out.println("</table>");

      }

out.println("<!------------------------INICIO FUNCION PARA ENVIAR EL ID DEL TRAMO DE LA RESERVA AL MODAL ELIMINAR TRAMOS RESERVA-------------->");

out.println("<script>");


out.println("$(document).ready(function () {");


out.println("$('#tablaResultadoTramoReservas tbody tr').on ('click',function (event) {");
out.println("var idTramoReservas= $(this).find('td:first-child').html();");
out.println("$('#txtIdTramosReservaAjax').val(idTramoReservas);");
out.println("});");
out.println("});");
out.println("</script>");

out.println("<!------------------------INICIO FUNCION PARA ENVIAR EL ID DEL TRAMO DE LA RESERVA AL MODAL ELIMINAR TRAMOS RESERVA-------------->");

/**FUNCTION ABRIR MODAL ELIMINAR**/

out.println("<script>");

out.println("function abrirModal()");
out.println("{");
out.println("$('#modalTramoReservaEliminar').modal('show');");
out.println("}");
out.println("</script>");
out.println("</body>");
out.println("</html>"); 

}
}

Aquí el codigo de la pagina jsp con el modal

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Air Express Admin</title>




<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
<script src="sweetalert2.all.min.js"></script>
</head>
<body>

<div id="modalTramoReservaEliminar" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header btn-danger">

<button type="button" class="close" data-dismiss="modal">&times;</button>
<h3 class="modal-title" style="color: white"><span class="glyphicon glyphicon-trash"></span> Eliminar</h3>
</div>


<div class="modal-body">
<div class="left container-fluid">
<div class="panel-heading"></div>
<div class="panel-body panel panel-warning">

<form method="POST">

<h4>Deseas quitar el tramo de tu reserva Nº:<input type="text"  id="txtIdTramosReservaAjax" class="input-sm" size="1" name="txt_num_tramo_reserva" readonly="readonly" style="font-size:13pt; border:0;">?</h4>

<br>

</form>

<div class="container-fluid" id="idResultadoEliminarTramoReserva"></div>

</div>
</div>

</div>

<div class="modal-footer">

<button type="button" class="btn btn-danger btn-sm" onclick="eliminarTramosReservasAjax()"><span class="glyphicon glyphicon-trash"></span> Eliminar</button>

<button class="btn btn-default btn-sm" type="button" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cerrar </button>

</div>
</div>
</div>
</div>  
</body>

</html>

1 respuesta 1

1

El problema esta en que estas enviando el Formulario y esto produce la recarga de la pagina ( osea todo volverá al estado inicial ) , debe quitar el formulario y el atributo data-target, muestras el modal solo por javascript, ademas de agregar event.preventDefault y event.stopPropagation para evitar el envió o propagación de otros eventos.

Aquí un ejemplo.

function askEliminar(element){
  event.stopPropagation()
  event.preventDefault()
  let id = element.dataset.reserva
  $('#elid').val(id)
  $('#modal_1').modal('show')
  console.log('Ask elimiminar '+ id )
}

function sendEliminar(){
   // $.ajax..
   console.log('Eliminado '+$('#elid').val() )
}
<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>

<table class="table">
<thead><th>Dato</th><th>Accion</th></thead>
<tbody>
<tr>
  <td>Reserva 1</td><td>
  <a data-reserva="1" onclick="askEliminar(this)">Eliminar</a></td></tr>
<tr>
  <td>Reserva 2</td>
  <td><a data-reserva="2" onclick="askEliminar(this)">Eliminar</a></td></tr>
</tbody>
</table>

<div class="modal" id="modal_1">
  <input value="" id="elid" name="elid" disabled hidden>
  <a class="btn btn-primary" onclick="sendEliminar()">Si</a>
  <button class="close" data-dismiss="modal" aria-label="Close">No</button>
</div>

2
  • Hola compañero, no es eso, ahora modifique el código , yo no estoy mandando el formulario, si te fijas en la función de jquery utilizo ajax y en la url va el servlet , lo que pasa es que en el modal eliminar tenía de antes el action re-direccionado al servlet , pero los botones son type button. el problema lo tengo en los eventos hide() y show(), igual podría servir la forma que me explicas. Commented el 10 ago. 2019 a las 20:46
  • He editado la respuesta según tu comentario.
    – Diego Mesa
    Commented el 12 ago. 2019 a las 2:26

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.