Hi zusammen, ich hab da ein Problem mit Firefox und dem Prototype JS Framework wie es aussieht.

Ich habe ein Formular mit einem Dropdown Menü, einer Textarea und einem Button.
Das Dropdown ist zur Auswahl des Inhaltes der Textarea da und läd per Ajax.Updater den Inhalt aus der Datenbank und updatet die Textarea.
Der Button ist zum Speichern des Inhaltes, hier wird per Ajax.Request die zu speichernden Daten an eine PHP Datei gesendet die diese auch in Datenbank speichert.

Nach dem Speichern wird die Textarea nicht mehr aktualisiert wenn ich mit der Dropdownbox was anders auswähle.
Firebug zeigt zwar dass eine Änderung statt gefunden hat und auch den neuen Inhalt aber die Oberfläche zeigt dennoch den alten Inhalt.

Der IE8 macht dass alles ohne Probleme!

Ich hab folgende JavaScript-Funktionen:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

function saveNewContent(server){     var id = $('choosepage').getValue();     var content = $('txt').getValue();     var params = 'content='+content+'&id='+id;     var url = server+'content/savePageContent.php';     var myRequest = new Ajax.Request(url, {       method: 'post',       parameters: params,       onSuccess: showSaved(content),       onFailure: alert('Fehler beim Speichern des Contents')     }); }   function showSaved(content){     var text = 'Die Eingabe wurde erfolgreich gespeichert!';     alert(text);     $('txt').update(content); }   function loadNewContent(aktion, params, server){     if(aktion == 'newpw'){         var url = server+'content/lostpw.php';         var myUpdater = new Ajax.Updater({ success: 'leftbox' }, url, {             method: 'post',             parameters: params       } );     }         if(aktion == 'changeAdminContentBox'){         var param = 'choosepage='+$('choosepage').getValue();         var url = server+'content/changeAdminContentBox.php';         var myUpdater = new Ajax.Updater('txt', url, {             method: 'post',             parameters: param,             onComplete: function (){ $('txt').innerHTML; }       } );     } }

Und hier dass Formular dazu:

HTML-Code:

<form method="post" action="index.php?site=adminmenu&show=content&action=update">

<select name="choosepage" id="choosepage" onchange="loadNewContent('changeAdminContentBox','','http://localhost/')">
<option value="1" >Seite - Index</option>
<option value="2" >Seite - all</option>
<option value="3" >Seite - Kategorien</option>
<option value="4" >Seite - Topgalerien</option>
<option value="5" >Seite - Galerien</option>
<option value="6" >Kategorie - Sonstige</option>
<option value="7" >Kategorie - Auto</option>
.
.
.
</select>

<textarea class="text" name="txt" id="txt" cols="90" rows="25">
Noch kein Text hinterlegt!
</textarea>

<input type="button" class="submit" onClick="saveNewContent('http://localhost/');" value="&Uuml;bernehmen!">

</form>

Ich hoffe jemand kann mir da sagen was zu tun ist damit er auch nach dem Speichern weiterhin den Inhalt auch anzeigt der ja laut Firebug korrekt geladen wird.

Gruß
Rip

Hi,

kann man das online bewundern? Ich kann nichts Verdächtiges sehen, ausser dass im onclick ein return false; fehlt, so dass das Formular zusätzlich abgesendet wird. Ist das gewollt?

LG

Derzeit kann man es noch nicht online sehen. Es ist ein Projekt dass ich für meine Firma mache und die entscheiden wanns online geht.

Also es ist ein normaler Button der das Formular nicht absendet wenn man drauf klickt, kein Submitbutton. Sonst würde ich dir recht geben dass da ein "return false;" fehlt.

Moin Rip,

da sind so einige mögliche Fehlerursachen.

z.B. scheint der FF da etwas zu cachen, Abhilfe schafft ein wechselnder Parameter in der URL.

Dann dieses:

Code :

1 2	onSuccess: showSaved(content),       onFailure: alert('Fehler beim Speichern des Contents')

diese beiden Anweisungen werden immer augeführt, du musst sie in einer anonymen Funktion kapseln, wie du es in loadNewContent() tust.

Noch dieses:

Code :

1	showSaved(content)

Das bewirkt so garnichts, damit setzt du den Wert des Textareas auf den Wert, den es schon hat.
Wenn du willst, dass dort die Antwort des Servers eingetragen wird, musst du der Funktion transport.responseText übergeben.

letztendlich: Prototype hat da seine eigene Vorgehensweise für die zu übergebenen Parameter, verwende besser diese, ich bin mir nicht sicher, ob die Daten bei deiner Variante ordentlich codiert werden.


Inkl. der genannten Änderungen würde das so aussehen, das Problem tritt damit bei mir nicht mehr auf:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

<script type="text/javascript"> <!-- function saveNewContent(){     var url = 'content/savePageContent.php?'+new Date().getTime();     new Ajax.Request(url, {       method: 'post',       parameters: {id:$F('choosepage'),content:$F('txt')},       onSuccess: function(transport){showSaved(transport.responseText);},       onFailure: function(){alert('Fehler beim Speichern des Contents');}     }); }   function showSaved(content){     alert('Die Eingabe wurde erfolgreich gespeichert!');     $('txt').update(content); }   function loadNewContent(aktion, params){      if(aktion == 'newpw'){         var url = server+'content/lostpw.php';         var myUpdater = new Ajax.Updater({ success: 'leftbox' }, url, {             method: 'post',             parameters: params       } );     }     if(aktion == 'changeAdminContentBox'){           var url = 'content/changeAdminContentBox.php?'+new Date().getTime();           new Ajax.Updater('txt', url, {             method: 'post',             parameters: {choosepage:$F('choosepage')},             onFailure:function(){alert('Inhalt konnte nicht geladen werden');}       } );     } } //--> </script>

(Die Variable Server hab ich mal herausgenommen, Anfragen an andere Server als den aktuellen funktionieren derzeit eh nicht).

Danke für die schnelle Hilfe, doch gebracht haben die Änderungen nichts. Die Textarea bleibt weiterhin mit dem zu letzt abgesendeten Text bestehen obwohl der FireBug was anderes sagt ändert sich nichts an der Textarea.

Zufällig noch irgendwelche Ideen die mir weiter helfen könnten?

Was genau sagt denn Firebug...bei mir sagt er nämlich garnichts, egal ob es klappt oder nicht ?

Nun die Firebug Konsole zeigt an dass der Post abgesetzt worden ist. Wenn ich das Select-Feld ändere (ohne vorher gespeichert zu haben). Wenn ich dann etwas eintrage in die Textarea und auf den Button zum speichern klicke zeigt er ebenfalls an dass der Post abgesendet wurde. Die Datenbank wird auch dem entsprechend geändert. Derzeit gibts nur eine leere Rückmeldung vom PHP-Skript dass den Datenbankeintrag macht, da dort noch keine Rückmeldung implemetiert ist.
Wenn ich nun aber nach dem speichern im Select-Feld was anderes auswähle wird der Post abgesetzt, die entsprechenden Daten werden geholt und im HTML ausgetauscht aber an der Oberfläche ist nichts sichtbar von der Änderung.

Zum Verständnis habe ich auch ein paar Bildchen gemacht.

Hier ist noch alles in Ordnung beim wechsel des Inhaltes durch Veränderung des Selectfeldes:
http://img9.imageshack.us/my.php?image=bild1nqt.jpg

Speicherung der Änderungen in der Textbox (Wenn ich direkt in die DB gucke is es auch geändert):
http://img12.imageshack.us/my.php?image=bild2jae.jpg

Neue Auswahl in dem Select-Feld:
http://img10.imageshack.us/my.php?image=bild3o.jpg

http://img10.imageshack.us/my.php?image=bild4m.jpg

Hi,

kann es sein, dass die Bilder nach dem Upload drastisch verkleinert wurden? Ich weiß, dass meine Augen mittlerweile schlecht sind, aber da hätte ich selbst zu meinen besten Zeiten nichts drauf erkennen können.

LG

nimm mal das .th aus den Pfaden

Zitat von Sven Mintel

nimm mal das .th aus den Pfaden

Ahhh...

Ich vermute angesichts der Bildbeweise folgendes:
Der Updater verwendet ja die Prototype-Methode update(), um den Inhalt zu erneuern.
Diese wiederum setzt die innerHTML-Eigenschaft des Zielelementes neu.
Aber: Um den Inhalt eines <textarea> per zu Ändern, wird idR. dessen value-Eigenschaft genutzt.

Warum das mal geht, und mal nicht, frag mich nicht.

Also der Lösungsvorschlag: verzichte generell auf den Ajax.Updater, sofern es Formularelemente betrifft, und verwende stattdessen den Ajax.Request mit einer callback-Funktion für onSuccess, welche das value-Attribut des textarea mit dem Inhalt von transport.responseText füllt.

Hi,

Zitat von Sven Mintel

Diese wiederum setzt die innerHTML-Eigenschaft des Zielelementes neu.
Aber: Um den Inhalt eines <textarea> per zu Ändern, wird idR. dessen value-Eigenschaft genutzt.

da wär ich jetzt erstmal nicht drauf gekommen. Ohne nachzuschauen hätte ich innerHTML genommen, da das textarea-Element ja kein value-Attribut hat.

Zitat von Sven Mintel

Warum das mal geht, und mal nicht, frag mich nicht.

Tja, das wird wohl das ewige Geheimnis...usw.
Mir persönlich ist dieses Verhalten aber auch noch nicht untergekommen. Da bin ich ja jetzt mal gespannt.

LG

Zitat von Sven Mintel

Also der Lösungsvorschlag: verzichte generell auf den Ajax.Updater, sofern es Formularelemente betrifft, und verwende stattdessen den Ajax.Request mit einer callback-Funktion für onSuccess, welche das value-Attribut des textarea mit dem Inhalt von transport.responseText füllt.

Doofe Frage, aber wie kann ich dass value-Attribut der textarea manipulieren?
Mir ist jedenfalls neu dass das textarea-Elment ein value-Attribut besitzt dass man für sowas nutzten kann.

Gibt es sowas wie eine setValue()-Methode?

Statt dem Updater hab ich nu sowas ausprobiert was aber auch nicht den gewünschten Effekt hat:

Code :

1	onSuccess: function(transport){ $F('txt') = transport.responseText }

Zitat von RipmaV

Doofe Frage, aber wie kann ich dass value-Attribut der textarea manipulieren?
Mir ist jedenfalls neu dass das textarea-Elment ein value-Attribut besitzt dass man für sowas nutzten kann.

Das textarea-Element besitzt auch kein value-Attribut, aber der Knoten hat eine value-Eigenschaft.

Anwendbar auf: Klick-Buttons, Checkboxen, Felder für Datei-Upload, Versteckte Elemente, Passwortfelder, Radio-Buttons, Abbrechen-Buttons, Absendebuttons, einzeilige Eingabefelder, mehrzeilige Eingabefelder, Auswahllisten

Probier's mal so:

Code :

1	onSuccess: function(transport){ $('txt').value = transport.responseText }

LG

Ah danke werd ich am Montag gleich mal ausprobieren und dann berichten obs so funktioniert hat. ich hoffe es jedenfalls, ansonsten werd ich zum speichern dass ganze nu doch abschicken so dass er die seite neu aufbaut nach dem speichern.

----- Edit -----
Danke für die Hilfe, damit funktioniert es wunderbar!