0

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.

1 respuesta 1

0

Primero debes marcar de alguna manera las notificaciones que quieres ocultar. Así cuando pulses el checkbox se ocultarán aquellas que has marcado. Entonces:

  1. Añadir click event sobre las notificaciones para que agregarles un marcado basado en atributos:
$.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>');

            });
            
            //Añadimos evento click que marca las notificaciones
            $("#idNotificaciones li").click(function(event){
                //Obtenemos elemento DOM de notificación para manejarlo con JQuery
                  var notificacion = $(event.target);

                  notificacion.toogleClass("ocultar");
            });


});
  1. Añadimos lógica a tu función handler del click del checkbox:
$(document).ready(function(){
      $('.fantasma').click(function(){
      //Trabajamos solo con las notificaciones marcadas con la clase ocultar
      var notificaciones = $('#idNotificaciones .ocultar');
      
       if($(this).is(':checked')){
        //Ocultamos las notificaciones
        notificaciones.css('display', 'none');
        
       }else{
        //Mostramos las notificaciones si el checkbox se desmarca
        notificaciones.css('display', 'block');
        //Eliminamos la marca
        notificaciones.toogeClass('ocultar');
       }
      });
     });

Con eso debería ser suficiente.

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.