| 

.NET C# Java Javascript Exception

2
Hallo Leute,
folgende Situation ist für mich zum jetzigen Zeitpunkt einfach nicht optimierbar:
Ich habe ein PHP-Dokument in dem ich HTML-Forms generiere. Weiterhin nutze ich Ajax/Javascript um dieses Formular ein wenig interaktiver zu gestalten.
So verwende ich Ajax, um mehrere DropDown Boxen zu kombinieren und abhängig Inhalte nachzuladen.

Kurz: Box1 hat eine gewisse Auswahl und Box2 wird nachgeladen, sobald Box1 selektiert wurde.
Ich weiß also erst nach Selektion in Box1, was in Box2 reingehört.

Dazu verwende ich:
$.ajax({
type: "POST",
url: "request.php?param="+document.getElementById("box1_id",
success: function(data){
var json = $.parseJSON(data);
document.getElementById("box2_DIV_id").innerHTML = json.div_a;
}
});


Nach dem absenden kann es auftreten, dass ich mit history.back() zurück muss, um bestimmte Eingaben anzupassen.

Hat jemand eine Idee, wie ich die nachgeladene Box2 wieder angezeigt bekomme? Denn wenn ich jetzt zurück gehe, fehlt die box2 natürlich oder ist dementsprechend leer.

Ich habe etwas über history.push() und .pop() gelesen, aber da ich keinen Seitenwechsel auf dieser einen Seite habe, sondern über ajax und ein PHP-Script (JSON-Serialisiert) ein DIV nachlade, greift diese Variante, an dieser Stelle nicht.

Hoffe mir kann jemand weiterhelfen.

Vielen Dank und beste Grüße

Spicejam
News:
16.03.2015
spicejam 853 2 6
1 Antwort
1
Mit HTMP5 History würde das gehen.

Hier etwas Beispielcode, damit müsstest du klar kommen.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style></style>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#s1').on('change', function(e) {
history.pushState({v:$(this).val()}, null, "#" + $(this).val());
$('#s2').val($(this).val());
});

$(window).on("popstate", function(e) {
var d = e.originalEvent.state;
console.debug(d);
$('#s2').val(d.v);
});
});
</script>
</head>
<body>
<select id="s1">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="s2">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</body>
</html>
17.03.2015
phg 1,6k 3
Vielen Dank und sorry für die verspätete Antwort. Dieser Lösungsweg geht, so wie ich vermute, folgendermaßen vor: Nachgeladener Content eines Elements wird in der history "aktualisiert" und erscheint beim zurückspringen wieder als "ursprünglicher"?
spicejam 26.03.2015
Kann man so sagen.
Du speicherst zusätzliche Informationen in der History und verwendest diese Infos im popstate-Handler um einen Zustand herzustellen der durch DOM-Manipulationen entstanden ist die der Browser normalerweise nicht in der Histroy erfassen würde.
Der Browser kümmert sich nur darum, dass die zusätzlichen Infos zum richtigen Zeitpunkt im popstate-Event für dich verfügbar sind.
phg 26.03.2015

Stelle deine Javascript-Frage jetzt!