1

No consigo hacer que funcione el logout en Laravel, en la consola me indica el error:

Uncaught TypeError: document.getElementById(...) is null onclick http://localhost/xxxx/public/:2

He intentado de todas las formas posibles, con jquery en un js aparte, metiendo el enlace dentro del form, quitando etiqueta href, por ajax y nada.

<ul id="sub-menu-user" class="submenu_user">

                <li class="dropdown-item" href="">
                    <a href=""><i class="fa fa-cart-arrow-down"></i> Ver carrito</a>
                </li>
                <a class="dropdown-item" href="{{ route('logout') }}"
                   onclick="event.preventDefault();
                                                     document.getElementById('logout-form').submit();">
                    <i style="font-size: 14px" class="fa fa-close"></i> Salir
                </a>
                <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                    @csrf
                </form>
  </ul>

Añado:

Error js

4
  • Error de Js en Laravel*, si pusiera error logout javascript quedaría raro, el error se produce al hacer click en salir, al ejecutarse onclick
    – Mazcvei
    Commented el 1 ene. 2021 a las 21:40
  • No entiendo la respuesta, no cancelo la accion de recarga en ningun momento, solo ejecuto el submit de un formulario referenciado por id, ya que la ruta del logout es por POST (de ahi que pusiera LARAVEL en las etiquetas, ya que es necesario saber esto), pero al referenciarlo desde JS no lo detecta, estando justamente debajo, de ahi lo extraño
    – Mazcvei
    Commented el 1 ene. 2021 a las 22:54
  • al ser tipo post debe ser un formulario "oculto" y ejecutar el submit de este la clicar sobre el enlace, es el codigo que viene por defecto al realizar el composer de auth
    – Mazcvei
    Commented el 1 ene. 2021 a las 22:57
  • solo tiene el campo hidden del token, es el codigo por defecto de auth, me ha funcionado asi en todos lops proyectos, pero ahora no :S
    – Mazcvei
    Commented el 1 ene. 2021 a las 22:58

1 respuesta 1

1
  • Desconozco por que aplicas un ocultamiento al form pues al momento este no tiene elemento alguno visible, entonces yo removería lo siguiente:

      style="display: none;"
    
  • Ahora si mediante una etiqueta a darás al usuario la posibilidad de cerrar la sesión, entonces hace mas sentido que dicha etiqueta se encuentre dentro del contexto del form

  • Tampoco termina de quedar claro para que declaras 2 veces la ruta del cierre de sesión, si tienes un formulario entonces deja este valor en el atributo action del mismo

  • Otro aspecto a considerar es que si ocurrirá una redirección posterior a que el usuario cierra su sesión, entonces la siguiente línea de código no hace mucho sentido de existir en lo que tienes hecho:

      event.preventDefault();
    
  • También he de comentarte que no es muy recomendable trabajar con el código js directo dentro de las etiquetas HTML, ya que esto lo vuelve difícil de mantener, leer y extender

Entonces el código HTML puede quedar así (en una primer instancia):

<form action="{{ route('logout') }}" id="logout-form" method="POST">
  @csrf
  <a id="cierreSesion" class="dropdown-item">Salir</a>
</form>

Posterior, en tu JS tomando como punto de partida y extendiendo este aporte, haremos lo siguiente:

<script>
    let cierreSesion = document.getElementById('cierreSesion');

    cierreSesion.addEventListener('click', () => {
        cierreSesion.parentNode.submit();
    })
</script>

Donde:

  • Usamos a parentNode para acceder al nodo padre de la etiqueta ancla que en este caso es el form cuando el usuario de click en el texto
  • En consecuencia de lo anterior, podemos acceder al método submit de la interfaz HTMLFormElement y que pueda ser enviado el formulario

Finalmente...

Como a la etiqueta a le removimos el atributo href el texto quedará sin una apariencia de enlace aunque funcional, por lo tanto podemos dar un poco de CSS para simular dicha apariencia de esta forma:

  #cierreSesion {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
  }
2
  • Gracias por tu respuesta he seguido los pasos pero me salta otro error, lo adjunto en mi pregunta. Algo extraño pasa que se me esacapa
    – Mazcvei
    Commented el 2 ene. 2021 a las 0:50
  • Tambien he probado con jquery, $('#cierreSesion').click(function(){ $('#logout-form').submit(); }) En este caso no da error pero no hace nada
    – Mazcvei
    Commented el 2 ene. 2021 a las 1:02

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.