Wie aktualisiere ich eine HTML-Klasse von einem CometActor

StackOverflow https://stackoverflow.com/questions/4070690

  •  28-09-2019
  •  | 
  •  

Frage

Als Reaktion auf einige asynchrone Ereignis auf dem Server, möchte ich die Klasse eines HTML-Knoten aktualisieren, um seinen aktuellen Status zu reflektieren. Ich weiß, dass die ID des Knotens, und die Klasse ich mag es zu ändern. Was JsCmd muss ich die Klasse zu aktualisieren verwenden? In der Regel, wo kann ich eine gute Referenz auf dem JsCmd finden und was sie tun?

Ein einfaches Beispiel: 

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
}

Also, wenn ich die HTML hatte: 

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

Wenn ich die Nachricht UpdateClass("foo", "baz") meiner ClassUpdater gesendet, möchte ich die Klasse meiner div Änderungen zu baz.

War es hilfreich?

Lösung

Edit: Ich habe einen besseren Weg, es zu tun gefunden. Der alte Code ist jetzt eher ein Entwurf für kompliziertere Sachen.

Sieht aus wie es ist ein einfacher Weg, um es ohne jQuery zu tun: 

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

, die mit einem JavaScript-Aufruf übersetzt 

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

Beachten Sie, dass JE.Str("baz") jede JsExp sein kann, und wenn Sie sehen auch etwas tun könnte 

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

, die die Klasse des ersten Kindes ändern würde. (Siehe auch: SetElemById )

Sie können einen Blick auf den Code für den JsCMD Merkmal für das, was sonst ist möglich mit build-in-Befehle.

Falls Sie wollen etwas kompliziert, aber so etwas wie dies könnte Ihnen helfen. Er sendet einen jQuery-Befehl, der die Klasse in #oldId zu newClass ändern wird. 

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

Ändern Sie alle Vorkommen einer Klasse überall ein bisschen ist komplizierter: 

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) {}"""
  }

Sie sollten es statt Noop natürlich verwendet werden.

Andere Tipps

EDIT - ich die Frage falsch verstanden. Meine Antwort lediglich aktualisiert den Inhalt des div.

Check out: http://github.com/lift/lift/blob/master/examples/example/src/main/scala/net/liftweb/example/comet/Clock.scala

Sie werden so etwas wie dies wollen:

Fall UpdateClass (id, htmlClass) =>   partialUpdate (SetHtml (id, Text ( "TEXT SHOVE IN DIV")))

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top