kostenloser Webspace werbefrei: lima-city


Inhalt von Ajax Request zurücksetzen ?

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    cptgame

    cptgame hat kostenlosen Webspace.

    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

  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. 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>

    [...]
  4. Autor dieses Themas

    cptgame

    cptgame hat kostenlosen Webspace.

    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 !!!

  5. 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;
    	}
    }
  6. Autor dieses Themas

    cptgame

    cptgame hat kostenlosen Webspace.

    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.
  7. mein-wunschname

    mein-wunschname hat kostenlosen Webspace.

    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.
  8. 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]
  9. Autor dieses Themas

    cptgame

    cptgame hat kostenlosen Webspace.

    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

  10. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!