Cambiar de color el fondo de un mensaje en una bandeja de entrada tras ser leido

[tirengarfio]

Hola,

estoy intentando crear una bandeja de entrada de mensajes para una pequeña red social. Cada uno de los mensajes lleva un link al lado del estilo "Marcar como leido". Tras pulsar sobre el link el fondo del mensaje me gustaría que cambiase de color por ejemplo de gris a blanco.

Estos son los elementos con los que estoy trabajando:

- Una tabla MySQL "Mensaje" con tiene un campo llamado "Estado" (0: mensaje no leido, 1: mensaje leido).

- Dos reglas CSS (div.mensaje_0 y div.mensaje_1) que se diferencian en el color de fondo.

- Este codigo en la vista:

Código PHP:

 <div class="mensaje_<?php echo (int)$mensaje->getEstado() ?>" id="mensaje_<?php echo $mensaje ?>">                                 
 
    Contenido mensaje                
 
<?php echo link_to_remote('Marcar como leido', array(
 
      'url' => 'mensaje/cambiarEstadoLeido?id='.$mensaje->getId(),     
 
     'update' => 'mensaje_'.$mensaje,     
 
    )); 
?>
                
</div>  

link_to_remote es un "helper" de symfony donde la opción 'url' es la petición que se ejecutará tras pulsar sobre el link y la opción 'update' hace referencia al <div> que se actualizará tras pulsar ese mismo link.

Tras pulsar sobre el link "Marcar como leido" se ejecutan estas lineas que actulizan el estado del mensaje y :

Código PHP:

  public function executeCambiarEstadoLeido(sfWebRequest $request)
{
 
$this->mensajes_usuario = Doctrine::getTable('Mensaje')->findById($request->getParameter('id'));
 
$this->mensajes_usuario[0]->setEstado(1);
 
} 
   

Y inmediatamente después se ejecuta la parte de la vista correspondiente a esta ultima función:

Código HTML:

<div class="mensaje_1">								 

   Contenido mensaje				

</div> 

Mi problema: pues que al final tengo un mensaje metido dentro otro mensaje, se ve claramente porque si pongo algo de padding que queda "debajo" aparece el color gris que tiene.

Podria quitar el padding del mensaje que queda "debajo", pero es una solución un poco chapucera.....

¿Alguien me ayuda? Quizas el helper que estoy usando sea demasiado restrictivo como para que me permita hacer lo que estoy intentado, o sea: no se corten en dar soluciones con AJAX en crudo!

Un saludo

Javi

[jackson666]

Mira la verdad me parece que es algo mas sencillo que eso.... Es un simple evento onclick

Suponete que tenes este div

<div id="prueba">
CONTENIDO
CONTENIDO
CONTENIDO
CONTENIDO
CONTENIDO
CONTENIDO
CONTENIDO
</div>

Un radio

<input type="radio" onclick="cambiaFondo();" id="radio" />

Y tu funcion javascript

function cambiaFondo(){

var div = document.getElementById("prueba");

div.style.backgroundColor="tuNuevoColor";

}

[tirengarfio]

Iniciado por jackson666

Mira la verdad me parece que es algo mas sencillo que eso.... Es un simple evento onclick

Suponete que tenes este div

<div id="prueba">
CONTENIDO
CONTENIDO
CONTENIDO
CONTENIDO
CONTENIDO
CONTENIDO
CONTENIDO
</div>

Un radio

<input type="radio" onclick="cambiaFondo();" id="radio" />

Y tu funcion javascript

function cambiaFondo(){

var div = document.getElementById("prueba");

div.style.backgroundColor="tuNuevoColor";

}

Gracias jackson666!, pero ahora no me queda muy claro desde donde deberia de llamar a la funcion de que me cambia el campo "Estado" del mensaje (executeCambiarEstadoLeido) de 0 a 1...

Sugerencias?

Javi

[jackson666]

Iniciado por tirengarfio

Gracias jackson666!, pero ahora no me queda muy claro desde donde deberia de llamar a la funcion de que me cambia el campo "Estado" del mensaje (executeCambiarEstadoLeido) de 0 a 1...

Sugerencias?

Javi

Si cambia el color, cambia el estado no??

Código HTML:

function cambiaFondo(){

    var div = document.getElementById("prueba");

    div.style.backgroundColor="tuNuevoColor";

    executeCambiarEstadoLeido();

}

[tirengarfio]

Gracias jackson666.

Finalmente he descubierto que el helper "link_to_remote()" de symfony tiene una opción llamada "complete" que permite añadir una comando javascript que se ejecutará después de la funcion del controlador (executeCambiarEstadoLeido()) tras haber pulsado sobre el link.

De todos modos mi problema sigue siendo el mismo: tras pulsar sobre el link, no cambia la clase del <div>...

Asi es como queda mi codigo con el "helper" link_to_remote():

Código PHP:

 <div class="mensaje_no_leido" id="mensaje_1">

        Contenido mensaje

            <div class="pie_mensaje">

                <?php echo link_to_remote('Marcar como leido', array(

                                'url' => 'mensaje/cambiarEstadoLeido?id='.$mensaje->getId(),     

                                'update' => 'mensaje_1',     

                                'complete' => 'document.getElementById("mensaje_1").className("mensaje_leido");',
                                 
                                //'complete' => "$('mensaje_1').toggleClassName('mensaje_leido');",                         
        
                                'loading' => visual_effect(''),   

                                'complete'=> visual_effect(''),     

                            )); ?>

                <?php echo link_to_function('¡Pínchame!', "mifuncion()") ?>

            </div>

    </div>  

Aqui teneis también el codigo fuente:

Código HTML:

<div id="mensaje_1" class="mensaje_no_leido">
Contenido mensaje
    <div class="pie_mensaje">
    <a onclick="new Ajax.Updater('mensaje_1', '/rs/web/frontend_dev.php/mensaje/cambiarEstadoLeido/id/1', {asynchronous:true, evalScripts:false, onComplete:function(request, json){new Effect.(element, {});}, onLoading:function(request, json){new Effect.(element, {});}});; return false;" href="#">Marcar como leido</a>
<a onclick="mifuncion(); return false;" href="#">¡Pínchame!</a>
    </div>
</div> 

Un saludo

Javi

[tirengarfio]

Hola de nuevo,

finalmente encontré la respuesta: no se pueden definir dos opciones 'complete' en el helper 'link_to_remote'.

De todos modos de estas dos lineas de aqui abajo, tan solo me funciona la segunda que es una funcion del framework prototype:

Código PHP:

  'complete' => 'document.getElementById("mensaje_1").className("mensaje_leido");',
                                 
'complete' => "$('mensaje_1').toggleClassName('mensaje_leido');", 
   

¿Alguien sabria decirme el porqué?

Javi

[tirengarfio]

Iniciado por tirengarfio

¿Alguien sabria decirme el porqué?

La respuesta: la opción 'complete' esta asociada unicamente a acciones de prototype.

Javi