2

A continuación, os muestro el código con las vistas "Titulación" y "Portada" además del código jQuery del botón "nuevo"

Código HTML 5 (Grails)

Vista: "Titulación"

<!DOCTYPE html>
<html>

<head>
    <meta name="layout" content="layoutPlantilla">
    <title>Titulación</title>

    <!-- Enlaza los estilos de los ficheros '.css' -->
    <asset:stylesheet src="estilosGeneracionGuiasDocentes/estilosCabeceras.css"/>
    <asset:stylesheet src="estilosGeneracionGuiasDocentes/validaciones.css"/>

    <!-- Enlaza el codigo de ficheros jQuery -->
    <asset:javascript src="javascriptGeneracionGuiasDocentes/jQuerySelectores.js"/>
    <asset:javascript src="javascriptGeneracionGuiasDocentes/jQueryBotones.js"/>
    <asset:javascript src="javascriptGeneracionGuiasDocentes/jQueryMensajes.js"/>
    <asset:javascript src="javascriptGeneracionGuiasDocentes/jQueryAjax.js"/>

    <script>
        var enlaceObjetos = {
            urlTitulacion: "${createLink(controller:"Titulacion", action:"selectTitulacion")}",
            urlAsignatura: "${createLink(controller:"Titulacion", action:"selectAsignatura")}",
            urlValidaGuia: "${createLink(controller:"GuiaDocente", action:"validaGuiaDocente")}",
            urlBusquedaGuia: "${createLink(controller:"MenuGuiasDocentes", action:"index")}"
        }
    </script>
</head>

<body>
    <g:if test="${session.getAttribute("e-mail")}">

        <form id="idFormTitulacion">
            <div class="container-fluid text-center">
                <div class="row content">

                    <div class="col-sm-12 text-left">
                        <h1>Titulación</h1>
                        <hr>

                        <!-- Titulacion -->
                        <div class="form-group">
                            <label for="titulacion">Titulación</label>

                            <!-- Muestra mensaje de error si no se selecciona en el select 'titulacion' -->
                            <label class="error errorTitulacion" for="titulacion"></label>

                            <select id="titulacion" name="titulacion" class="form-control select">
                                    <option value="" hidden>Seleccione opción...</option>
                                    <option value="vacio"></option>
                                <g:each in="${consultaTitulacion}" var="indice">
                                    <option>${indice}</option>
                                </g:each>
                            </select>
                        </div>

                        <!-- Asignatura en espanol-->
                        <div class="form-group">
                            <label for="asignatura">Asignatura</label>

                            <!-- Muestra mensaje de error si no se selecciona en el select 'asignatura' -->
                            <label class="error errorAsignatura" for="asignatura"></label>

                            <select id="asignatura" name="asignatura" class="form-control titulacion select">
                                    <option value="" hidden>Seleccione opción...</option>
                                    <option value="vacio"></option>
                                <g:each in="${consultaAsignatura}" var="indice">
                                    <option>${indice}</option>
                                </g:each>
                            </select>
                        </div>

                        <!-- curso academico -->
                        <div class="form-group">
                            <label for="cursoAcademico">Curso académico</label>

                            <!-- Muestra mensaje de error si no se selecciona en el select 'cursoAcademico' -->
                            <label class="error errorCursoAcademico" for="cursoAcademico"></label>

                            <select id="cursoAcademico" name="cursoAcademico" class="form-control select">
                                <option value="" hidden>Seleccione opción...</option>
                                <option value="vacio"></option>
                                <option value="2016/17">2016/17</option>
                                <option value="2017/18">2017/18</option>
                                <option value="2018/19">2018/19</option>
                            </select>
                        </div>

                        <!-- Modalidad -->
                        <div class="form-group">
                            <label for="modalidad">Modalidad</label>

                            <!-- Muestra mensaje de error si no se selecciona en el select 'modalidad' -->
                            <label class="error errorModalidad" for="modalidad"></label>

                            <select id="modalidad" name="modalidad" class="form-control select">
                                <option value="" hidden>Seleccione opción...</option>
                                <option value="vacio"></option>
                                <option value="Presencial">Presencial</option>
                                <option value="Semipresencial">Semipresencial</option>
                                <option value="A distancia">A distancia</option>
                             </select>
                        </div>

                    </div>
                </div>

                <button id="botonNuevo" type="button" class="btn btn-primary">Nuevo</button>
                <button id="botonBuscar" type="button" class="btn btn-primary">Buscar</button>

            </div>

        </form>
    </g:if>
</body>

</html>

Vista: "Portada"

<!DOCTYPE html>
<html>

<head>
    <title>Portada</title>
    <meta name="layout" content="layoutPlantilla" />

    <!-- Enlaza los estilos de los fichero '.css' -->
    <asset:stylesheet src="estilosGeneracionGuiasDocentes/estilosCabeceras.css"/>
    <asset:stylesheet src="estilosGeneracionGuiasDocentes/validaciones.css"/>
    <asset:stylesheet src="estilosGeneracionGuiasDocentes/estilosToast.css"/>

    <!-- Enlaza el codigo de los ficheros jQuery -->
    <asset:javascript src="javascriptGeneracionGuiasDocentes/jQuerySelectores.js"/>
    <asset:javascript src="javascriptGeneracionGuiasDocentes/jQueryBotones.js"/>
    <asset:javascript src="javascriptGeneracionGuiasDocentes/jQueryMensajes.js"/>
    <asset:javascript src="javascriptGeneracionGuiasDocentes/jQueryTextos.js"/>
    <asset:javascript src="javascriptGeneracionGuiasDocentes/jQueryAjax.js"/>
    <asset:javascript src="javascriptGeneracionGuiasDocentes/jQueryToast.js"/>
    <asset:javascript src="javascriptGeneracionGuiasDocentes/jQueryPaginacion.js"/>

    <script>
        var enlaceObjetos = {
            urlTitulacion: "${createLink(controller:"Titulacion", action:"selectTitulacion")}",
            urlAsignatura: "${createLink(controller:"Titulacion", action:"selectAsignatura")}",
            urlValidaGuia: "${createLink(controller:"GuiaDocente", action:"validaGuiaDocente")}",
            urlInsercionPortada: "${createLink(controller:"GuiaDocente", action:"insercionPortada")}",
            urlIdGuiaDocente: "${createLink(controller:"GuiaDocente", action:"idGuiaDocente")}"
        }
    </script>
</head>

<body>
    <g:if test="${session.getAttribute("e-mail")}">

        <form id="idFormPortada">
            <div class="container-fluid text-center">
                <div class="row content">

                    <div class="col-sm-12 text-left">
                        <h1>Portada</h1>
                        <hr>

                        <!-- Titulacion -->
                        <div class="form-group">
                            <label for="titulacion">Titulacion</label>
                            <select id="titulacion" name="titulacion" class="form-control portada">
                                    <option hidden>${titulacion}</option>
                                <g:each in="${consultaTitulacion}" var="indice">
                                    <option>${indice}</option>
                                </g:each>
                            </select>
                        </div>

                        <!-- Asignatura en espanol-->
                        <div class="form-group">
                            <label for="asignatura">Asignatura en español</label>
                            <select id="asignatura" name="asignatura" class="form-control">
                                    <option hidden>${asignatura_esp}</option>
                                <g:each in="${consultaAsignatura}" var="indice">
                                    <option>${indice}</option>
                                </g:each>
                            </select>
                        </div>

                        <!-- Asignatura en ingles -->
                        <div class="form-group">
                            <label for="asignatura_ing">Asignatura en inglés</label>
                            <input id="asignatura_ing" name="asignatura_ing" class="form-control portada" value="${asignatura_ing}" type="text">
                        </div>

                        <!-- Curso academico -->
                        <div class="form-group">
                            <label for="cursoAcademico">Curso academico</label>
                            <select id="cursoAcademico" name="cursoAcademico" class="form-control" >
                                <option hidden>${cursoAcademico}</option>
                                <option>2016/17</option>
                                <option>2017/18</option>
                                <option>2018/19</option>
                            </select>
                        </div>

                        <!-- Modalidad -->
                        <div class="form-group">
                            <label for="modalidad">Modalidad</label>
                            <select id="modalidad" name="modalidad" class="form-control">
                                <option hidden>${modalidad}</option>
                                <option>Presencial</option>
                                <option>Semipresencial</option>
                                <option>A distancia</option>
                            </select>
                        </div>

                    </div>
                </div>

                <div id="btnHabilitado" hidden>
                    <!-- boton indice -->
                    <button type="button" class="btn btn-primary botonIndice">Indice</button>

                    <!-- boton guardar -->
                    <button type="button" class="btn btn-primary botonInsertar">Guardar</button>

                    <!-- paginacion -->
                    <nav aria-label="...">
                        <ul class="pagination">
                            <li class="page-item disabled">
                                <a class="page-link" tabindex="-1">Anterior</a>
                            </li>

                            <!-- pagina actual -->
                            <li class="page-item active">
                                <a href="#">1</a>
                            </li>

                            <li class="page-item"><a href="#" class="opcAsignatura">2</a></li>
                            <li class="page-item"><a href="${createLink(action: "descripcionAsignatura")}">3</a></li>
                            <li class="page-item"><a href="${createLink(action: "requisitosPrevios")}">4</a></li>
                            <li class="page-item"><a href="${createLink(action: "objetivos")}">5</a></li>

                            <li class="page-item">
                                <a href="#" class="opcAsignatura">Siguiente</a>
                            </li>
                        </ul>
                    </nav>
                </div>

                <div id="btnDeshabilitado">
                    <!-- boton indice -->
                    <button type="button" class="btn btn-primary botonIndice" disabled>Indice</button>

                    <!-- boton guardar -->
                    <button type="button" class="btn btn-primary botonInsertar">Guardar</button>

                    <!-- paginacion -->
                    <nav aria-label="...">
                        <ul class="pagination">
                            <li class="page-item disabled">
                                <a class="page-link" tabindex="-1">Anterior</a>
                            </li>

                            <!-- pagina actual -->
                            <li class="page-item active disabled">
                                <a>1</a>
                            </li>

                            <li class="page-item disabled"><a>2</a></li>
                            <li class="page-item disabled"><a>3</a></li>
                            <li class="page-item disabled"><a>4</a></li>
                            <li class="page-item disabled"><a>5</a></li>

                            <li class="page-item disabled">
                                <a>Siguiente</a>
                            </li>
                        </ul>
                    </nav>
                </div>

            </div>

        </form>
    </g:if>

    </body>
</html>

Código jQuery (botón "nuevo")...

//--- boton nuevo ---
    $("#botonNuevo").click(function () {

        //Borra todos los errores mostrados en pantalla
        $("label.error").text("");

        if(compruebaSeleccioneOpcion() === true && compruebaSeleccionBlanco() === true){

            URL = enlaceObjetos.urlValidaGuia;
            validaGuia = $("#idFormTitulacion").serialize();

            //peticion ajax para validar la guia docente
            peticionConDatosCallBackAjax(URL, validaGuia, function (data){

                if(data.toString() === ""){

                    //si no existe la guia docente, se accede al formulario
                    window.location.href = '/GuiaDocente/index' +
                        '?titulacion=' + opcionTitulacion +
                        '&asignatura=' + opcionAsignatura +
                        '&cursoAcademico=' + opcionCursoAcademico +
                        '&modalidad=' + opcionModalidad;

                }else{

                    var mensaje = " La guía docente seleccionada ya existe.";
                    showDialogo(mensaje);
                }
            });

                return false;

Quiero que al pulsar el botón "Nuevo" de la vista "Titulación" me redirija a la vista "Portada" y me oculte el <div id="btnDeshabilitado">

NOTA: La redirección de la vista "Titulación" a la vista "Portada", funciona correctamente.

4
  • ¿A qué te refieres con otra vista?
    – Alvaro Montoro
    el 1 ago. 2017 a las 18:57
  • Me refiero que al pulsar el "botón 1" (vista 1), me redirija a la vista 2 y me oculte el "botón 2". el 1 ago. 2017 a las 19:00
  • Tu html de tus vistas? el 1 ago. 2017 a las 19:05
  • He modificado prácticamente todo el contenido de la pregunta. Os muestro las dos vistas y el código jQuery. Disculpen las molestias. el 1 ago. 2017 a las 19:47

3 respuestas 3

2

En general, cuando queremos modificar el contenido o apariencia de una página desde otra, necesitamos una forma de comunicarlas. A mi juicio, la más práctica es el hash.

El hash de una URL es lo que viene después del símbolo #:

http://misitio.com/preguntas_frecuentes.php?orden=alfabetico#pregunta1

Usualmente el hash sirve para indicarle al navegador que queremos que nos dirija a un elemento determinado de la página. En el ejemplo de arriba, queremos que nos dirija al elemento con la ID pregunta1:

<div id="pregunta1">
    <h1>¿Qué es un hombre?</h1>
    <p>Una miserable pilita de secretos.</p>
</div>

Peeero, resulta que podemos leer el hash de una URL desde JavaScript muy fácilmente, así que podemos aprovecharnos de esta feature para resolver tu consulta.

En la vista Titulación agregamos un hash al final de la URL:

                //si no existe la guia docente, se accede al formulario
                window.location.href = '/GuiaDocente/index' +
                    '?titulacion=' + opcionTitulacion +
                    '&asignatura=' + opcionAsignatura +
                    '&cursoAcademico=' + opcionCursoAcademico +
                    '&modalidad=' + opcionModalidad +
                    '#ocultar-boton';

En la vista Portada leemos el hash y decidimos si ocultar el botón:

$(function() {
    if (window.location.hash == '#ocultar-boton') {
        $("#btnDeshabilitado").hide();
    }
});
1
  • Tu solución ha funcionado a la perfección, ha hecho exactamente lo que yo quería. ¡Muchas gracias! el 2 ago. 2017 a las 18:03
0

Podes hacer todo en un mismo documento. Si es como yo entendi que queres hacer, pone en un div toda la Vista1 y en otro la Vista2, cuando el documento carge ocultas la Vista2 con la fucion hide() de jQuery y cuando se haga click en el boton Nuevo mostras(show()) la Vista2 y ocultas la Vista1, o no, y el boton.

0

Podés poner un cookie desde jQuery, usando js-cookie https://github.com/js-cookie/js-cookie

Al presionar el botón pones el cookie.

Cookies.set('boton', 'presionado');

En la vista portada buscas si el cookie existe. Y si existe ocultas el div.

var botonPresionado = cookies.get('boton'); 
if(botonPresionado == 'presionado')  {
   // aca ocultamos el div
}

Y, ante el evento en que el div debería estar nuevamente disponible, borras el cookie.

Cookies.remove('boton', { path: '' });

El código no esta testeado asi que puede fallar. Pero algo así tambien te podría funcionar suerte!

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.