jQuery events in Widgets

[litronics]

Hallo zusammen,

ich bastel mir gerade ein einfaches Editor-Widget für eine Uhrzeit und funktional habe ich auch schon alles hinbekommen.

Was ich aber irgendwie nicht schaffe ist es ein kleines JavaScript auszuführen sobald die Daten aus frothem geladen wurden.
Wenn ich ein Click-Event auf irgendeinem Objekt verwende, dann klappt alles - nur möchte ich eben nicht vorher auf irgendwas klicken bevor ich die Uhrzeit ändern kann - das soll automatisch gehen.

Ich hab schon so ziemlich alles ausprobiert - hier mal ein Auszug, was alles nicht funktioniert:

Code Auswählen Erweitern

$("document").unbind('onloadend').bind("onloadend", function(){...
("document").ready(function(){...
$("document").on('load', function(){...
$("document").on('loadend', function(){...
$("#{{ uid~'time' }}").unbind('update').bind('update', function(){...

Hat von euch jemand eine Idee, an welches Objekt und Event ich mich hängen muss, damit das JS automatisch ausgeführt wird?
Theoretisch müsste es ausgeführt werden sobald in dem Element uid~'time' ein Wert geschrieben wird. Deswegen auch die Idee mit dem Update Event - das leider auch nicht funktioniert.

Wäre super, wenn mir da jemand helfen könnte.

[smai]

Ich verstehe nicht ganz, was du machen willst.
Falls du eine Uhrzeit aus einem FHEN-Item editieren willst, ist document load aus mehreren Gründen der falsche Zeitpunkt. In jQuery Mobile, welches die smatVISU verwendet, werden die einzelnen Seiten asynchron geladen. Beim Navigieren wird also load gar nicht gefeuert. Aber selbst wenn, wären die Daten aus FHEM dann noch nicht übertragen. $(document) wäre übrigens ohne " zu schreiben.

Wieso willst du eigentlich irgendwas unbinden? Nebenbei: Unbind ist in jQuery deprecated, .off ist vorzuziehen.

Die letzte Zeile könnte funktionieren, falls es sich bei dem Element um ein Widget handelt. Zudem muss dieser JavaScript-Code direkt in der HTML/Twig-Datei steht und nicht in einer separaten .js. Ansonsten müsstest du einen anderen Selector verwenden, z.B. über ein data-Attribut oder eine class, weil in .js kein Twig evaluiert wird.
Ausserdem fehlt dem update-Handler ein Parameter für die Daten aus FHEM.

Zeig doch mal deinen HTML-Code und erklär etwas umfassender, was du erreichen willst.

In der kommenden Version der smartVISU wird übrigens ein Widget unter anderem für Zeiteinfabe enthalten sein.

[litronics]

Hallo smai,

danke schon mal für deine Antwort!

Ich war auf der Suche nach einem Widget mit dem ich eine Uhrzeit möglichst einfach editieren kann. Dazu hab ich auch ein Widget gefunden - das braucht aber die Stunden und Minuten einzeln und nicht zusammen (00:00), wie es mein Dummy für die DOIFS braucht.

Also hab ich mir das so umgebaut, dass ich aus FHEM die Uhrzeit als 00:00 Wert übergebe - dann gib es ein kleines Script, das das auf zwei Werte splittet und damit über die jeweils zwei Buttons bearbeitbar macht.
Beim Klicken auf den Button bau ich mir die zwei Werte dann wieder zusammen und schicke das zurück an FHEM.

Mein Problem ist nun, dass das initiale Script, das die Zeit splittet und in die einzelnen Stunden und Minuten schreibt entweder zu früh (wie du schon gesagt hast) oder gar nicht ausgeführt wird. Aktuell habe ich es auf          

Code Auswählen Erweitern

$(window).bind("click", function () {
liegen und da funktioniert es wunderbar wenn ich irgendwo hin klicke.

Aber irgendwo muss es doch ein Event geben das nach dem kompletten Laden (also auch dem asynchronen Inhalten) gefeuert wird?

Klar hätte man das auch anders lösen können und die Uhrzeit beim Klicken auf die "+" und "-" Buttons splitten, ändern u(nd wieder zusammenfügen können. Dann würde das Problem mit dem asynchronen Laden der Inhalte wegfallen - aber ich wollte das versuchen so zu implementieren (rein zur Übung)

Hier mal die Visualisierung des Ganzen - die GUI ist ja recht selbsterklärend

[smai]

Es gibt schon jQuery Mobile Events für das Laden der Seite. Diese nützen dir hier aber nichts, weil du auf den Erhalt von FHEM-Daten reagieren willst und nicht auf das Laden der Seite.
Du kannst keinen globalen Event verwenden, weil du ja nur auf dieses ganz bestimmte Item reagieren willst.

Du musst dazu ein eigenes Widget machen. Die Basis ist einfach ein HTML-Element, welches die Attribute "data-widget" mit dem Namen des Widgets sowie "data-item" mit dem FHEM-Item für die Daten hat.
An dieses Element bindest du dann den update-Event. Eine sehr knappe Doku dazu ist zu finden unter https://github.com/Martin-Gleiss/smartvisu/blob/a88bf155e07d09106213bf1ea0539a014c8219df/dropins/README.md#widgets

In der kommenden Version wird der JavaScript-Code der Widgets übrigens neu strukturiert, so dass dies etwas übersichtlicher wird. Auch an einer Doku wird gearbeitet.

[litronics]

Danke für die Info - dann schau ich mal ob ich das so an's Laufen bekomme.