Inhalt von Ajax Request zurücksetzen ?
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
abgeben
ansicht
aufruf
code
dank
dom
ergebnis
funktionieren
funktioniert danke
http
inhalt
original inhalt
problem
rein url
schalter
start
status
test
url
vereinfachtes beispiel
-
Hallo
ich möchte (durch Klick ausgelösten) Ajax Request machen,
und Ergebnis dann in einem DIV anzeigen. Das klappt auch,
aber wie bekomme ich es hin, dass ich den durch Ajax erzeuhten Inhalt
wieder zurücksetzen kann, also Ansicht wieder so wie vor dem Klick war ... ?
hier mein Code
<html> <head> <title>Test</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script type="text/javascript"> var xmlhttp; function loadXMLDoc(url,cfunc) { if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=cfunc; xmlhttp.open("GET",url,true); xmlhttp.send(); } function showContent() { loadXMLDoc("ajax_info.txt",function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("ergebnis").innerHTML=xmlhttp.responseText; } }); } function resetContent() { var oldcontent = document.getElementById("ergebnis").innerHTML; document.getElementById("ergebnis").innerHTML=oldcontent; } </script> </head> <body bgcolor="#FFFFFF" text="#000000"> <br /> <br /> <a href="#" onclick="showContent()">START</a> --- <a href="#" onclick="resetContent()">RESET</a> <br /> <br /> <div id="ergebnis"> <p>noch nix da</p> </div> <br /> <br /> </body> </html>
Der Klick mit showContent() funktioniert,
es wird der Inhalt von ajax_info.txt im DIV id="ergebnis" angezeigt
aber der Klick mit resetContent() funktioniert nicht,
damit soll wieder der "Original" Inhalt DIV id="ergebnis" angezeigt werden
also in diesem Beispiel<p>noch nix da</p>
Wie kann ich einen durch Ajax (JavaScript) geändertes DIV Inhalt
wieder zurück zum Original (vor Änderung) zurück bekommen ???
also so, dass wieder der ursprüngliche Inhalt angezeigt wird ....
... ohne diesen vorher zu kennen, also nicht oldcontent = '<p>noch nix da</p>';
sondern dass die Funktion (JavaScript) das dynamisch auslesen kann
Bitte um Hilfe, Danke
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Ungetestet, aber sollte funktionieren, wenn du den Inhalt des <DIV> vor dem Request speicherst... (habe Code entsprechend geändert...)
cptgame schrieb:
[...]
<html> <head> <title>Test</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script type="text/javascript"> var xmlhttp; var oldcontent; function loadXMLDoc(url,cfunc) { if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=cfunc; xmlhttp.open("GET",url,true); xmlhttp.send(); } function showContent() { oldcontent = document.getElementById("ergebnis").innerHTML; loadXMLDoc("ajax_info.txt",function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("ergebnis").innerHTML=xmlhttp.responseText; } }); } function resetContent() { document.getElementById("ergebnis").innerHTML=oldcontent; } </script> </head> <body bgcolor="#FFFFFF" text="#000000"> <br /> <br /> <a href="#" onclick="showContent()">START</a> --- <a href="#" onclick="resetContent()">RESET</a> <br /> <br /> <div id="ergebnis"> <p>noch nix da</p> </div> <br /> <br /> </body> </html>
[...]
-
hallo
ja funktioniert .. Danke
genial ... einfach den oldcontent schon bei Aufruf von showContent() speichern
eigentlich ja logisch ... hätte man (ich) auch drauf kommen können
(.. in die Eche geh und mich schäm ... )
DANKE !!!
-
Verbessern könntest du daran jetzt noch, dass nur der alte Content gespeichert wird, wenn der Request erfolgreich war und den Reset nur durchführst, wenn andere Content geladen und noch nicht wieder hergestellt wurde...
function showContent() { loadXMLDoc("ajax_info.txt",function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { oldcontent = document.getElementById("ergebnis").innerHTML; document.getElementById("ergebnis").innerHTML=xmlhttp.responseText; } }); } function resetContent() { if (oldcontent) { document.getElementById("ergebnis").innerHTML=oldcontent; oldcontent = null; } } -
naja, hat aber noch ein Problem
... wenn jemand 2x hintereinander auf START klickt,
dann wird der neue (nachgeladene) Content zum oldcontent
also nach 2x Klick auf Start ist dann Klick auf RESET auch wieder der neue
(nachgeladene) Inhalt, und nicht das Original Inhalt aus dem Quellcode.
vielleicht irgendwie als globale Variable oldcontent vorher auslesen oder so ?
also direkt aus DOM (Original Quellcode) ... weil mit getElementById wird
wenn man 2x START klickt ja nicht mehr der Original-Inhalt gelesen,
sondern der "neue"
hier mal ein vereinfachtes Beispiel nei jsfiddle http://jsfiddle.net/75czzk27/
ist dort ohne den AJAX request, der funktioniert ja,
aber da sieht man das Problem, was passiert, wenn man zwei mal START klickt
und mit drittem Klick auf RESET ... dann bleibt der "neue" Inhalt
oO. -
Der Orginalinhalt ist ja nach dem ersten Klick nicht mehr im DOM. An den würde man nur noch herankommen, in dem man direkt aus der Datei aus dem Server liesst. Das einfachste wäre daher eher, eine Art globalen Schalter einzubauen, der zuerst 0 ist. showContent setzt ihn auf 1. Wenn er bereits 1 ist, wird keine erneute Zuweisung von oldcontent ausgeführt. resetContent setzt den Schalter auf 0.
-
function showContent() { loadXMLDoc("ajax_info.txt",function() { if (xmlhttp.readyState==4 && xmlhttp.status==200 && xmlhttp.responseText != document.getElementById("ergebnis").innerHTML) { oldcontent = document.getElementById("ergebnis").innerHTML; document.getElementById("ergebnis").innerHTML=xmlhttp.responseText; } }); }[/quote] -
jupp, Danke
das mit dem Schalter ist ne gute Idee
aber der Code von @staymyfriend scheint auch zu funktionieren
mit der Zusatz-Bedingung
... && xmlhttp.responseText != document.getElementById("ergebnis").innerHTML
hab das auch mal in der vereinfachten Version (ohne AJAX)
in jsfiddle rein: http://jsfiddle.net/75czzk27/1/
funktioniert :=)
Danke
und auch die Variante von @mein-wunschname
mit einem Schalter ... in jsfiddle hier http://jsfiddle.net/75czzk27/2/
funktioniert auch :=)
Danke
PS: würde ja gerne Positive Bewerung abgeben für scnelle und kompetente Hilfe,
kann ich aber leider nicht, weil Hürde für Bewertungs-System hier wohl zu streng ist
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
