Comparte:
Marcar Notificaciones como leídas con re-dirección
Buenos días!
Estoy siguiendo el tutorial de notificaciones y a diferencia de como lo realizas vos, yo al momento de marcar como leídas las notificaciones lo hago un poco distinto.
En vez de utilizar un "button" para marcarla como leída, lo que hago es prevenir el comportamiento por defecto de la etiqueta "<a>":
Estoy siguiendo el tutorial de notificaciones y a diferencia de como lo realizas vos, yo al momento de marcar como leídas las notificaciones lo hago un poco distinto.
En vez de utilizar un "button" para marcarla como leída, lo que hago es prevenir el comportamiento por defecto de la etiqueta "<a>":
<a href="#" onclick="event.preventDefault(); document.getElementById('marcarleido-form').submit();">
Emergencia: {{$notificacionnoleida->data['titulo']}}
</a>
Lo que hago en vez de mostrar la información con dicha etiqueta es hacer submit al formulario que está bastante parecido al del tutorial.
<form id="marcarleido-form"
action="{{ route('notificacion.marcarvisto', $notificacionnoleida->id) }}"
method="POST"
style="display: none;">
@csrf {{ method_field('PATCH') }}
</form>
Éste formulario se dirige al controlador de notificaciones y llama a la función "marcarvisto".
public function marcarvisto($id){
$noticacion = DatabaseNotification::find($id);
$noticacion->markAsRead();
return Redirect(route('emergencia.info', $noticacion->data['id']));
}
Luego de marcar como vista la notificación, retorna una re-dirección hacia el controlador de emergencias, que se encarga de retornar la vista de la emergencia registrada.
UNA VEZ TERMINADA LA EXPLICACIÓN DEL ACTUAL FUNCIONAMIENTO DE MI TRABAJO HASTA EL MOMENTO, PASO A EXPLICAR MI PROBLEMA:
Lo siguiente es mi único inconveniente, ya que las notificaciones se marcan como leídas sin problemas y consigo que se me redirija a la vista de emergencia correctamente.
Como habrán notado, para realizar el submit con la etiqueta <a> capturo el id del formulario, el cual se crea uno por cada notificación que tenga, por lo tanto al hacer click en alguna notificación sin importar cual sea (de las no leídas), siempre me va a capturar la primera, ya que todos los forms tienen el mismo id.
¿Existe alguna manera de cambiar el id de los formularios de forma dinámica por cada notificación no leída que tenga?
Muchas gracias y espero su respuesta.
Les dejo cómo quedó el código, por si alguien tiene un problema similar le pueda ayudar:
Recomendación al margen de todo ésto->El espacio para realizar una respuesta a una pregunta es sumamente pequeño y complicado de editar. Saludos!
@foreach ($notificacionesnoleidas as $notificacionnoleida) <li class="list-group-item"> <a href="#" onclick="event.preventDefault(); document.getElementById('{{$notificacionnoleida->data['id']}}').submit();"> Emergencia: {{$notificacionnoleida->data['titulo']}} </a> <form id="{{$notificacionnoleida->data['id']}}" action="{{ route('notificacion.marcarvisto', $notificacionnoleida->id) }}" method="POST" style="display: none;"> @csrf {{ method_field('PATCH') }} </form> </li> @endforeachOtra cosa, te recomiendo separar ese codigo de js y meterlo en una funcion ya que no solo es poco estetico e infumable al momento de revisar tu archivo sino que ademas estas repitiendo mucho codigo. Bastaria con algo como esto:
<script type="text/javascript"> function beforeSubmit(event){ event.preventDefault(); let parent=event.target.parentElement; parent.querySelector('form').submit(); } </script>