Monatsrückblick Januar/Februar 2026 ist online!

[smartin23]

Hallo zusammen,

so langsam taste ich mich an meine erste Visualisierung - aber manchmal macht mich der VIS-Editor leider echt wahnsinnig! :-)

Ich baue mir gerade Widgets mit dem HTML-Widgets selbst. Dazu möchte ich Datenpunkte zum Teil der Binding abfragen, manche aber auch in einem Javascript, um sie etwas umfangreicher aufbereiten zu können.

Also habe ich im HTML-Widget eine Darstellung mit HTML-Elementen gebaut. Aber: Sobald ich an den Code einen Javascript anfügen möchte, verschiebt sich das komplette Widget nach links oben im View - und lässt sich auch mit den "top"- und "left"-Werten nicht mehr an seine ursprüngliche Position bringen. Wieso nur?!

Beispiel:

<h1>Sensoren</h1>
<table style="width: 100%">
    <tr>
        <td class="table_left">Küche</td>
        <td class="table_right" id="data">hier kommen die Daten rein</td>
    </tr>
</table>

So wird es ganz normal dargestellt.

<h1>Sensoren</h1>
<table style="width: 100%">
    <tr>
        <td class="table_left">Küche</td>
        <td class="table_right" id="data">hier kommen die Daten rein</td>
    </tr>
</table>
<script>
     $("#data).html("Test");
</script>

So springt das ganze Widget im View nach links oben und lässt sich nicht mehr verschieben.

Was mache ich falsch? Wie kann ich innerhalb des HTML-Widgets inhalte korrekt dynamisch erzeugen?

[dirkhe]

@smartin23 nur mal aks idee, gibt es data ggf mehrfach auf deiner Seite?

[smartin23]

@dirkhe Leider nein. Das gleiche passiert auch, wenn ich eine ganz eindeutige ID nutzen, z.B. „data_sensor_kueche“.

Ich hatte auch schon bei einem anderen Widget den Fall, dass ich grundsätzlich ein Skript einfügen konnte. Aber als ich darin eine zusätzliche Zeile Javascript eingefügt habe, sprang das Widget auch nach links oben. Allerdings nur im Editor, nicht in der „Live“-Ansicht.

Im oberen Fall springt das Widget allerdings auch in der „Live“-Ansicht an die neue Position.

Ich werde echt bekloppt, weil es mir so unlogisch erscheint.

Aber so grundsätzlich ist meine Herangehensweise richtig? Also dass ich das zugehörige Skript in das jeweilige HTML-Widget packe? Allgemeingültige Funktionen dagegen habe ich im allgemeinen „Skript“-Teil des Views angelegt.

[liv-in-sky]

@smartin23

anführungszeichen im script nach data vergessen !

<h1>Sensoren</h1>
<table style="width: 100%">
    <tr>
        <td class="table_left">Küche</td>
        <td class="table_right" id="data">hier kommen die Daten rein</td>
    </tr>
</table>
<script>
 $('#data').html("Test");
</script>

[smartin23]

@liv-in-sky Oh ja, danke für den Hinweis!

Aber dennoch sitz das Widget nicht immer da, wo ich es haben möchte. Und es verschiebt sich komischerweise oft, wenn im Script-Part etwas ändere. Oder es sitzt im Editor woanders, als in der "echten" Ansicht. Kennt Ihr das auch?

[OliverIO]

@smartin23

eigentlich nein.
meist hängt das mit schlecht gestalteten css anweisungen zusammen.
alle css anweisungen aller widgets und auch die eigenen wirken gleichzeitig zusammen.
wenn man mit der namensgebung nicht aufpasst und die css klassenbezeichnungen nicht entsprechen spezifisch definiert, dann treffen deine anweisungen ggfs andere widgets
oder die css anweisungen anderer widgets treffen deine neuen elemente.

[liv-in-sky]

@smartin23 sagte in Visualisierung mit JQuery: unerwartetes Verhalten:

Kennt Ihr das auch

eigentlich nicht - wenn ein fehler im html/script code ist, legt es sich in die linke obere ecke - ansonsten sind die widget dort, wo ich sie hinschiebe - ansonsten siehe post über dem hier

nebenbei:
mit den entwicklertools (im tab konsole) kannst du in der runtime "manchmal" die fehler entdecken

[OliverIO]

@smartin23

ich empfehle hier auch intensivst die nutzung der developer tools im browser (f12 bei chrome, firefox, edge)

bei einem html widget innerhalb dem script tag lässt sich sogar das schlüsselwort

debugger;

hinzufügen. dann stoppt das skript an dieser stelle, wenn die developer tools geöffnet sind und man kann schritt für schritt weiter gehen und auch alles untersuchen (variablen, html-elemente, über die console befehle absetzen)