Javascript mit YUI- Wie speichere ich die Daten?

[Didi.Bee]

Hallo zusammen,

zunächst einmal muss sich mich für die Hilfe bedanken, die ich hier immer wieder erhalten habe, ohne dass ich gepostet habe. Ich lese oft hier im Forum, und ein Beitrag war bis jetzt nicht nötig. Aber jetzt...

Und zwar bin ich seit langem auf der Suche nach einer browserbasierten Anwendung, mit der ich eine Liederlist zusammenstellen kann (es geht um eine Setlist für meine Band).

Ich entdeckte dieses Beispiel bei Yahoo:

http://developer.yahoo.com/yui/examples/dragdrop/dd-reorder.html

Ich baute es ein wenig um (statt "List Item" sind jetzt Songnamen darin):

http://www.springmusic.de/editor/playlist-editor.html

Da mehrere Leute damit arbeiten sollen, wäre es natürlich toll, wenn jemand eine Idee hätte, wie man so eine Seite speichern könnte? Es sind ja keine Formulardaten.

Hat jemand ein Tipp? andere Anwendungen?
Vielen Dank im Voraus!

Grüße
DD

[AbBa]

Ich würde mal meinen,dass der einzige weg in javascript zu speichern
der ist, dass man Cookies benutzt...
Aber in php würds klappen.

[Karin]

Hi,

Ich würde mal meinen,dass der einzige weg in javascript zu speichern
der ist, dass man Cookies benutzt...

das wird wenig nützen, was hat der Schlagzeuger davon, wenn beim Bassisten irgendein Cookie gesetzt ist. Ich denke mal, dass das nicht so gemeint war, dass die alle von einem Rechner aus drauf zugreifen.

LG

[Didi.Bee]

Hi,

Ich würde mal meinen,dass der einzige weg in javascript zu speichern
der ist, dass man Cookies benutzt...

das wird wenig nützen, was hat der Schlagzeuger davon, wenn beim Bassisten irgendein Cookie gesetzt ist. Ich denke mal, dass das nicht so gemeint war, dass die alle von einem Rechner aus drauf zugreifen.

LG

Da hast du recht. So soll es nicht sein.

Jedenfalls erstmal Danke für die Antworten!

Gleich eine weitere Frage:
Kann ich Javascript in eine PHP-Datei schreiben?

DB habe ich, PHP müsste auch gehen, nur mit JS kenne ich mich nicht so gut aus. Ich fand die Anwendung mit Drag&Drop sehr angenehm zum erstellen einer Setlist... technsich müsste das ja zu amchen sein,oder gibt da grooooße Bedenken?

[Karin]

Hi,

Gleich eine weitere Frage:
Kann ich Javascript in eine PHP-Datei schreiben?

Das macht keinen Sinn. Javascript läuft auf dem Client, PHP auf dem Server. Du kannst natürlich Javascript-Code per echo oder print ausgeben (also im _Response_ an den Browser schicken), genau wie HTML-Code auch.

DB habe ich, PHP müsste auch gehen, nur mit JS kenne ich mich nicht so gut aus. Ich fand die Anwendung mit Drag&Drop sehr angenehm zum erstellen einer Setlist... technsich müsste das ja zu amchen sein,oder gibt da grooooße Bedenken?

Ist ja nur für eine Handvoll Leute. Wenn eure Browser allesamt kein Problem damit haben... Allerdings müsstest Du dieses YUI-Teil halt noch umschreiben, weil Du ja ein Formular brauchst. Wenns nicht dringend Drag & Drop sein muss ist das hier vielleicht was für Euch? Ist halt zum Klicken, statt zum Ziehen... Zum Umsortieren müsstest Du das nur etwas ergänzen.

LG

[Didi.Bee]

Das kommt schonmal nah an die Anwendung ran.Dankeschön!
Ich habe es jetzt mal geschafft,aus den (verschiebbaren) Tabellenelementen Formulare zu machen... evtl. kann ich diese Werte sinvoller übergeben.

Ich muss noch viel basteln. Dein vorschlag würde allerdings ja auch noch viel Arbeit benötigen (ohne Sortierung würde es keinen Sinn machen)

Danke und Gruss
DD

[Karin]

Hi,

Ich muss noch viel basteln. Dein vorschlag würde allerdings ja auch noch viel Arbeit benötigen (ohne Sortierung würde es keinen Sinn machen)

Das ist gar nicht so viel. Hab das mal selbst so gemacht, dass man per buttons einen markierten
Eintrag nach oben oder unten verschieben konnte. Im Prinzip musst Du nur über den
selectedIndex (Position des markierten Eintrags) den Wert mit dem an Position
selectedIndex +/- 1 tauschen. Keine Magie ;-)

Aber mach, wie Du meinst. Wenn Du einigermaßen Zeit hast und gerne was lernen willst,
schau Dir Tims Tipps an, die führen natürlich zu einer wesentlich eleganteren und
moderneren Lösung.

Viel Erfolg!

[Karin]

Hi,

Da mehrere Leute damit arbeiten sollen, wäre es natürlich toll, wenn jemand eine Idee hätte, wie man so eine Seite speichern könnte? Es sind ja keine Formulardaten.

Das musst Du dann wohl ändern :-) Irgendwie musst Du die Liste nunmal auf den Server bekommen und das macht man üblicherweise mit einem Formular. Überleg Dir, wie Du das serverseitig entgegennehmen willst, wie Du das abspeichern willst und wie Du die Daten dann in den Editor integrieren kannst.

LG

[Tim Tepaße]

Hallo,

Da mehrere Leute damit arbeiten sollen, wäre es natürlich toll, wenn jemand eine Idee hätte, wie man so eine Seite speichern könnte? Es sind ja keine Formulardaten.

Mit Ajax/XMLHttpRequest kannst Du den HTTP POST Request an den Server nach Gutdünken zusammenbasteln. Also kannst Du auch wunderbar Nicht-Formularzeugs an den Server schicken und dort mit einer beliebigen serverseitigen Programmiersprache verarbeiten und speichern. Mal so dahinskizziert:

1. Du musst erstmal die HTML-Playlist in eine leicht verarbeitbare Datenstruktur kriegen. Eine Playlist ist per Definition eine geordnete Liste, also nimmt man ein einfaches Array, das Dinger enthält. Deine spezielle Playliste kann Lieder, Pausen und eine Zugabe enthalten, also verschiedene Typen. Ich würde diese ganz einfach in anonymen Objekten verpacken. In Javascript direkt hingeschrieben sähe Deine Datenstruktur wohl ungefähr so aus:

~~~javascript var playlist = [
      { type : "song",
        id   : "li2_1" },
      { type : "pause",
        length : "15" },
      { type : "song",
        id   : "li2_2" },
      { type : "zugabe }
  ];

  
Songs werden hier mal einfach per ID definiert, in der Annahme, dass das serverseitige Programm schon eine Zuordnung aller möglichen IDs zu konkreten Songs besitzt. Andere Dinge in der Liste werden dann über den Eintrag „type“ im Objekt identifiziert.  
  
2\. Um diese Datenstruktur zu kriegen, gehst Du einfach die HTML-Playlist in einer Schleife durch und packst immer das passende Objekt in das Array. Ein Beispiel für so eine Schleife findest Du übrigens genau in dem [Yahoo Beispiel](http://developer.yahoo.com/yui/examples/dragdrop/dd-reorder.html), die Methode showOrder().  
  
3\. Um diese Datenstruktur über die Leitung senden zu können, musst Du die Objektstruktur im Speicher wieder in Text verwandeln können. Ein passendes Format dafür ist [JSON](http://www.json.org/), das zufälligerweise fast genauso aussieht wie obige direkte Notation. Gängige JS-Bibliotheken haben oft eine Möglichkeit, Datenstrukturen direkt in JSON zu verwandeln. Bei YUI hab ich da direkt nichts gefunden, [hier (unten)](http://www.json.org/js.html) ist eine Standalone-Lösung. (Es gingen auch andere Formate)  
  
4\. Zum Senden von HTTP Requests, ohne dass die Seite neu geladen wird, nimmt man das [XMLHttpRequest-Objekt](http://developer.apple.com/internet/webcontent/xmlhttpreq.html). Bei YUI ist das im [YUI Connection Manager](http://developer.yahoo.com/yui/connection/) gekapselt; dort ist es die Methode asyncRequest(). Diese kriegt bei POST-Requests als viertes Argument einen String namens postBody – der dann Dein JSON-String wäre. Interpretiere ich das [Beispiel](http://developer.yahoo.com/yui/examples/connection/post.html) richtig, ist es offenbar sehr empfehlenswert, den JSON-String vorher noch mit  [encodeURI()](http://de.selfhtml.org/javascript/objekte/unabhaengig.htm#encode_uri) in das passende Transportformat zu bringen.  
  
5\. Auf dem Server nimmt nun das Skript den Post-Request entgegen, dekodiert den JSON-String mit einer [JSON-Bibliothek](http://gggeek.altervista.org/sw/article_20061113.html) in richtige PHP-Datenstrukturen und kann dort weiterverarbeiten und gespeichert werden. Eventuell gibt das Skript auch irgendwas zurück. In der Seite wäre ein visuelles Highlight für den Erfolg des Speicherns ja ganz praktisch.  
  
  
Tim

[Didi.Bee]

Hallo Tim (habe Dein Posting erst heute gelesen...),

Oh Mann, und ich dachte, ich kann ein wenig programmieren, aber das geht mir zu weit!

Ich dachte mir auch schon so etwas, diese Funktion [showOrder] zu nutzen. Bekomme aber leider nicht an die Werte von showOrder in ein Formular, das ich übergeben könnte (das Problem ist, das ich die Werte nicht rauskriege, nicht das Formular)
Kann man nicht Daten, die eh schon in einem "alert" ausgegeben werden, z.B. in ein "hidden" Formular übergeben? Dann käme ich weiter.

Alles von dir beschriebene hat für mich zuviele Unbekannten und ich bräuchte seeeehr lang um klarzukommen.

Hoffe Du bist nicht sauer, nach der ganzen Arbeit, die Du Dir gmenacht hast! Besten Dank jedenfalls!

Grüße
DD

[Karin]

Hi,

Kann man nicht Daten, die eh schon in einem "alert" ausgegeben werden, z.B. in ein "hidden" Formular übergeben? Dann käme ich weiter.

Klar. Schau Dir mal die Funktion showOrder genau an. Die definiert eine Funktion parseList,
welche die ids der ListItems in der aktuellen Reihenfolge zurückgibt. Statt das Ergebnis
per alert auszugeben, kannst Du das natürlich auch in eine Variable packen und weiterverarbeiten.

Hast Du denn schon mal versucht, überhaupt per AJAX einen Formular abzuschicken? Wenn Du
das hinbekommst, sollte es bis zum Anpassen der zu übergebenen Werte nicht mehr weit sein. :-)

LG

[Didi.Bee]

Hallo!

(hoffe das wird noch gelsen...?)

Also ich habe es tatsächlich geschafft, die Variable auszulesen und dann per "Get" zu senden. Auf der nächsten Seite, wird die URL ausgelesen und die Werte ausgegeben.

(Das waren alles Codeschnipsel von hier veröffentlichten Artikeln)

Soweit so gut.

Doooch:

1. Bei der Funktion ShowOrder werden nur die IDs ausgegebn und nicht die Werte, die in der <ul>-Liste stehen.
Habe schon versucht mit vershciedenen Arten von .getElementsBy... dem entgegenzukommen, aber klappte nicht.

(Die Id brauche ich für die JS-Funktion, kann ich also nicht ändern..)

2. Wie kann ich nun weitermachen, falls ich 1.) gelöst bekomme?

Grüße
DD

Hi,

Kann man nicht Daten, die eh schon in einem "alert" ausgegeben werden, z.B. in ein "hidden" Formular übergeben? Dann käme ich weiter.

Klar. Schau Dir mal die Funktion showOrder genau an. Die definiert eine Funktion parseList,
welche die ids der ListItems in der aktuellen Reihenfolge zurückgibt. Statt das Ergebnis
per alert auszugeben, kannst Du das natürlich auch in eine Variable packen und weiterverarbeiten.

Hast Du denn schon mal versucht, überhaupt per AJAX einen Formular abzuschicken? Wenn Du
das hinbekommst, sollte es bis zum Anpassen der zu übergebenen Werte nicht mehr weit sein. :-)

LG

[Karin]

Hi,

Doooch:

1. Bei der Funktion ShowOrder werden nur die IDs ausgegebn und nicht die Werte, die in der <ul>-Liste stehen.
   Habe schon versucht mit vershciedenen Arten von .getElementsBy... dem entgegenzukommen, aber klappte nicht.

Du musst halt statt der ID des aktuellen Knotens (<li>) den Wert des Kindknotens (Text innerhalb von <li>) speichern.
Schau mal hier.

2. Wie kann ich nun weitermachen, falls ich 1.) gelöst bekomme?

Tja, ich weiss nicht genau, wie weit Du jetzt bist, aber zumindest musst Du zusehen, dass
Du Änderungen irgendwie speicherst (DB, XML, CSV,...) und im Editor auch wieder einliest.

LG

[Didi.Bee]

Hallo Karin,

ja heute bin ich nicht groß weitergekommen. aber ich bleibe dran, denn die Anwendung find ich super.
Habe jetzt schon viel gelernt.

Schönes Wochenende!

Grüße
DD