Quisiera que me ayuden con este problema.
Tengo una lista de notificaciones tipo facebook. Necesito que cuando seleccione el checkbox se oculte solo la notificación que yo elija con el check y no todas.
Esta en la function que muestra las notificaciones debajo del "idNotificaciones", en el .append
esta las estructura de la notificación que se agregara a la lista junto con el item.mensaje
.
$.getJSON("cargaNotificaciones", {}, function(data){
$.each(data, function(index,item){
contador+=1;
console.log(contador);
$("#idNotificaciones").append('<li><a href="#"> <span class="label label-primary"><i class="icon_document_alt"></i></span> '
+ item.mensaje +' </a></li>');
});
Esta es la función que oculta y muestra todas las notificaciones de la lista con el checkbox:
$(document).ready(function(){
$('.fantasma').click(function(){
if($(this).is(':checked')){
$('#idNotificaciones').css('display', 'block');
}else{
$('#idNotificaciones').css('display', 'none');
}
});
});
Y este es mi JSP:
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li id="noti_Container" class="dropdown">
<div id="noti_Counter"></div>
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
<i class="icon-bell-l"></i>
</a>
<ul class="dropdown-menu extended notification">
<div class="notify-arrow notify-arrow-blue"></div>
<li>
<p class="blue" id="contador"></p>
</li>
<li>
<div id="idNotificaciones" >
</div>
</li>
<li>
<a href="#">See all notifications</a>
</li>
</ul>
</li>
</ul>
</div>
Este es el checkbox:
<section class="panel">
<div class="panel-body">
<form class="form-horizontal " method="get">
<div class="form-group">
<label class="control-label col-lg-2" for="inputSuccess">Tipos de notificaciones</label>
<div class="col-lg-10">
<div class="checkbox">
<label>
<input type='checkbox' class='squaredThreex fantasma hh' value='0' checked>
configurar.
</label>
</div>
</div>
</div>
</form>
</div>
</section>
Esta es mi clase:
@RequestMapping("/cargaNotificaciones")
@ResponseBody
public List<HistorialNotificaciones> listaNoficaciones(HttpSession session) {
Usuario objUsuario = (Usuario) session.getAttribute("objUsuario");
return historialNotificacionesService.listaPorCliente(objUsuario.getIdUsuario());
}
@RequestMapping("/tranferencia")
public String regTranferencia(Tranferencia x,HttpSession session) {
//------------------------------
//Cuenta de Origen
//------------------------------
Cuenta objCuentaOrigen = cuentaService.listaCuentaPorNumero(x.getCuentaOrigen());
TipoMovimiento objTipoMov01 = new TipoMovimiento();
objTipoMov01.setIdTipoMovimiento(Constantes.TRANSFERENCIA);
Mensaje objMensaje = mensajeService.listaMensajePorTipo(Constantes.TRANSFERENCIA);
String texto1 = objMensaje.getContenido();
texto1 = texto1.replaceFirst("p1", objCuentaOrigen.getNumero());
HistorialNotificaciones obj3 = new HistorialNotificaciones();
obj3.setMensaje(texto1);
obj3.setEstado("NO VISTO");
obj3.setUsuario(objCuentaOrigen.getUsuario());
historialNotificacionesService.registraHistorial(obj3);
//------------------------------
//Cuenta de Destino
//------------------------------
Cuenta objCuentaDestino = cuentaService.listaCuentaPorNumero(x.getCuentaDestino());
TipoMovimiento objTipoMov02 = new TipoMovimiento();
objTipoMov02.setIdTipoMovimiento(Constantes.DEPOSITO);
Mensaje objMensaje2 = mensajeService.listaMensajePorTipo(Constantes.DEPOSITO);
String texto2 = objMensaje2.getContenido();
texto2 = texto2.replaceFirst("p1", objCuentaDestino.getNumero());
texto2 = texto2.replaceFirst("p2", String.valueOf(x.getMonto()));
texto2 = texto2.replaceFirst("p3", objCuentaDestino.getTipoMoneda());
HistorialNotificaciones obj4 = new HistorialNotificaciones();
obj4.setMensaje(texto2);
obj4.setEstado("NO VISTO");
obj4.setUsuario(objCuentaDestino.getUsuario());
historialNotificacionesService.registraHistorial(obj4);
return "redirect:verIntranetHome";
}
Se que al llamar en la función el "idNotificaciones" me ocultara todo. Hasta ahora solo he conseguido que se oculten todas las notificaciones pero no se como hacer para que se oculte solo las que yo quiero.