0

Lo que pasa es que se me presento un pequeño problema en un script que lo que hace es que carga items en un ComboBox mediante un id dependiendo que id cargue, aquí esta el código Javascript:

function Opciones() {
    var opc = $('#seguro option:selected').val();
//  $("#DivPension").load("/aplicativos/simulador-pensiones/opciones.jsp", {
    $("#DivPension").load("views/opciones.jsp", {
        opcion: opc
    });
    setTimeout(enlasaEvento, 250);
    enlasaEvento();
}

Lo que hace esta función es invocar un jsp que es el encarga de lanzar los items, que el jsp seria:

<%
    int valor = Integer.parseInt((request.getParameter("opcion")==""?"0":request.getParameter("opcion")));
    if(valor==1){
%>
<select name="pension"  id="pension">
  <option selected="selected" value="">--Seleccione--</option>
    <option name="TdP" value="1" id="TdPInvalidez">Invalidez</option>
    <option name="TdP" value="3" id="TdPVO">Viudez y Orfandad</option>
    <option name="TdP" value="4" id="TdPVI">Viudez</option>
    <option name="TdP" value="5" id="TdPOR">Orfandad</option>
    <option name="TdP" value="6" id="TdPASC">Ascendencia</option>
</select>
<%
    }else if(valor==2){
%>
<select name="pension"  id="pension">
    <option selected="selected" value="">--Seleccione--</option>
    <option name="TdP" value="2" id="TdPIncapacidad">Incapacidad</option>
    <option name="TdP" value="3" id="TdPVO">Viudez y Orfandad</option>
    <option name="TdP" value="4" id="TdPVI">Viudez</option>
    <option name="TdP" value="5" id="TdPOR">Orfandad</option>
    <option name="TdP" value="6" id="TdPASC">Ascendencia</option>
</select>
<%
    }else if(valor==3){
%>
<select name="pension"  id="pension">
    <option selected="selected" value="">--Seleccione--</option>
    <option name="TdP" value="3" id="TdPVO">Viudez y Orfandad</option>
    <option name="TdP" value="4" id="TdPVI">Viudez</option>
    <option name="TdP" value="5" id="TdPOR">Orfandad</option>
    <option name="TdP" value="6" id="TdPASC">Ascendencia</option>
</select>
<%
    }else if(valor==0){
%>

<select name="pension"  id="pension">
    <option selected="selected">--Seleccione--</option>
</select>
<%
    }
%>

Y la pantalla (vista) asi seria al cargar por primera vez:

Asi se presenta la imagen

Y el problema esta aqui:

Aqui desaparece el titulo del segundo comboBox

Por ultimo el HTML seria:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1" />
        <meta name="format-detection" content="telephone=no"/>
        <script src="../comun/js/jquery_v1.11.3.js"></script>
        <script type="text/javascript" src="../comun/js/iframeResizer.contentWindow.min.js"></script>
        <script type="text/javascript" src="../comun/js/EnmascaraV2-AEM.js"></script>
        <link rel="stylesheet" href="css/style_MD.css">

        <script type="text/javascript" src="js/DataLayer/dataLayer.js"></script><!--listo-->
        <script type="text/javascript" src="js/DataLayer/dataLayer_.js"></script><!--listo-->
        <script type="text/javascript" src="js/DataLayer/funciones_dataLayer.js"></script><!--listo-->

        <script src="//assets.adobedtm.com/95bb966a4c61b200a089c37679aaf96e22114787/satelliteLib-fbdb84ebd99368b1f7fb97b75596c095b9f7ee40-staging.js"></script>

        <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <!--listo-->
        <script type="text/javascript" src="js/seleccion.js"></script><!--listo-->

        <script src="//assets.adobedtm.com/95bb966a4c61b200a089c37679aaf96e22114787/mbox-contents-a552a4edacd46d5f42cf557b1157973f26c55845.js"></script>


        <script>
            $(document).ready(function () {
                $('#seguro').val('');
                $('#pension').val('');
            });

        </script>
    </head>
    <body>
        <div class="container">
            <h1>Simulador Pensión</h1>
            <h2>Descubre a través de este simulador, cual podría ser un aproximado del monto de Pensión que
                recibirás de acuerdo a los datos que nos proporciones.</h2>
            <form>

                <div class="botonera">      
                    <div id="bt_div" class="derecha">
                        <div class="group">
                            <select class="select" name="seguro" class="Caja_txt_246" tabindex="9" id="seguro" onchange="Opciones()" >
                                <option value="" selected="">--Seleccione--</option>
                                <option value="1" id="TDSIV">Invalidez y Vida</option>
                                <option value="2" id="TDSRT">Riesgo de trabajo</option>
                                <option value="3" id="TDSRCV">Retiro y Cesantía</option>
                            </select>
                             <label class="combo">Tipo de Seguro</label>
                        </div>
                    </div>
                    <div id="bt_div" class="izquierda">
                        <div class="group" id="DivPension">
                            <select name="pension" class="Caja_txt_246" id="pension" tabindex="9">
                                <option value="" selected="">--Seleccione--</option>
                            </select>


                            <label class="combo">Tipo de Pensión</label>
                        </div>
                    </div>
                </div>



                <div class="botonera">      
                    <div id="bt_div" class="izquierda">
                        <button type="submit" id="loginButton"  onclick="validar(event);" >Siguiente</button>
                    </div>
                </div>          
            </form>
        </div>
    </body>
</html>

La verdad no sé que hacer con este problema, ya que había solucionado un problema en validar los campos si están vacíos mediante el evento "event.preventDefault();" y ya quedo, espero y me puedan ayudar, de antemano les mando un cordial saludo.

Como un detalle mas, el .load es el que carga el contenido del jsp y al igual me borra el label del input.

1 respuesta 1

1

La función .load de jQuery cargará el contenido HTML de la URL y lo pondrá en el elmento que se indica en el selector. Por ejemplo:

$("#DivPension").load("views/opciones.jsp", {
    opcion: opc
});

Cargará el contenido de views/opciones.jsp en el div #DivPension. Eso significa que se sustituirá el contenido completo de #DivPension por el del código cargado via AJAX. Y ahí es donde está el problema, porque ese div se ve así:

<div class="group" id="DivPension">
    <select name="pension" class="Caja_txt_246" id="pension" tabindex="9">
        <option value="" selected="">--Seleccione--</option>
    </select>


    <label class="combo">Tipo de Pensión</label>
</div>

Con lo cual cuando se carguen los valores por AJAX, no sólo se borrará el select sino también el label que quieres que se mantenga. Una opción para solucionar esto sería devolver el label también a través del JSP. Por ejemplo:

<%
    int valor = Integer.parseInt((request.getParameter("opcion")==""?"0":request.getParameter("opcion")));
    if(valor==1){
%>
<select name="pension"  id="pension">
  <option selected="selected" value="">--Seleccione--</option>
    <option name="TdP" value="1" id="TdPInvalidez">Invalidez</option>
    <option name="TdP" value="3" id="TdPVO">Viudez y Orfandad</option>
    <option name="TdP" value="4" id="TdPVI">Viudez</option>
    <option name="TdP" value="5" id="TdPOR">Orfandad</option>
    <option name="TdP" value="6" id="TdPASC">Ascendencia</option>
</select>
<label class="combo">Tipo de Pensión</label>
<%
    }else if(valor==2){
%>
<select name="pension"  id="pension">
    <option selected="selected" value="">--Seleccione--</option>
    <option name="TdP" value="2" id="TdPIncapacidad">Incapacidad</option>
    <option name="TdP" value="3" id="TdPVO">Viudez y Orfandad</option>
    <option name="TdP" value="4" id="TdPVI">Viudez</option>
    <option name="TdP" value="5" id="TdPOR">Orfandad</option>
    <option name="TdP" value="6" id="TdPASC">Ascendencia</option>
</select>
<label class="combo">Tipo de Pensión</label>
<%
    ....

Otra opción, que no sé si es posible porque no sé cómo está estructurado tu código HTML/CSS/JS completo, sería mover #DivPension un nivel más abajo. Algo como esto:

<div class="group">
    <div id="DivPension">
        <select name="pension" class="Caja_txt_246" id="pension" tabindex="9">
            <option value="" selected="">--Seleccione--</option>
        </select>
    </div>

    <label class="combo">Tipo de Pensión</label>
</div>

De este modo sólo se sustituirá el select, manteniendo el label.

2
  • Hola @Alvaro Montaro De echo si funciona las dos opciones que me das, pero la que opté mas fue la segunda opción, muchas gracias por la gran ayuda que me diste, te lo agradezco, saludos donde quieras que estes, amigo! :) Commented el 17 nov. 2017 a las 19:44
  • Me alegro que te hayan servido las dos respuestas. Si esto solucionó tu problema, deberías marcar la respuesta como aceptada en la parte superior izquierda de la misma.
    – Alvaro Montoro
    Commented el 17 nov. 2017 a las 20:10

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.