Hide a 'div' from another view with jQuery

Navigation
2

Next, I show you the code with the views "Title" and "Cover" plus the jQuery code of the "new" button

HTML 5 (Grails) code

View: "Titling" 

<!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>

View: "Cover" 

<!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>

jQuery code ( "new" button ) ... 

//--- 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;

I want to press the "New" button of the "Titration" view, redirect me to "Home" and hide me the <div id="btnDeshabilitado">

NOTE: View redirection "Titration" in plain sight "Home page" , works correctly.

    
asked by Dimas Travieso 01.08.2017 в 20:51
source

3 answers

2

In general, when we want to modify the content or appearance of one page from another, we need a way to communicate them. In my opinion, the most practical is the hash.

The hash of a URL is what comes after the # symbol: 

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

Usually the hash serves to indicate to the browser that we want to direct us to a certain element of the page. In the example above, we want you to direct us to the element with the ID question1: 

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

Peeero, it turns out that we can read the hash of a URL from JavaScript very easily, so we can take advantage of this feature to resolve your query.

In the Titration view we add a hash to the end of the 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';

In the Cover view we read the hash and decided to hide the button: 

$(function() {
    if (window.location.hash == '#ocultar-boton') {
        $("#btnDeshabilitado").hide();
    }
});
    
answered by 02.08.2017 / 09:08
source
0

You can do everything in one document. If it's how I understood what you want to do, put in one div the whole Vista1 and in another the Vista2, when the document loads Vista2 with the hide () function of jQuery and when you click on the New show () (show)) Vista2 and hide Vista1, or not, and the button.

    
answered by 01.08.2017 в 23:32
0

You can put a cookie from jQuery, using js-cookie link

By pressing the button you put the cookie. 

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

In the cover view you search if the cookie exists. And if there is hidden div. 

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

And, in the event that the div should be available again, you delete the cookie. 

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

The code is not tested so it may fail. But something like that could also work for you Good luck!

    
answered by 02.08.2017 в 16:11
java.lang.IllegalStateException: Attempt to mutate in notification (JDateChooser, JAVA) Help with: Wrong number of arguments or invalid propety assignment here