Comment mettre à jour une classe HTML à partir d'un CometActor

En réponse à un événement asynchrone sur le serveur, je souhaite mettre à jour la classe d'un noeud HTML afin de refléter son état mis à jour. Je connais l'identifiant du noeud, et la classe que je veux changer. Qu'est-ce que JsCmd dois-je utiliser pour mettre à jour la classe? En général, où puis-je trouver une bonne référence sur le JsCmd et ce qu'ils font?Comment mettre à jour une classe HTML à partir d'un CometActor

Un exemple simple:

case class UpdateClass(id: String, htmlClass: String) 

class ClassUpdater extends CometActor { 
    override def lowPriority: scala.PartialFunction[scala.Any, scala.Unit] = { 
    case UpdateClass(id, htmlClass) => 
     partialUpdate(Noop /* now what? */) 
    } 

    def render = NodeSeq.Empty 
}

Donc, si je devais le code HTML:

<html><body> 
<lift:comet type="ClassUpdater"/> 
<div id="foo" class="bar">insert text here</div> 
</body></html>

Si j'envoyé le message UpdateClass("foo", "baz") à mon ClassUpdater, je veux la classe de mon div pour passer à baz .

Source

2010-11-01 leedm777

Modifier:J'ai trouvé une meilleure façon de le faire. L'ancien code est maintenant plus d'un modèle pour les choses plus compliquées.

On dirait qu'il ya une façon plus simple de le faire sans jQuery:

SetElemById("foo", JE.Str("baz"), "className")

ce qui correspond à un appel JavaScript

document.getElementById("foo").className = "baz";

Notez que JE.Str("baz") peut y avoir JsExp et si vous pouviez aussi faire quelque chose comme

SetElemById("foo", JE.Str("baz"), "firstChild", "className")

qui changerait la classe du premier enfant. (Voir: SetElemById)

Vous pouvez jeter un coup d'œil au code pour le trait JsCMD pour savoir quoi d'autre est possible avec les commandes intégrées.

Si vous voulez quelque chose de plus compliqué, cependant, quelque chose comme ceci pourrait vous aider. Il envoie une commande jQuery qui va changer la classe en #oldId en newClass.

case class ChangeClassAtId(oldId: String, newClass: String) extends JsCmd { 
    def toJsCmd = """try { 
     $(""" + ("#" + oldId).encJs + """).attr("class", """ + newClass.encJs + """); 
    } catch (e) {}""" 
    }

Changer toutes les occurrences d'une classe partout est un peu plus compliqué:

case class ChangeClass(oldClass: String, newClass: String) extends JsCmd { 
    def toJsCmd = """try { 
     $(""" + ("." + oldClass).encJs + """).each(function(){ 
      $(this).addClass(""" + newClass.encJs + """).removeClass(""" + oldClass.encJs + """); 
     }); 
    } catch (e) {}""" 
    }

Vous devriez l'utiliser au lieu de Noop bien sûr.

Source

2010-11-01 17:25:47 Debilski

EDIT - J'ai mal lu la question. Ma réponse met simplement à jour le contenu de la div.

Départ: http://github.com/lift/lift/blob/master/examples/example/src/main/scala/net/liftweb/example/comet/Clock.scala

Vous voulez quelque chose comme ceci:

cas UpdateClass (id, htmlClass) => partialUpdate (SetHtml (id, texte ("TEXTE EN Shove DIV")))

Source

2010-11-01 17:17:00 tylerweir

Mais cela ne change que le contenu d'un 'id'. – Debilski

Oh, c'est vrai. Oui, j'ai mal lu la question. Désolé pour ça. – tylerweir

Comment mettre à jour une classe HTML à partir d'un CometActor

Répondre

Questions connexes