0

Tengo montada la aplicación y quería hacerle un pequeño efecto con css para la tabla de clientes, al añadir la clase rot180 que voltea la flechita (seleccionada) para ordenar los resultados en el cabecero de la tabla. Pues bien, en el onclick del div de la flechita que acciona el form, añado una funcion en javascript que accione el form y añada esta clase al elemento div, pero cuando le doy al click, rota la flechita y luego al accionar el form esta vuelve a su estado anterior sin guardar este cambio.Porque se hecho los resultados se mapean en una ruta /clientes?ordenar=nombre y se vuelve a la vista anterior de Clientes con el atribto de los clientes generado ¿ hay alguna manera de cambiar la clase y que se mantenga al hacer el submit()?

Aqui es donde mapeo el ordenar estos clientes :

@RequestMapping(value="/iberClientesEnlace")
    public String clientesListadosModelView(@ModelAttribute(value="Clientes") Clientes c,@RequestParam(value="ordenar")String ordenar,org.springframework.ui.Model m){
       ClientesModel list1=new ClientesModel();
       Clientes c1= new Clientes();
  ClientesModel cmodel=new ClientesModel();
              System.out.println(ordenar);
      m.addAttribute("Clientes", c1);

      if(ordenar.equals("nombre")){
      m.addAttribute("list",list1.getListaNameClientes()); 
    }else if(ordenar.equals("apellidos")){
          m.addAttribute("list",list1.getListaApellidosClientes());

     }else if(ordenar.equals("correo")){

          m.addAttribute("list",list1.getListaCorreoClientes()); 

     }else if(ordenar.equals("edad")){
          m.addAttribute("list",list1.getListaEdadClientes()); 
}
        return "iberClientesVista";
    }

Esta es la vista donde esta las cabeceras de la tabla para ordenar los resultados:

 <thead>
          <tr>
            <th>ID</th>
            <form:form action="/Usuarios/iberClientesEnlace?ordenar=nombre" id="ordenarForm" onsubmit="submint3();">
            <th ><div id="spantri"><div>Nombre</div><div onclick="document.getElementById('ordenarForm').submit();submint3()" id="triangulo">&#x25BC;</div></div></th>

             </form:form> 
                        <form:form action="/Usuarios/iberClientesEnlace?ordenar=apellidos" id="ordenarForm2" >

            <th><div id="spantri"><div>Apellidos</div><div onclick="document.getElementById('ordenarForm2').submit()" id="triangulo">&#x25BC;</div></div></th>
            </form:form> 
            <th>DNI</th>
                                    <form:form action="/Usuarios/iberClientesEnlace?ordenar=correo"id="ordenarForm3" >

                        <th><div id="spantri"><div>Correo</div><div onclick="document.getElementById('ordenarForm3').submit()" id="triangulo">&#x25BC;</div></div></th>

            </form:form> 
            <th>Telefono</th>
            <th>Direccion</th>
            <th>CP</th>
       <form:form action="/Usuarios/iberClientesEnlace?ordenar=edad" id="ordenarForm4" >
                        <th><div id="spantri"><div>Edad</div><div onclick="document.getElementById('ordenarForm4').submit()" id="triangulo">&#x25BC;</div></div></th>
        </form:form> 
            <th>Editar</th>
            <th>Eliminar</th>

          </tr>

            </thead>

Y aqui acciono el formulario desde Javascript:

    function submint3(){

event.preventDefault();

            document.getElementById("triangulo").className+="rot180";

    }
1
  • las ediciones en las respuestas de quien te ayuda les corresponde a ellos y no a ti; te invito a evitar editar una respuesta para añadir código extra, pues eso entra en conflicto con al intención original de quien responde; si consideras que algo le hace falta déjale un comentario
    – user75901
    el 29 dic. 2018 a las 0:01

2 respuestas 2

0

Con event.preventDefault() evitas que se recargue la página.

function submitFunction() {
  event.preventDefault();

  document.getElementById('myDiv').className = 'divClass2'
}
.divClass1 {
  color: red;
}

.divClass2 {
  color: cyan;
  font-size: 10px;
}
<div id="myDiv" class="divClass1">
  <form id="myForm" onsubmit="submitFunction()">
    <h1> titulo </h1>
    <input type="submit" value="Submit" />
  </form>
</div>

0
0

Oye muchas gracias amigo, has dado justo en el clavo funciona perfecto, aunque mi problema ahora es distinto; Tu arrancas el form desde un button y el submit es distinto a el mio, yo tengo que arrancarlo desde el onclick a un div no un button, entonces el resultado es diferente. no me hace nada, pero si pongo un button si funciona.

He editado el Fiddle un saludo :)

1
  • Esto es una respuesta? Sino es así no debe ir en esta zona
    – user75901
    el 28 dic. 2018 a las 22:30

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.