JavaScript AJAX

Die Lösung...

Knurz — Fri, 28 Mar 2008 21:11:43 GMT

So nach paar gegoogle und Probiererei mit dem DOM von JavaScript hab ich die Lösung gefunden..

Problem war der Fehler (der die Anzeige verhindert hat):
This.Form has no properties

Die Behebung schafft man indem man den Vorschlag dieser Page in den o.a. Code für den SelectEditor einfügt.

Ersetze:


this.form.appendChild(this.editField);

durch:


this._controls.editor = field;
this._form.appendChild(this._controls.editor);

und der Fehler im JavaScript ist weg.

Die Frage mit dem XML hat sich auch geklärt:


<qualities>
<quality id="1">Sehr gut</quality>
<quality id="2">Hervoragend</quality>
<quality id="3">Gut</quality>
<quality id="4">Akzeptabel</quality>
<quality id="5">Mies</quality>
</qualities>

wird so abgefragt:


var cats=req.responseXML.getElementsByTagName('quality');
$A(cats).each( function(cat, idx) {
var op=document.createElement("option");
op.value=cat.attributes.getNamedItem("id").value;
op.text=cat.firstChild.nodeValue;
...

(hier i.d.F. mit einer optionlist)

Danke an die Helfer für ihre Zeit

lg,
Knurz

Re(12): JavaScript AJAX

Knurz — Thu, 27 Mar 2008 11:49:12 GMT

Soweit ichs im Kopf hab war/ist das a bissl anders. Damals gabs einen Bug in
der Sprache den Micrsoft gefixt hat und sie unbenannt hat (ich glaub etwas mit
Datum wars)

Ah gut kann auch sein, ich hab mir ein JavaScriptbuch ausgeborgt von unserer Softwareentwicklung und da drin stand das es lizenzrechtlich war, ist aber prinzipiell egal da ja der Syntax und die DOM gleich sein sollten...

Re(11): JavaScript AJAX

Undying — Thu, 27 Mar 2008 11:00:41 GMT

Soweit ichs im Kopf hab war/ist das a bissl anders. Damals gabs einen Bug in der Sprache den Micrsoft gefixt hat und sie unbenannt hat (ich glaub etwas mit Datum wars)

In der Zwischenzeit bezeichnet Microsoft ihre Samples eigentlich auch immer als JavaScript ...

Kann mich auch täuschen und müsste mal nachschauen ...

Re(16): JavaScript AJAX

Knurz — Wed, 26 Mar 2008 18:01:01 GMT

Dann hab ich keine Sorgen, dass du das hinkriegst - umgekehrt wärs Fatal

Danke für Dein "Vertrauen"

Re(15): JavaScript AJAX

Dr. Watson — Wed, 26 Mar 2008 17:59:44 GMT

Ja etwas anders ist es, so mit Funktionen können Objekte sein etc. hat mich
etwas verwirrt zu beginn (komm aus C/C++ Welt).

Dann hab ich keine Sorgen, dass du das hinkriegst - umgekehrt wärs Fatal

Re(15): JavaScript AJAX

RevX — Wed, 26 Mar 2008 16:54:13 GMT

Gibts ja ned das ich für eine Funktion die XMLHttpRequest heiß ein HTML basteln muß ?

Musst du ja auch nicht. (Aber wenn du XHTML-kompatible Daten erzeugen würdest, könntest den Server-Response eins-zu-eins mit innerHtml in die Seite schupfen. Aber das ist eine andere Geschichte...)

Weißt Du vielleicht eine übersichtliche Seite mit Objekten und deren Eigenschaften/Funktionen in dem Javascript DOM ?

Die ist für Einsteiger ganz brauchbar glaub ich:
http://webmatze.de/webdesign/javascript/javascript_dom.htm
oder die:
http://www.quirksmode.org/dom/intro.html

Re(4): JavaScript AJAX

Knurz — Wed, 26 Mar 2008 16:48:32 GMT

Das hab ich auch probiert.

also



<categories>
<cat>
<key>1</key>
<value>Sehr gut</value>
</cat>
...
</categories>

ging aber trotzdem nicht, ich glaub ja das des Ding ned wirklich eine Select/Option List dahinmacht, sondern das es den Code schlicht und ergreifend aufhaut.

Re(3): JavaScript AJAX

RevX — Wed, 26 Mar 2008 16:47:12 GMT

Du hast Dr. Watson missverstanden. Es genügt EIN Root-Element/Node für den XML-Output. D.h. du brauchst nur ein ganz oben auf und ganz unten wieder zumachen. Ansonsten ist der Output (auch wie von dir gelistet) nicht XML valid. Es darf und muss genau einen Root-Node geben. Browser sind da etwas pedantisch.

Re(14): JavaScript AJAX

Knurz — Wed, 26 Mar 2008 16:47:03 GMT

Keine Angst, innerHTML ist keine Sprache. Ist nur ein JS-Konstrukt um Text
welcher HTML-artig sein kann in die Seite einzufügen. Such mal danach in
de.selfhtml.org. Ist nicht schwer.

Nah des iss aber ned ganz das was ich such.

Gibts ja ned das ich für eine Funktion die XMLHttpRequest heiß ein HTML basteln muß ?

Übrigens, die ganze DOM-Werkelei kann man sich in 1-2 Stunden aneignen, ist
nicht so tragisch.

Ja etwas anders ist es, so mit Funktionen können Objekte sein etc. hat mich etwas verwirrt zu beginn (komm aus C/C++ Welt).

Weißt Du vielleicht eine übersichtliche Seite mit Objekten und deren Eigenschaften/Funktionen in dem Javascript DOM ?

Re(13): JavaScript AJAX

RevX — Wed, 26 Mar 2008 16:43:04 GMT

Keine Angst, innerHTML ist keine Sprache. Ist nur ein JS-Konstrukt um Text welcher HTML-artig sein kann in die Seite einzufügen. Such mal danach in de.selfhtml.org. Ist nicht schwer.

Übrigens, die ganze DOM-Werkelei kann man sich in 1-2 Stunden aneignen, ist nicht so tragisch.

Re(10): JavaScript AJAX

Knurz — Wed, 26 Mar 2008 16:37:05 GMT

Ned ganz, aus lizenztechnischen Gründen (MS iss ja sooo arm ) wird das JavaScript auf JScript "convertiert", das dann vom JScript Interpreter ausgeführt.

Da geh ich lieber gleich zum Schmied als zum Schmiedl

Re(9): JavaScript AJAX

RevX — Wed, 26 Mar 2008 16:35:47 GMT

JScript ist nur die Bezeichnung die MS Javascript gibt.

Re(12): JavaScript AJAX

Knurz — Wed, 26 Mar 2008 16:27:56 GMT

innerHTML ...

UIjeh in was Neues mag ich mich jetzt nicht noch zusätzlich einlesen

(Eine Antwort noch von der dunklen Seite der Macht: Mit ASP.net und den AJAX
Extensions ist deine Problemstellung mit 0 Zeilen JS und etwa 5 Zeilen
Serverseitigen Code zu lösen *g* => inkl. Corss-Browser / Cross-OS
(das kommt nämlich dann noch hinzu ...))

Brauch ich MS, was in mein Heimnetz nicht kommt, weder als Client noch als Server.

Re(11): JavaScript AJAX

Undying — Wed, 26 Mar 2008 15:40:41 GMT

Naja erzeug den fertigen HTML Code am server und machs über innerHTML ...

(Eine Antwort noch von der dunklen Seite der Macht: Mit ASP.net und den AJAX Extensions ist deine Problemstellung mit 0 Zeilen JS und etwa 5 Zeilen Serverseitigen Code zu lösen *g* => inkl. Corss-Browser / Cross-OS
(das kommt nämlich dann noch hinzu ...))

Re(10): JavaScript AJAX

Knurz — Wed, 26 Mar 2008 14:50:21 GMT

Ich beginn mal hier http://de.wikipedia.org/wiki/XMLHttpRequest ...

Jetzt noch ein Example finden wie ich aus


<p id="blabla">meintext</p>

dann eine selectliste mache

Aber das dürfte ja nichts so exotisches sein...

Re(9): JavaScript AJAX

Dr. Watson — Wed, 26 Mar 2008 14:46:59 GMT

Müssen tut gar nichts...du kannst auch serverseitig die komplette Select Liste als HTML generieren, und dann per document.getElementById("ziel-div").innerHTML = derRequestMitdemSelectDrin; das ganze zuweisen, klappt auch. Ist halt nur nicht so sauber.

Re(8): JavaScript AJAX

Knurz — Wed, 26 Mar 2008 14:44:37 GMT

Ja leider ist für mich das Javascript ein bisserl ein Rätsel. Ich hab mir das von Dir angesprochene schonmal so angeschaut mit dem Requester usw. Jedoch geht jedes tutorial von was anderem aus, manche sagen die Trennung kann "irgendwie" erfolgen (ähnlich CSV), die anderen sagen es muß XML sein und man muß sich durch die XMLDOM durchiterieren...

Re(7): JavaScript AJAX

Dr. Watson — Wed, 26 Mar 2008 14:19:14 GMT

Auf die Ajax Funktionatlität musst deswegen ja nicht verzichten...nur dich halt selbst um die Verbindung im Hintergrund kümmern, Request absetzen, und bei erfolgreicher Antwort, nach dem selben Muster (getElementsByTagName) die einzelnen Elemente aus deinem XML rausholen, und dann weiterverwenden (Select erzeugen etc.). Ganz ohne ~100KB Framework

Re(6): JavaScript AJAX

Knurz — Wed, 26 Mar 2008 14:15:22 GMT

Ja Du hast scho recht langsam gehts mir auch schwer am Nerv..

Aber der dynamische asynchrone Aspekt ist halt schon sehr nett... mir fehlen halt noch dazu die DOM Grundlagen für JS.

Danke aber für Deine Zeit

Wenn du fix weißt, wo du das Select Feld haben willst (z.b. einem DIV), dann
kannst gleich diesem eine fixe ID geben, und dann per
document.getElementById("meineDivId").appendChild(this.editField); das Select
feld dranhängen...ist halt weniger sauber.

Ja das kann ich machen, ich übergebe der Funktion ja die ID, das sollte prinzipiell klappen!! Danke Dir, werd das gleich testen (und schreib rein ob es geklappt hat ).

Re(5): JavaScript AJAX

Dr. Watson — Wed, 26 Mar 2008 14:12:31 GMT

Uff, das this bezieht sich wohl auf den Editor, der das select Feld irgendwo anhängen will.

Da fehlt mir jetzt leider auch die Zeit, um das durchzutesten, aber genau sowas ist der Grund, warum ich JS Frameworks meide...einfach selbst via DOM machen und fertig, ohne dieses kranke JS OOP

Wenn du fix weißt, wo du das Select Feld haben willst (z.b. einem DIV), dann kannst gleich diesem eine fixe ID geben, und dann per document.getElementById("meineDivId").appendChild(this.editField); das Select feld dranhängen...ist halt weniger sauber.

Re(5): JavaScript AJAX

Dr. Watson — Wed, 26 Mar 2008 14:12:31 GMT

Re(4): JavaScript AJAX

Knurz — Wed, 26 Mar 2008 14:03:29 GMT

Schau mal in der Fehler-Konsole vom FF, welcher Fehler ausgespuckt wird, oder
besser noch, installier dir die Firebug Erweiterung, und beobachte was dort
ausgespuckt wird. Wenn du es ganz genau wissen willst, kannst den Ablauf damit
auch debuggen.

Ah supi danke! Das check ich gleichmal ab, ich hab ja schon gesehen das ein Fehler ist.

Melde mich noch mit positiv/negativ Rückmeldung

Edit:

ok also Fehler wird mal einer geworfen, nehme auch an das der das Übel sein wird, aber keine Ahnung wie man ihn löst:

this.form has no properties

und er verweist auf diese Zeile hier:

this.form.appendChild(this.editField);

Re(4): JavaScript AJAX

Knurz — Wed, 26 Mar 2008 14:03:29 GMT

Schau mal in der Fehler-Konsole vom FF, welcher Fehler ausgespuckt wird, oder
besser noch, installier dir die Firebug Erweiterung, und beobachte was dort
ausgespuckt wird. Wenn du es ganz genau wissen willst, kannst den Ablauf damit
auch debuggen.

Ah supi danke! Das check ich gleichmal ab, ich hab ja schon gesehen das ein Fehler ist.

Melde mich noch mit positiv/negativ Rückmeldung

Re(3): JavaScript AJAX

Dr. Watson — Wed, 26 Mar 2008 13:58:12 GMT

Hm, so weit kannst nicht entfernt sein von der richtigen Lösung.

Schau mal in der Fehler-Konsole vom FF, welcher Fehler ausgespuckt wird, oder besser noch, installier dir die Firebug Erweiterung, und beobachte was dort ausgespuckt wird. Wenn du es ganz genau wissen willst, kannst den Ablauf damit auch debuggen.

Re(2): JavaScript AJAX

Knurz — Wed, 26 Mar 2008 13:43:41 GMT

Negative on that, Houston

Also ich hab mir in dem PHP jetzt eine Methode gemacht um von der DB die Werte rauszukriegen und die nach Deinem Vorschlag zu präsentieren:


<categories>
<cat>
<key>1</key>
<value>Sehr gut</value>
</cat>
</categories>
<categories>
<cat>
<key>2</key>
<value>Hervoragend</value>
</cat>
</categories>
<categories>
<cat>
<key>3</key>
<value>Gut</value>
</cat>
</categories>
<categories>
<cat>
<key>4</key>
<value>Akzeptabel</value>
</cat>
</categories>
<categories>
<cat>
<key>5</key>
<value>Mies</value>
</cat>
</categories>

Das hat leider nicht geklappt.. auch das weglassen von categories um die einzelnen cat herum hats nicht gebracht (habe Deine 2 Methoden getestet).

Leider kommt sobald ich auf den Text drück und das Script eigentlich querien sollte nix raus (wie wenn display style auf none gesetzt würde)...

Re(8): JavaScript AJAX

Knurz — Wed, 26 Mar 2008 08:23:34 GMT

JS Debugging bzw. Microsoft AJAX verwenden? Ja klar ...

Ahso JScript bzw. irgendwelche MS Komponenten dürfen NICHT eingebunden werden. Das ist die einzige Vorgabe die ich dabei hab ..

Webcast zu AJAX und PHP: http://www.asp.net/learn/webcasts/webcast-116.aspx

Gracias!

Re(7): JavaScript AJAX

Undying — Wed, 26 Mar 2008 08:21:42 GMT

Kann das auch mit PHP ?

JS Debugging bzw. Microsoft AJAX verwenden? Ja klar ...
Webcast zu AJAX und PHP: http://www.asp.net/learn/webcasts/webcast-116.aspx
Keine Ahnung ob was zu debugging dabei ist ...

Re(6): JavaScript AJAX

Knurz — Wed, 26 Mar 2008 08:16:43 GMT

Für eine Website musst du keine Solution machen....

Kann das auch mit PHP ?

Testdriven Development ist doch viel lustiger :D

Ist eh nur für eine private Page, muß also nicht wirklcih diversen Qualitätsansprüchen genügen

Re(5): JavaScript AJAX

Undying — Wed, 26 Mar 2008 08:14:35 GMT

Ja das Debugging war/ist ja schon sehr gut unter den VS. Mag aber nicht den
Overhead den so eine VS Solution mit sich bringt, nutze es unter Windows auch
nur im Notfall.

Für eine Website musst du keine Solution machen....

Jo... Der Dr. Watson hat den Code etwas erklärend hingeschrieben, werds mal so
probieren bevor ich Debug

Testdriven Development ist doch viel lustiger :D

Re(4): JavaScript AJAX

Knurz — Wed, 26 Mar 2008 08:09:08 GMT

Wenn du einmal JS Debugging mit VS08 gesehen hast willst nix anderes mehr :D

Ja das Debugging war/ist ja schon sehr gut unter den VS. Mag aber nicht den Overhead den so eine VS Solution mit sich bringt, nutze es unter Windows auch nur im Notfall.

Aber gut falls du andere Plattform hast bringts dir sowieso nix ...

Jo... Der Dr. Watson hat den Code etwas erklärend hingeschrieben, werds mal so probieren bevor ich Debug

Re(3): JavaScript AJAX

Undying — Wed, 26 Mar 2008 08:04:48 GMT

Wenn du einmal JS Debugging mit VS08 gesehen hast willst nix anderes mehr :D

Aber gut falls du andere Plattform hast bringts dir sowieso nix ...

Re(2): JavaScript AJAX

Knurz — Wed, 26 Mar 2008 07:13:24 GMT

Ok danke für die extrem ausführliche Erklärung!
Werde das mal ausprobieren und das Ergebnis hier posten..

Re(2): JavaScript AJAX

Knurz — Wed, 26 Mar 2008 07:12:26 GMT

(Visual Studio 2008 Express gibts kostenlos)
Breakpoint setzen und ab geht die post ...

das gibts gottseidank auf der Plattform wo ich arbeite nicht.

Re: JavaScript AJAX

Dr. Watson — Tue, 25 Mar 2008 23:14:19 GMT

Der Code macht folgendes:

Request auf /url/to/option/list (hier musst du natürlich ne gültige URL zu angeben, zu dem Skript, welches den gewünschten XML Output generiert).

Wenn der Request klappt (onSuccess), dann wird noch ne kurze Hilfsfunktion (getData) definiert. Dann wird jedes Element vom Typ "Cat" durchgegangen, ein neuer Eintrag in der Liste erzeugt (DOM - createElement - "option".

Danach setzt er jeweils Bezeichnung und Wert des Listeneintrags auf die Werte der Kategorie aus dem XML.

Danach folgt noch eine kleine Browserweiche für den IE, Element wird an die Liste angefügt, und letztendlich selektiert.

Das XML muss rein schätzomativ so aussehen:

Listen-Eintrag
Wert

Listen-Eintrag 2
Wert 2

Wenn das nicht klappt, musst du (eigentlich nach XML Standards) noch ein Zusammenfassendes Element um die einzelnen cats herum legen, z.b. ein und .

Teste das mal...

Re: JavaScript AJAX

Undying — Tue, 25 Mar 2008 22:17:33 GMT

Ich kenn das eigenartige Framework zwar nicht, aber generell ist er Response vom Server entweder XML oder JSON.
Oder in manchen (einfachen) fällen ein ganz einfacher string ohne bestimmtes "format".

Am einfachsten wärs mal du nimmst mal einen vernünftige IDE und debuggst mal den Code. (Visual Studio 2008 Express gibts kostenlos)
Breakpoint setzen und ab geht die post ...

JavaScript AJAX

Knurz — Tue, 25 Mar 2008 20:29:40 GMT

Hallo.

Für eine Website hab ich etwas Javascript eingebaut, u.a. das AJAX Framework von script.aculo.us. Genauer gesagt gehts um den Ajax.InPlaceEditor von script.aculo.us. (http://wiki.script.aculo.us/scriptaculous/show/Ajax.InPlaceEditor )

Prinzipiell funktioniert der sehr gut, jetzt hab ich nur ein Problem mit dem weiter unten angegebenen Code "In-Place edits with select lists". Ums kurz zu machen: Ich kenn mich da überhaupt nicht aus, welchen Response das Script vom Server erwartet ? Reicht da (wie beim normalen InplaceEditor) eine Liste ?

Danke von einem DOM-Unwissenden

Hier der Code:


function setupCategoryEditor(el, url) {
    var editor=new Ajax.InPlaceEditor(el, url);
    Object.extend(editor, {
        createEditField: function() {
            var text=this.getText();

            var field=document.createElement("select");
            field.name="value";

            this.editField=field;
            this.form.appendChild(this.editField);

            new Ajax.Request('/url/to/option/list', {
                onSuccess: function(req) {
                    // Get the text from an XML tag.
                    var getData=function(el, which) {
                        stuff=el.getElementsByTagName(which);
                        return stuff[0].firstChild.nodeValue;
                    };
                    var cats=req.responseXML.getElementsByTagName("cat");
                    $A(cats).each( function(cat, idx) {
                        var op=document.createElement("option");
                        op.value=getData(cat, "value");
                        op.text=getData(cat, "key");
                        if(window.ActiveXObject) {
                            field.options.add(op);
                        } else {
                            field.appendChild(op);
                        }

                        // Select the current item
                        if(op.text == text) {
                            field.selectedIndex=idx;
                        }
                    });
                }
                });
        }
    });
}