Hide parameters URL (jQuery and Grails) -
what want when user completes form of "titulacion" view , presses "nuevo" button of view, redirected myself "portada" view without displaying parameters of url, shown in image below.
the code works fine.
file "titulación.gsp"
<!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 titulacion 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> file "portada.gsp"
<!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")}", urlidasignatura: "${createlink(controller:"guiadocente", action:"idasignatura")}", urlvalidaguia: "${createlink(controller:"guiadocente", action:"validaguiadocente")}", urlactualizacionportada: "${createlink(controller:"guiadocente", action:"actualizacionportada")}", urlinsercionportada: "${createlink(controller:"guiadocente", action:"insercionportada")}", urlidguiadocente: "${createlink(controller:"guiadocente", action:"idguiadocente")}", urlobtencionmateria: "${createlink(controller:"guiadocente", action:"obtencionmateria")}", urlinsercionasignatura: "${createlink(controller:"guiadocente", action:"insercionmateria")}" }); //se muestran y se ocultan los 'div' $(function() { if (window.location.hash === "#insercion") { $("#btninsercion2").show(); $("#btninsercion1").hide(); } }); $(function() { if (window.location.hash === "#modificacion") { $("#btnmodificacion").show(); $("#btninsercion1").hide(); } }); $(function() { if (window.location.hash === "#reutilizacion") { $("#btnreutilizacion1").show(); $("#btninsercion1").hide(); $( "#titulacion" ).prop( "disabled", true ); $( "#asignatura" ).prop( "disabled", true ); } }); $(function() { if (window.location.hash === "#reutilizado") { $("#btnreutilizacion2").show(); $("#btninsercion1").hide(); $( "#titulacion" ).prop( "disabled", true ); $( "#asignatura" ).prop( "disabled", true ); } }); </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 select"> <option value="" 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 portada select"> <option value="" 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" 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 select"> <option value="" 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 select"> <option value="" hidden>${modalidad}</option> <option>presencial</option> <option>semipresencial</option> <option>a distancia</option> </select> </div> </div> </div> <!-- boton insercion 'guardar' deshabilitado --> <div id="btninsercion1"> <!-- boton indice --> <button type="button" class="btn btn-primary botonindice">indice</button> <!-- boton guardar --> <button type="button" class="btn btn-primary botoninsertar" disabled>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> <!-- boton insercion 'guardar' habilitado --> <div id="btninsercion2" hidden> <!-- 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> <!-- boton modificacion 'guardar' habilitado --> <div id="btnmodificacion" hidden> <!-- boton indice --> <button type="button" class="btn btn-primary botonindice">indice</button> <!-- boton guardar --> <button type="button" class="btn btn-primary botonmodificar">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> <!-- boton reutilizacion 'guardar' con 'indice' y 'paginacion' deshabilitado --> <div id="btnreutilizacion1" hidden> <!-- boton indice --> <button type="button" class="btn btn-primary botonindice" disabled>indice</button> <!-- boton guardar --> <button type="button" class="btn btn-primary botonreusar">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> <!-- boton reutilizacion 'guardar' con 'indice' y 'paginacion' deshabilitado --> <div id="btnreutilizacion2" hidden> <!-- boton indice --> <button type="button" class="btn btn-primary botonindice">indice</button> <!-- boton guardar --> <button type="button" class="btn btn-primary botonreusar">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> </form> </g:if> </body> </html> jquery file: "nuevo" button in "titulacion" view
//--- 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 datos = $("#idformtitulacion").serialize(); window.location.href = '/guiadocente/index?' + datos + "#insercion"; }else{ mensaje = " la guía docente seleccionada ya existe."; showdialogo(mensaje); } }); }else{ //muestra los errores en los selects al pulsar el boton 'nuevo' showerrornuevo(); } }); controller: "guiadocente"
class guiadocentecontroller { selectservice selectservice //--- portada --- def index(){ def usuariologueado = session.getattribute("e-mail") def titulacion = params.titulacion def asignatura_esp = params.asignatura def asignatura_ing = params.asignatura_ing def cursoacademico = params.cursoacademico def modalidad = params.modalidad //consulta de base de datos para obtener la 'titulacion' y la 'asignatura' def consultatitulacion = selectservice.consultatitulacion(usuariologueado) def consultaasignatura = selectservice.consultaasignaturaparams(usuariologueado,titulacion) [consultatitulacion:consultatitulacion, consultaasignatura:consultaasignatura, titulacion:titulacion, asignatura_esp:asignatura_esp, asignatura_ing:asignatura_ing, cursoacademico:cursoacademico, modalidad:modalidad] } } ** ** note:** parameters of "nuevo" button in "titulacion" view captured controlller "guiadocente".
actually there many ways do:
method 1. can add method="post" @ form (better use <g:form>) element <g:form id="idformtitulacion" method="post" controller="guiadocente" action="index"> , in js code submit form using jquery $('#idformtitulacion').submit();
method 2. code have window.location.href = '/guiadocente/index?' + datos + "#insercion";, write below code submit ajax request using jquery, , whatever logic want in controller side.
var parameters = {'key':'value'} jquery.ajax({ type:'post', data: parameters, url:'/guiadocente/index', success:function (data, textstatus) { //do if want }, error:function (xmlhttprequest, textstatus, errorthrown) { alert("error!") } });
Comments
Post a Comment