AJAX Drag & Drop, iGoogle

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Hallo,

    @Snowflake : hab hier mal ein rar von dem ganzen gemacht
    ichbinsmiriam.ic.ohost.de/test1/portal.rar


    hab hier übers Wochenende ein besseres gefunden, bei dem das so funktioniert,
    wie ich das wollte : (Das ganze über Prototype, Scriptaculous aufgebaut)
    ichbinsmiriam.ic.ohost.de/test2/test/
    der hat in der ersten Zeile :
    <?xml version="1.0" encoding="UTF-8"?>
    wobei der Webserver das als PHP interpretiert, und Fehlermeldung ausgibt
    "Parse error: syntax error, unexpected T_STRING in /usr/export/www/hosting/ichbinsmiriam/test2/test/index.html on line 1"
    wenn ich das wegnehme, funktioniert es.
    Weiss nun nicht wie wichtig die XML-Angabe fürs Script ist, wenns so auch läuft ?

    Hier der Link zum Original- Author :
    blog.xilinus.com/2007/8/26/prototype-portal-class

    edit://
    er übergibt irgendwie nur immer einen wert :(
    habs zurzeit so gelöst :
    index.html:

    Quellcode

    1. function onChange() {
    2. var gib = portal.serialize();
    4. new Ajax.Request("status.php",
    5. {
    6. method: 'post',
    7. postBody: 'gib='+gib,
    8. onSuccess: function(transport)
    9. {document.getElementById("response").innerHTML = "<center>" + transport.responseText + "<br><br><br>variable_von_index_html :<br>" + gib + "</center>";}
    10. }
    11. );
    13. <div id="response" style="z-index: 99; position: absolute; left: 0px; bottom: 0px; width: 100%; background-color: #FF0000;"><b><center>Retour vom Server:</center></b></div>
    Alles anzeigen


    status.php:

    Quellcode

    1. <?
    2. $insert = $_POST["gib"];
    3. print "variable vom php : <br>";
    4. print ($insert);
    5. ?>

    hab schon einiges versucht, aber irgendwie is immer nur erste variable :(

    Hat vllt. wer nen tip für mich ? :)

    Liebe Grüße
    Miriam

    Dieser Beitrag wurde bereits 3 mal editiert, zuletzt von miriam ()

  • zur xml zeile ;) ganz easy <?php echo '<?xml version="1.0" encoding="UTF-8"?>';

    ansonsten gibt die serialize() das zurück:

    Quellcode

    1. widget_col_0[]=&widget_col_0[]=widget_0&widget_col_0[]=widget_1&widget_col_0[]=widget_2&widget_col_1[]=widget_3&widget_col_2[]=widget_5


    du brauchst also kein kein gib davor zu setzen.
    Es muss auch außerdem glaube ich kein "postBody" sondern ein normales "post" sein.

    Ich bin übrigens mit der jquery Implementierung zufrieden. Hab schon ein Projekt damit gebaut.
    Man sollte das wählen, was man sowieso im Einsatz hat (prototype/jquery)

  • Hallo, vielen Dank für Deinen Reply, habs nun so einigermassen geschafft.

    habe so gemacht :

    Quellcode

    1. parameters: 'gib='+escape(gib),


    So übergibt er nun mehr durchs "escape", aber irgendwie is was ned richtig :(
    ichbinsmiriam.ic.ohost.de/test2/test/





    Wegen dem xml, stimmt - an das dachte ich gar nicht.
    Aber glaub das liegt an dem Freehoster ohost sowieso, weil als php gibt er auch dieselbe Fehlermeldung zurück.
    Muss ich mal testen für was der xml sein soll, ob nur für darstellung der ist hm.

    Gruss Miriam

    Dieser Beitrag wurde bereits 3 mal editiert, zuletzt von miriam ()

  • Hallo zusammen,

    als ehrenamtlicher Programmierer eines kostenlosen Browserspiels suche ich seit geraumer Zeit ein Script mit dem ich einen personalisierten InGame Desktop nachbauen kann (vergleichbar iGoogle, Netvibes etc.).

    Nach langer Suche bin ich auf die Prototype Portal Class von Xilinius aufmerksam geworden und wenig später habe ich dank Tante Google auch diesen Thread bzw. dieses Forum hier entdeckt.

    Ich sitze nun seit zwei Tagen daran das Script etwas umzubauen (Anzahl, Positionierung, Inhalt etc. der Widgets aus Datenbank auslesen und beim ändern speichern) und wollte zeitgleich mal Fragen ob jemand eventuell schon einen Ansatz hat den man verwenden kann um die Widgets bzw. deren Einstellungen zu ändern... Den "edit" Button gibts ja schon nur leider ohne Funktion.

    Mit Einstellungen ändern meine ich z.B. sowas wie es sich bei den Dragable RSS Boxes hinter dem Link "Edit" versteckt. Also Anzahl Items, Reloadtime etc.

    Würde mich freuen wenn da vielleicht jemand schon was hat. Werde natürlich im Gegenzug auch gerne meine Erweiterungen/Änderungen des Scripts veröffentlichen wenn sie denn soweit fertig sind...

    Greetz
    Deomar

  • Ich kann dir im Moment keine Demo liefern, aber ich arbeite auch gerade an einem Personal Desktop für das WCF.
    Alle Aktionen werden bereits per AJAX serialisiert und sind beim nächsten Laden wieder verfügbar.
    Drag- und Drop, Ein- und Ausklappen, Spalte hinzufügen, Konfiguration (zur Zeit ohne Funktion), Gadget hinzufügen, weiteren Desktop hinzufügen, ...

    Den relevanten Code findest du in Datenbank, Template, JavaScript und Model:

  • Danke für die Dateien @ d0nut!

    Ich werde mal schauen was ich daraus "lesen" kann da ich gestehen muss ich fühle mich eher in der PHP Welt heimisch als in allem anderen. Habe daher oft meine Mühe JavaScript zu verändern bzw. zu erweitern und freue mich immer wie ein Keks wenn ich mal wieder was "richtig" gemacht habe ;)

    Eine Frage zur Xilinius Portal Class habe ich allerdings noch.

    Die Funktion add fügt ja ein neues Widget hinzu:

    Quellcode

    1. portal.add(new Xilinus.Widget().setTitle("Widget Title").setContent("bla bla bla"), 1);


    Das erstellte Widget erhält im Zuge dessen auch eine ID zugewiesen.

    Die Frage ist nun: Kann ich diese ID beeinflussen?

    Hintergrund der Frage ist folgende:
    Ich lese ja die zu erstellenden Widgets aus der Datenbank aus. Dort besitzen die Widgets eine ID und genau diese ID soll dann auch das Widget bekommen wenn ich es mittels "portal.add" erstelle.
    Wird die ID allerdings aufsteigend der Reihenfolge nach vergeben wie sie erstellt werden habe ich das Problem das ich beim wegschreiben der Widgets die falschen IDs speichere.

    Beispiel: Daten aus DB...
    Col0 => Widget ID 2
    Col1 => Widget ID 0
    Col2 => Widget ID 1 + 3

    Beispiel: IDs nach erstellen der Widgets:
    Col0 => ID 0
    Col1 => ID 1
    Col2 => ID 2 + 3

    Das einzige Widget was nach dem speichern der Widget Position also noch richtig wäre, wäre das mit der ID 3.

    Hoffe es war verständlich und jemand kann mir helfen *g*

    Schon vorab: herzlichsten Dank!

    mfg
    Deomar

  • Hallo, ich beschäftige mich erst seit zwei Tagen näher mit JS-Frameworks. Nach einigen Vergleichen (mootools, Prototype/Scriptaculous, Dojo und JQuery), habe ich mich für JQuery entschieden. Die erste Gehversuche waren auch recht erfolgreich, doch nun stehe ich vor einem kleinen (?) Problem. Nach fleißigem Google-Quälen bin ich jetzt auf dieses Forum hier gestoßen und haben den Thread mit großem Interesse gelesen. Leider bin ich nun sogar etwas verwirrter / unschlüssiger als vorher. ;)

    Konkret möchte ich eine Portal-Seite wie hier beschrieben aufsetzen. Dazu habe ich mich auch schon mit einigen JQuery-Beispielen auseinander gesetzt und eine Testseite soweit lauffähig bekommen.

    Nun kommt das erste meiner zwei Probleme: Leider weiß ich nicht so recht, wie ich die im Cookie abgelegten Daten im Anschluss (sprich: Reload der Seite) wieder zum sortierten Aufbau der Boxen verwenden kann. Bisher ist das auch alles noch hardcodiert. Prinzipiell könnte ich die Boxen natürlich per PHP generieren und die Sortierung mittels DB regeln, das wäre evtl. einfacher. Aber für den Moment wäre mir die Cookie-Lösung ganz lieb. Hat jemand nen Hinweis, wo ich das entsprechend per JS in der Seite einbauen muss?

    Mein zweites Problem ist nicht ganz so konkret: Nachdem ich mich wie gesagt für JQuery entschieden habe, habe ich das Prototype-basierte Beispiel von Xilinus getestet. Was mir daran gefällt, ist die Möglichkeit, die Boxen in der Größe anzupassen. Allerdings habe ich das Gefühl, dass das Ganze im Vergleich hierzu (interface.eyecon.ro/demos/sort.html) deutlich langsamer / hakeliger funktioniert!? Lässt sich dieses Resize auch per JQuery erreichen bzw. gibt es da evtl. schon etwas, das ich mir näher anschauen könnte?

    Für Tipps und Hilfestellungen wäre ich echt dankbar.

  • Ich hoffe das führt jetzt nicht zu einem Ansturm an Neuregistrierungen...
    Aber schau dir deine Profilseite mal an...
    • Drag- und Drop
    • Gadget hinzufügen
    • ein- und ausklappen + löschen
    • Boxkonfiguration (zur Zeit ohne Funktion)
    • Weitere Spalten hinzufügen
    • Spalten werden automatisch skaliert
    • Templatefähig
    • weiteren Desktop hinzufügen, umbenennen, löschen
    Es ist alles OpenSource als GPL3 lizenziert... den Link zu den Quellen findest du oben. Bedien dich also... Eine Dokumentation habe ich allerdings keine.

  • d0nut schrieb:

    Ich hoffe das führt jetzt nicht zu einem Ansturm an Neuregistrierungen...
    Aber schau dir deine Profilseite mal an...
    • Drag- und Drop
    • Gadget hinzufügen
    • ein- und ausklappen + löschen
    • Boxkonfiguration (zur Zeit ohne Funktion)
    • Weitere Spalten hinzufügen
    • Spalten werden automatisch skaliert
    • Templatefähig
    • weiteren Desktop hinzufügen, umbenennen, löschen
    Es ist alles OpenSource als GPL3 lizenziert... den Link zu den Quellen findest du oben. Bedien dich also... Eine Dokumentation habe ich allerdings keine.
    Ist davon auszugehen das Boxkonfiguration und Doku noch folgen?
    Die Funktionalität schaut super aus und gerade für mich als Noob in Sachen JS und Ajax wäre das die perfekte Lösung. Da ist ja wirklich alles drin was man sich wünscht.

    Ich bin zwar kein großer Fan vom "abschauen" aber was bleibt einem anderes wenn man der Sprache nicht mächtig ist aber die Funktionen nicht missen will...

    mfg
    Thorsten

  • Hallo,

    Ich hab noch eine kurze Frage bezüglich den Widgets/Gadgets,
    Wie funktioniert das mit diesen ?
    Wird da einfach der JS/Flashcode in den Portlet/Widget reingemacht ?
    zb netvibes.com bietet für Developer, oder aber auch widgetbox.com bietet eine catalog api.
    Bzw. gibs welche die sich für so Portal besser eignen ?

    Vielen Dank im Voraus
    Gruss Miriam

  • Supercool ist natürlich eine OpenSocial API Implementierung, siehe easy-coding.de/trac/wcf/wiki/OpenSocial
    Sowas schreibt man aber nicht in ein paar Stunden.
    Einfacher ist es den DIV Container mit AJAX zu befüllen und sämtliche Logik in der widget.php zu halten.

    Quellcode

    1. <div>
    2. <div>headline</div>
    3. <div id="content_512"></div>
    4. <script type="text/javascript">ajax_load("content_512", "widget.php?daten_zur_id=512")</script>
    5. </div>

  • Hallo,

    Vielen lieben Dank für Deine Antwort,
    leider bin ich nun verwirrt irgendwie,
    Das heisst über/mit der API ist es ein zeitaufwändigeres Unterfangen, dafür auch das Resultat dementsprechend.

    zu dem Lösungsansatz :

    Einfacher ist es den DIV Container mit AJAX zu befüllen und sämtliche Logik in der widget.php zu halten. [b][/b]


    Gibt es dazu eine Demo, bzw über was oder welche Library läuft die Funktion "ajax_load" und "widget.php" ?
    Will es eigentlich so einfach wie möglich halten, damit ich mich auch noch auskenne damit.

    Vielen Dank
    Miriam

  • hihi, das ist wieder ein anderes kommerzielles Projekt von mir, aber im Prinzip ganz einfach,
    Momentan stellst du den Boxinhalt doch direkt dar.

    Quellcode

    1. <div>
    2. <div>headline</div>
    3. <div id="content_512"></div>
    4. Mein Inhalt zur Box
    5. </div>


    Jetzt sattelst du auf die Ajax Funktion um... und lädst den Content nach

    Quellcode

    1. <div>
    2. <div>headline</div>
    3. <div id="content_512"></div>
    4. <script type="text/javascript">ajax_load("content_512", "widget.php?daten_zur_id=512")</script>
    5. </div>


    Die ajax_load würde in etwa so aussehen und das content div mit der ausgabe der date widget.php füllen

    Quellcode

    1. function ajax_load(divcontainer, url) {
    2. var req;
    3. try {
    4. req = window.XMLHttpRequest?new XMLHttpRequest():
    5. new ActiveXObject("Microsoft.XMLHTTP");
    6. } catch (e) {
    7. //Kein AJAX Support
    8. }
    9. req.onreadystatechange = function() {
    10. if ((req.readyState == 4) && (req.status == 200)) {
    11. document.getElementById(divcontainer).style.display = req.responseText;
    12. }
    13. }
    15. req.open('get', url);
    16. req.send(null);
    17. }
    Alles anzeigen


    Die Widget PHP würde anhand der ID den Inhalt laden und ausgeben

    Quellcode

    1. <?php
    2. $row = mysql_query(...);
    3. echo $row['content']; // zum Beispiel "Mein Inhalt zur Box"
    4. ?>