0

Tengo estos 2 div en mi body y son los únicos que tengo.

El primero muestra unas tablas. El segundo tiene un formulario y debe mostrarse cuando haga clic en una de las tablas. Al hacer clic sobre una tabla del primer div estas convocan una función que oculta el div con id="pagina1" y muestra el div con id="pagina2", es decir usando el comando $("#pagina1").hide() y $("#pagina2").show().

El problema es que por alguna razón css no funciona en los 2 div, mas bien solo funciona en el primer div que este declarado.

<div data-role="page" id="pagina1">
        <div data-role="header" data-position="fixed">
            <h1>LISTADO DE REMITOS PENDIENTES </h1>
        </div>
        <div data-role="content">
            <div id="idResultado"></div>
        </div>
    </div>
    <div data-role="page" id="pagina2">
        <div data-role="header" data-position="fixed">
            <h1>Registro de Remito </h1>
        </div>
        <div data-role="content">
            <div class="titlepage">Ingrese los datos </div>
            <div class="ui-field-contain">
                <input type="text" id="txtCodRemito" data-clear-btn="true" placeholder="Codigo Remito" required />
                <input type="datetime-local" id="txtfecha" name="birthdaytime">
                <select id="cbProveedor">
                    <option value="-1">Seleccione un Proveedor</option>
                </select>
                <select id="cbCombustible">
                    <option value="A">Seleccione un Combustible</option>
                    <option value="B">Debe Seleccionar un proveedor para cargar los combustibles</option>
                </select>
                <input type="text" id="txtLitros" data-clear-btn="true" placeholder="Litros Cargados" required />
                <input type="text" id="txtMonto" data-clear-btn="true" placeholder="Monto Total" required />
                <button id="btnCamara">Foto de Remito</button>
                <div style="border: 1px solid; width: 200px; min-height:100px; margin: 0 auto;">
                    <img src="" id="myImage" />
                </div>
                <button id="btnRegistrar">Registrar</button>
            </div>
            <div id="idResultado"></div>
        </div>
    </div>
1
  • ¿Y el css? No sabremos ayudarte si no vemos lo que pone alli, pues quizas el problema esté alli y no en el html
    – masterguru
    Commented el 11 feb. 2022 a las 5:14

2 respuestas 2

0

No veo el código pero si veo que tienes repetido un id, btnRegistrar. Si ese es un botón que usas para llamar a los métodos hide y show vas a tener problemas, y puede ser la causa del error.
Mira esta copia de tu código con un texto donde pulsar para llamar a los métodos y ver que si funcionan.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>

</head>

<body>
  <div data-role="page" id="pagina1">
        <div data-role="header" data-position="fixed">
            <h1>LISTADO DE REMITOS PENDIENTES </h1>
        </div>
            <div data-role="content">
            <div id="idResultado">Click para ocultar est y mostrar pagina2</div>
        </div>
    </div>
    <div data-role="page" id="pagina2">
        <div data-role="header" data-position="fixed">
            <h1>Registro de Remito </h1>
        </div>
        <div data-role="content">
            <div class="titlepage">Ingrese los datos </div>
            <div class="ui-field-contain">
                <input type="text" id="txtCodRemito" data-clear-btn="true" placeholder="Codigo Remito" required />
                <input type="datetime-local" id="txtfecha" name="birthdaytime">
                <select id="cbProveedor">
                    <option value="-1">Seleccione un Proveedor</option>
                </select>
                <select id="cbCombustible">
                    <option value="A">Seleccione un Combustible</option>
                    <option value="B">Debe Seleccionar un proveedor para cargar los combustibles</option>
                </select>
                <input type="text" id="txtLitros" data-clear-btn="true" placeholder="Litros Cargados" required />
                <input type="text" id="txtMonto" data-clear-btn="true" placeholder="Monto Total" required />
                <button id="btnCamara">Foto de Remito</button>
                <div style="border: 1px solid; width: 200px; min-height:100px; margin: 0 auto;">
                    <img src="" id="myImage" />
                </div>
                <button id="btnRegistrar">Registrar</button>
            </div>
            <div id="idResultado">Click para ocultar esta pagina y mostrar pagina1</div>
        </div>
    </div>
<script>
$('#idResultado').click(ocultar);
function ocultar()
  {
     $('#pagina1').hide();  
     $('#pagina2').show();  
  }
$('#idResultado2').click(ocultar2);
function ocultar2()
  {
     $('#pagina2').hide();  
     $('#pagina1').show();  
  }
</script>  
</body>
</html>
0

Resuelto, le quiete el atributo data-role="page" a los 2 div y los a ambos de otro div y a ese div le puse el atributo data-role="page", ahora si funciona

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.