Javascript Objekte samt HTML Code dynamisch erzeugen

[anthoferd]

Hallo,

ich möchte eine kleine Webvisualisierung erstellen. Ich möchte die einzelnen Teile mit jQuery und den Tabs aufteilen. Die einzelnen Teile sehen immer gleich aus, sind aber mit anderen CSV-Dateien verknüpft.
Gibt es eine Möglichkeit, dass ich mit javascript ein Objekt erstelle, in welchem die Anzeige der Daten etc. enthalten sind und ich pro Anlagenteil nur noch ein Objekt vom selben Typ erstelle?

Ich frage mich, wie ich das mit den IDs (divs, images, etc.) löse, so dass diese auch dynamisch erzeugt werden.

Vielen Dank!

 

[spaceCookie]

Du kannst DOM Elemente erstellen und diese auch manipulieren.
Ist es das was du machen möchtest?

$('<div>', {
  id: 'meineID'
}).appendTo('#element');

Daten kannst du da nach belieben reinladen.

 

[Tronjer]

Um dynamisch Content nachzuladen, ohne dabei einen Seitenrefresh durchzuführen, würde sich ein AJAX-Request anbieten.

    $('#mydiv').load('test.html');

 

[Sentence]

Nur als Info, die beiden reden von dem JavaScript Framework jQuery ;)

 

[anthoferd]

OK, die Erstellung schaffe ich mit DOM. So ist mir nun wenigstens klar, wie ich die Inhalte dynamisch erstelle. Da ich erst mit javascript und jquery anfange, fehlt mir aber noch etwas die Struktur (wie ich was am Besten anlege, Objekte, etc.)


In diesem Bild sind oben 3 Tabs (mit jquery ui realisiert) zu sehen. Pro Tab benötige ich dann so einen Behälter und die 2 Pumpen. Zusätzlich sollten dann noch ein paar Werteanzeigen und ein Knopf für eine Trendkurve hinzukommen. Wie das funktioniert, weiß ich bereits.

Meine Frage nun:
Die Pumpen sollten, je nach aktuellen Zustand, grün (läuft) oder rot (steht) dargestellt werden. Das geht ja ganz einfach, indem ich den Bildern eine ID gebe und sie dann via javascript austausche. Aber wie stelle ich es am Besten an, wenn ich die 3 Tabs ziemlich ident aufbauen möchte? Es macht wohl keinen Sinn, für jedes Tab ein eigenes DIV mit eigenem Inhalt zu erzeugen bzw. fix im HTML-Code zu verankern!?

Ich denke bei solchen Sachen immer wieder an Objekte...in diesem Fall wäre der Behälter samt den beiden Pumpen für mich ein Objekt und ich sage dem Objekt z. B. nur mehr welche Pumpe ein/ausgeschaltet ist.

Vielleicht habt ihr für mich einen kleinen Denkanstoß.

Vielen Dank!

PS: wie hättet ihr den Behälter mit den beiden Pumpen realisiert (Pumpenbilder sollten dynamisch ausgetauscht werden können)?

 

[Tronjer]

Vielleicht verstehe ich die Frage nicht richtig, auf dem Bild sehe ich eine Art Navigationsleiste und in der Mitte darunter einen Container mit einem Image. Das ist soweit erst einmal reines HTML. Wozu benötigst du da jQuery UI und warum willst du dynamisch Nodes erzeugen, wenn man diese auch bereits in der HTML-Struktur anlegen kann?

Außerdem ist aus dem Image nicht die Bedingung ersichtlich, welche darüber entscheidet, ob eine Pumpe an- oder ausgeschaltet ist.

 

[spaceCookie]

warum willst du dynamisch Nodes erzeugen, wenn man diese auch bereits in der HTML-Struktur anlegen kann?

Das verstehe ich auch nicht wirklich.

Wenn du es aber trotzdem so umsetzen willst habe ich hier ein kleines Beispiel für dich hingeklatscht. Dient zur Veranschaulichung:

$(document).ready(function(){[COLOR=#333333]
[/COLOR]    var data = {
        ort1: { "p1":"an", "p2":"aus" }, 
        ort2: { "p1":"an" , "p2":"an" }, 
        ort3: { "p1":"aus" , "p2":"aus" }, 
    }
    
    $.each(data, function(key, value) { 
      $('<div />',{
            id: key
        }).appendTo('body').html(key+': <br />Pumpe 1 ist: '+data[key].p1+'<br />Pumpe 2 ist: '+data[key].p2+'<hr />');
    });        
});

Die einzelnen Orte für die Pumpen sind Objekte (wie du es haben wolltest) und haben als Eigenschaften die 2 Pumpen denen du jetzt jeden beliebigen Wert zuweisen kannst.

 

[Tronjer]

So könnte man es zwar machen, aber das wäre total umständlich, und falls die Bilder bereits mit der Seite geladen werden sollen, würde ich das noch eher mit PHP lösen.

Im Rahmen der Fragestellung bietet sich JavaScript an, sofern Inhalte dynamisch verändert / nachgeladen werden sollen. Dazu benötigt es einen Trigger (Eventhandler) und eine Bedingung.

 

[spaceCookie]

So könnte man es zwar machen, aber es wäre total umständlich, und falls die Bilder bereits mit der Seite geladen werden sollen, würde ich das noch eher mit PHP lösen.

Das ist vielleicht bei meinem vorigen Post nicht richtig hervorgegangen. Aber ich würde das auch niemals so umsetzen und der Code für die Erstellung des Divs ist auch Murks, ist ja nur ein Beispiel. Der TE wollte, soweit ich das mitbekommen habe aber explizit so etwas in der Art haben.

Falls du dich aber doch umstimmen lassen solltest anthoferd solltest du die Ratschläge von Tronjer beherzigen.

 

[anthoferd]

Danke für die schnellen Antworten!
Mit PHP gibt es an dieser Stelle ein Problem: mein Webserver unterstützt das nicht! Der Webserver läuft auf einem Windows CE Gerät und da ein PHP zum Laufen zu bringen, ist nicht so einfach.

 

[spaceCookie]

Ich kenne Windows CE garnicht, aber in diesem Falle solltest du als serverseitige Sprache vielleicht ASP in Erwägung ziehen. Das sollte auf Windows doch schnurren, oder? Wenn es ein etwas aufwändigeres Projekt ist, wirst du auf Dauer wohl nicht um die serverseitige Programmierung herumkommen.

 

[Tronjer]

Windows CE ist ein Betriebssystem für Handhelds. Welcher ISP lässt denn darauf einen Webserver laufen? ;)

Falls du allerdings deine lokale Entwicklungsumgebung meinen solltest, installiere mal XAMPP. Dann klappt es auch mit PHP.

 

[anthoferd]

es handelt sich hierbei um eine Steuerung aus der Industrie. Die Steuerung selbst zeichnet die Werte aus der Anlage in einer CSV auf und über die Web-Visu möchte ich diese Werte anzeigen. Zusätzlich gibt es dann noch eine Schnittstelle, welche direkten Zugriff auf die Variablen der Steuerung ermöglicht.

Das mit dem ASP wäre vielleicht eine Idee...werde ich mir auf alle Fälle einmal ansehen.