DIV-Inhalt mittels XML und Ajax ändern

**kkapsner** · 07-09-2016, 00:44

Anstatt .html() musst du .innerHTML verwenden (Auslesen und Zuweisen). Dann brauchst du natürlich noch das holen der JSON Daten, aber da hast du ja oben schon einen Ansatz, und das .ready. Das kannst du aber getrost vergessen, wenn du deine <script>-Node einfach ganz ans Ende des <body>s packst.

**tsseh** · 07-09-2016, 09:08

Zitat von Mufasa

Ich glaube hier hab ich nicht ganz richtig erklärt was ich meinte. Also mein Sprachdateien sind ja natürlich viel größer als nur dieses kleine Beispiel oben. Auch die Zielseite hat entsprechend viel mehr DIVs... da wäre z.B. die Navigationselemente, Überschriften, Content, etc... Die müssen bei Klick auf die neue Sprache alle ersetzt werden. Das meinte ich mit "in verschiedene DIVs laden".

ja schon klar, du kannst das doch aber alles (also letztendlich die ganze seite) in das template packen. bei manchen sachen die übergreifend sind wie navigation, header, footer sollte man da eine ausnahme machen und diese in separate templates auslagern, der restaber, also der content mit überschriften etc., kommt in ein template

Zitat von Mufasa

Mir ist nämlich gerade nicht klar wie ich alle Inhalte mit nur diesem einen "Input-DIV" (nenne ich das jetzt mal) einfügen kann.

in dieses eine div kommt die ganze seite, diese ist also durch das div gekapselt.

Zitat von Mufasa

aber wenn ich das jetzt richtig begreife, wird diese bei mir genannte "sampleArea" ja gar nicht im Dokument angezeigt, richtig?!?

falsch, in die sampleArea kommt das template, das ist das was du dann siehst

Zitat von Mufasa

Und durch die doppelten geschweiften Klammern kann ich meine Variablen aus JSON in jedes Element einfügen.

ja, in personTpl (bei dir) steht das template, da werden alle {{var}} teile ersetzt und das daraus gebildete html in die sampleArea geschrieben.

Zitat von Mufasa

Was genau ist das data-Attribut hier?

https://developer.mozilla.org/de/doc...ata_attributes

Zitat von Mufasa

Wie genau müsste der Code denn aussehen in rein Javascript?

Code:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="mustache.js"></script>
  </head>
  <body>
  <div id="content"></div>
  <script id="template" type="x-tmpl-mustache">
    <button class="lang" data-lang="de">{{de}}</button><button class="lang" data-lang="en">{{en}}</button>
    {{text}}
  </script>
  <script>
    (function()
    {
      function changeLang(lang)
      {
        var xhr = new XMLHttpRequest();
        xhr.open("GET", lang + '.json');
        xhr.onreadystatechange = function ()
        {
          if (this.readyState == 4 && (this.status == 200 || this.status == 0))
          {
            var data = JSON.parse(this.responseText);
            var template = document.getElementById('template').innerHTML;
            var rendered = Mustache.render(template, data);
            var content = document.getElementById('content');
            content.innerHTML = rendered;
            [].forEach.call(content.getElementsByClassName('lang'), function(elem)
            {
              elem.addEventListener("click", function(e)
              {
                changeLang(e.target.dataset.lang);
              });
            });
          };
        };
        xhr.send(null);
      }
      changeLang('de');
    })();
  </script>
  </body>
</html>

de.json:

Code:

{
  "de": "deutsch",
  "en": "englisch",
  "text": "Hallo!"
}

en.json:

Code:

{
  "de": "german",
  "en": "english",
  "text": "Hi!"
}

**Mufasa** · 07-09-2016, 12:17

WOW, danke Euch beiden!! Das werde ich nachher ausprobieren

- - - Aktualisiert - - -

Äh noch ein Problem, das mir gerade aufgefallen ist.... bzw. eine Frage. Mein HTML Charset ist ja UTF-8. Wie ist es denn jetzt bei sprachlichen Sonderzeichen wie z.B. die deutschen Umlaute, Und-Zeichen oder französische/spanische Buchstaben mit Akzentstrichen, etc. - Die kann ich in den JSON-Dateien ja nicht als HTML wie ü oder & schreiben. Reicht es bei UTF-8 diese ganz normal zu schreiben und ist damit sichergestellt, dass die Texte von jedem Browser weltweit richtig dargestellt werden?

**tsseh** · 07-09-2016, 12:58

Zitat von Mufasa

Reicht es bei UTF-8 diese ganz normal zu schreiben und ist damit sichergestellt, dass die Texte von jedem Browser weltweit richtig dargestellt werden?

ja

**kkapsner** · 08-09-2016, 17:32

Wenn du ganz sicher gehen willst, kannst du im JSON auch die Unicode-Maskierung verwenden: "\uXXXX" z.B. "\u00E4" für "ä"

**Mufasa** · 09-09-2016, 02:27

Zitat von kkapsner

Wenn du ganz sicher gehen willst, kannst du im JSON auch die Unicode-Maskierung verwenden: "\uXXXX" z.B. "\u00E4" für "ä"

Das hört sich gut an! Ja denke da auf Nummer sicher zu gehen ist schon besser. Hab jetzt ewig gesucht nach einer Liste mit allen JSON Unicode-Maskierungen, habe aber keine komplette Liste gefunden. Viele Seiten schreiben viel darüber und führen auch ein paar kleine Beispiele, aber komplett für die ganzen Sprachen finde ich leider nichts. Kennst Du eine Quelle?

- - - Aktualisiert - - -

@tsseh:
Danke für Dein Skript in pur JS. In meiner Seite habe ich das mit Deinem Code noch nicht zum laufen gebracht, aber da mache ich morgen weiter. Dein Codefunktioniert bei mir in Firefox super. In Chrome und Opera erscheint gar nichts. In der Fehlerkonsole erscheint diese Fehlermeldung:Fehlermeldung.JPG. Kannst Du damit was anfangen? Das ist rein Dein Code ohne irgendwelche Änderung. Wie gesagt in Chrome/Opera kommt nur eine komplett weiße Seite.

Problem Nr.2:
In meiner Seite habe ich derzeit ja noch das JSON-Auslesen mit JQUERY drin.... jetzt ist mir aber aufgefallen, dass viele andere Skripte, die unten im body-tag sind, nicht mehr funktionieren. Ich habe auch getestet wie es ist wenn diese anderen Skripte nicht mehr unten im body stehen sondern in einer externen JS-Datei.... aber alles gleich. Wenn ich den Inhalt umschließenden script-tag <script id="personTpl" type="text/template">  entferne, dann funktionieren alle meine alten Skripte wieder. Kann das etwas damit zu tun haben, dass ich so hier JQUERY und pur JS gemixt ist, sodass die sich gegenseitig ausschließen und man sich für eine Variante entscheiden muss??? Etwas anderes fällt mir gerade nicht ein.....

**tsseh** · 09-09-2016, 10:04

Zitat von Mufasa

Das hört sich gut an! Ja denke da auf Nummer sicher zu gehen ist schon besser.

nein, das ist unnötig.

Zitat von Mufasa

Dein Codefunktioniert bei mir in Firefox super. In Chrome und Opera erscheint gar nichts.

ja im chrome gehen keine lokalen xmlhttp-requests https://bugs.chromium.org/p/chromium...etail?id=47416 wenn man chrome nicht mit "--allow-file-access-from-files" aufruft

Zitat von Mufasa

Wenn ich den Inhalt umschließenden script-tag <script id="personTpl" type="text/template">  entferne, dann funktionieren alle meine alten Skripte wieder.

scripte die mit innerHTML="..." eingefügt werden, werden nocht geparst. und selbst wenn, kann es sein, dass du diese noch anpassen musst, weil sie z.b. auf ein event warten, was schon durch ist (z.b. DOMContentLoaded)
pach also keine scripte in ein template sondern ans ende des body.
oder meinst du sie stehen schon da und machen jetzt nicht mehr das was sie vorher gemacht haben? die dom-elemente aus dem template sind ja jetzt erst später verfügbar.

Zitat von Mufasa

Kann das etwas damit zu tun haben, dass ich so hier JQUERY und pur JS gemixt ist, sodass die sich gegenseitig ausschließen und man sich für eine Variante entscheiden muss???

jquery ist auch pures JS und stellt dir nur weitere pure js-funktionen zur verfügung.

- - - Aktualisiert - - -

Zitat von tsseh

oder meinst du sie stehen schon da und machen jetzt nicht mehr das was sie vorher gemacht haben? die dom-elemente aus dem template sind ja jetzt erst später verfügbar.

mal als beispiel das registrieren der click-event-handler in meinem script. wenn das bei dir am ende vom body steht geht das mit dem template nicht mehr, da das element noch nicht im dom ist. deswegen passier das bei mir in der funktion changeLang nach dem einfügen des templates

**Mufasa** · 25-09-2016, 01:40

Hallo meine netten Helfer :-)

Wieder ist eine ganze Zeit lang verstrichen, aber nach viel probieren und testen funktioniert jetzt endlich das JSON/Mustache-Skript auf meiner Seite und übersetzt alle Inhalte zuverlässig. Das war ein langer Weg und ohne Eure Hilfe @kkapsner und @tsseh hätte ich das mit Sicherheit noch nicht geschafft. Danke nochmal!!

Jetzt ist nur noch ein Problem, das ich schon vor zwei Wochen hatte und mir das nicht ganz erklären kann.

Einiger meiner anderen JS-Skripte funktionieren nicht mehr.

Zitat von tsseh

scripte die mit innerHTML="..." eingefügt werden, werden nocht geparst. und selbst wenn, kann es sein, dass du diese noch anpassen musst, weil sie z.b. auf ein event warten, was schon durch ist (z.b. DOMContentLoaded)
pach also keine scripte in ein template sondern ans ende des body.
oder meinst du sie stehen schon da und machen jetzt nicht mehr das was sie vorher gemacht haben? die dom-elemente aus dem template sind ja jetzt erst später verfügbar.

Meine Skripte stehen unten ganz am Ende im body. Die haben genau so vorher funktioniert, jetzt gehen die meisten davon aber nicht mehr.

HTML-Code:

	<head>
		<meta charset="UTF-8" />

		<link rel="stylesheet" type="text/css" href="assets/css/xxx.css" />
		<link rel="stylesheet" type="text/css" href="assets/offcanvas/classie.css" />
		<link rel="stylesheet" type="text/css" href="assets/offcanvas/normalize.css" />
		<link rel="stylesheet" type="text/css" href="assets/offcanvas/demo.css" />
		<link rel="stylesheet" type="text/css" href="assets/offcanvas/oc.css" />
		<link rel="stylesheet" type="text/css" href="assets/css/style.css" />
		<link rel="stylesheet" type="text/css" href="assets/css/icons.css" />
		<link rel="stylesheet" type="text/css" href="assets/css/hamburgers.css" />
		<link rel="stylesheet" type="text/css" href="assets/css/simptip.css" media="screen,projection" />
		<script src="assets/js/mustache.js"></script>
		<script src="assets/js/modernizr.custom.js"></script>
	</head>
	<body>
		<div id="output"></div>
		<script id="template" type="x-tmpl-mustache">
			/*{{Texte}}*/
		</script>


		<script>												//Sprachumschaltung funktioniert
    (function()
    {
      function changeLang(lang)
      {
        var xhr = new XMLHttpRequest();
        xhr.open("GET", lang + '.json');
        xhr.onreadystatechange = function ()
        {
          if (this.readyState == 4 && (this.status == 200 || this.status == 0))
          {
            var data = JSON.parse(this.responseText);
            var template = document.getElementById('template').innerHTML;
            var rendered = Mustache.render(template, data);
            var content = document.getElementById('content');
            content.innerHTML = rendered;
            [].forEach.call(content.getElementsByClassName('flag'), function(elem)
            {
              elem.addEventListener("click", function(e)
              {
                changeLang(e.target.dataset.lang);
              });
            });
          };
        };
        xhr.send(null);
      }
      changeLang('en');
    })();
		</script>


		<script>
		var forEach=function(t,o,r){if("[object Object]"===Object.prototype.toString.call(t))for(var c in t)Object.prototype.hasOwnProperty.call(t,c)&&o.call(r,t[c],c,t);else for(var e=0,l=t.length;l>e;e++)o.call(r,t[e],e,t)};

		Array.prototype.forEach.call(										//funktioniert nicht
			document.querySelectorAll(".hamburger"),
			function(hamburger){
				var side = document.querySelector(".hoverside");
				side.addEventListener("mouseover", function(){
					hamburger.classList.add("is-active");
				}, false);
				side.addEventListener("mouseout", function(){
					hamburger.classList.remove("is-active");
				}, false);
			}
		);

		Array.prototype.forEach.call(										//funktioniert nicht
			document.querySelectorAll(".hamburger"),
			function(hamburger){
				var box = document.querySelector(".hamburger");
				box.addEventListener("mouseover", function(){
					hamburger.classList.add("is-hovered");
				}, false);
				box.addEventListener("mouseout", function(){
					hamburger.classList.remove("is-hovered");
				}, false);
			}
		);

		document.body.addEventListener("mousemove",function(event) {						//funktioniert
				if (event.pageX < 5) {
						document.body.classList.add("show-menu");
				}
		});

		var mainwrap = document.querySelector("#main-wrap");							//funktioniert nicht
		mainwrap.addEventListener("click",function() {
						document.body.classList.remove("show-menu");
		});



		var navstart = document.getElementById('start');							//funktioniert nicht
		navstart.onclick = function() {
				var content = document.getElementById('content-wrap');
				content.style.display = 'block';
		};


		var contentclose = document.getElementById('contentclose');						//funktioniert nicht
		contentclose.onclick = function(event) {
				var content = document.getElementById('content-wrap');
				content.style.display = 'none';
				event.stopPropagation();
		};



		</script>

		<script src="assets/offcanvas/classie.js"></script>
		<script src="assets/offcanvas/main.js"></script>

	</body>

Ist das eigentlich ok wenn so viele Skripte unten im body stehen? Ist es nicht besser diese auch in eine js-Datei auszulagern? Wie sollte ich das dann am besten auslagern? Alles in eine Datei und dann auch unten hin bei den anderen beiden oder oben in den header?

- - - Aktualisiert - - -

Ah und doch noch eine weitere Frage

So jetzt bei dem Skript werden die json-Sprachdateien ja aus dem gleichen Ordner geöffnet. Wie bzw. wo kann ich einen tieferen Pfad zur Datei eintragen?
Die Datei soll später liegen in assets/lang/eng.json

- - - Aktualisiert - - -

Uuund noch eine kleine Kleinigkeit

fällt mir gerade auf. Kann man in Abhängigkeit zur gewählten Sprache bestimmte css-Klassen ändern? Es geht eigentlich nur um Kleinigkeiten die angepasst werden müssten, also nicht wirklich viel. Wäre es da vielleicht besser für jede Sprache, bei der etwas geändert werden muss eine eigene css-Datei mit den jeweiligen Klassen zu erstellen und diese bei Klick zu laden? Wie genau müsste das dann gehen?

Beispiel: Das Wort "Anbieterkennzeichnung", habe ich auf englisch übersetzt mit "Provider Information".
Die id lautet #impressum. Bei Deutsch ist letter-spacing: 0.09em. Bei Englisch müsste das 0.16em werden.

**tsseh** · 26-09-2016, 09:49

Zitat von Mufasa

Meine Skripte stehen unten ganz am Ende im body. Die haben genau so vorher funktioniert, jetzt gehen die meisten davon aber nicht mehr.

das ist dein html zur laufzeit deiner scripte

HTML-Code:

<div id="output"></div>

dort existiert kein element mit klasse .hamburger, document.querySelectorAll(".hamburger") liefert eine leere collection und die schleife wird nicht durchlaufen

Code:

Array.prototype.forEach.call(										//funktioniert nicht
			document.querySelectorAll(".hamburger"),
			function(hamburger){
				var side = document.querySelector(".hoverside");
				side.addEventListener("mouseover", function(){
					hamburger.classList.add("is-active");
				}, false);
				side.addEventListener("mouseout", function(){
					hamburger.classList.remove("is-active");
				}, false);
			}
		);

das gleiche mit dem element mit id main-wrap, start und contentclose

hier wird das template erst ins dom eingefügt, dort müssen auch die scripte hin

Code:

    (function()
    {
      function changeLang(lang)
      {
        var xhr = new XMLHttpRequest();
        xhr.open("GET", lang + '.json');
        xhr.onreadystatechange = function ()
        {
          if (this.readyState == 4 && (this.status == 200 || this.status == 0))
          {
            var data = JSON.parse(this.responseText);
            var template = document.getElementById('template').innerHTML;
            var rendered = Mustache.render(template, data);
            var content = document.getElementById('content');
            content.innerHTML = rendered;
            [].forEach.call(content.getElementsByClassName('flag'), function(elem)
            {
              elem.addEventListener("click", function(e)
              {
                changeLang(e.target.dataset.lang);
              });
            });
            // HIER DEINE SCRIPTE EINFÜGEN
            
          };
        };
        xhr.send(null);
      }
      changeLang('en');
    })();

das kann da stehenbleiben, es funktioniert ja auch, weil document.body von anfang an existiert

Code:

document.body.addEventListener("mousemove",function(event) {						//funktioniert
				if (event.pageX < 5) {
						document.body.classList.add("show-menu");
				}
		});

Zitat von Mufasa

Ist das eigentlich ok wenn so viele Skripte unten im body stehen? Ist es nicht besser diese auch in eine js-Datei auszulagern? Wie sollte ich das dann am besten auslagern? Alles in eine Datei und dann auch unten hin bei den anderen beiden oder oben in den header?

ich würd alles in eins machen und dann ans ende des body

Zitat von Mufasa

So jetzt bei dem Skript werden die json-Sprachdateien ja aus dem gleichen Ordner geöffnet. Wie bzw. wo kann ich einen tieferen Pfad zur Datei eintragen?
Die Datei soll später liegen in assets/lang/eng.json

jetzt werden sie ja von diesem pfad geladen
xhr.open("GET", lang + '.json');
den kannst du ja ändern

Zitat von Mufasa

Uuund noch eine kleine Kleinigkeit

fällt mir gerade auf. Kann man in Abhängigkeit zur gewählten Sprache bestimmte css-Klassen ändern? Es geht eigentlich nur um Kleinigkeiten die angepasst werden müssten, also nicht wirklich viel. Wäre es da vielleicht besser für jede Sprache, bei der etwas geändert werden muss eine eigene css-Datei mit den jeweiligen Klassen zu erstellen und diese bei Klick zu laden? Wie genau müsste das dann gehen?

das geht schon, aber einfacher würde ich finden du machst dann klassen ala class-de, class-en, ... und packst alles in eine css datei solange das bei wenigen ausnahmen bleibt

**Mufasa** · 26-09-2016, 14:21

Zitat von Mufasa

Meine Skripte stehen unten ganz am Ende im body. Die haben genau so vorher funktioniert, jetzt gehen die meisten davon aber nicht mehr.

Zitat von tsseh

hier wird das template erst ins dom eingefügt, dort müssen auch die scripte hin

HELL YEAH!!! You're the best

____________________________________________________________________________________________

Zitat von Mufasa

Ist das eigentlich ok wenn so viele Skripte unten im body stehen?

Zitat von tsseh

ich würd alles in eins machen und dann ans ende des body

Die paar, die ich jetzt nach dem Template eingefügt hab, die sollen da bleiben, oder?!? Kann ich die dann auch in eine externe Datei packen und dort einfügen? Etwa so...

Code:

                changeLang(e.target.dataset.lang);
              });
            });
            // HIER DEINE SCRIPTE EINFÜGEN
            script.src = url;  //???
            
          };
        };
        xhr.send(null);

____________________________________________________________________________________________

Zitat von Mufasa

Wie bzw. wo kann ich einen tieferen Pfad zur Datei eintragen?

Zitat von tsseh

jetzt werden sie ja von diesem pfad geladen
xhr.open("GET", lang + '.json');
den kannst du ja ändern

Aber ich kann doch nicht einfach '.json' ersetzen mit 'assets/lang'. Deswegen hab ich gefragt, weil mir nicht klar ist wo ich den Pfad definieren kann.
Ich könnte ja eine Pfadvariable anlegen wie var langurl = "/assets/lang";
Nur wo füge ich dann langurl ein??
____________________________________________________________________________________________

Zitat von Mufasa

Kann man in Abhängigkeit zur gewählten Sprache bestimmte css-Klassen ändern?

Zitat von tsseh

das geht schon, aber einfacher würde ich finden du machst dann klassen ala class-de, class-en, ... und packst alles in eine css datei solange das bei wenigen ausnahmen bleibt

OK, ich hab ja meine Haupt-Style-Datei, das ist "style.css". Dann würde ich eine neue css-Datei anlegen (lang-style.css) und alle sprachspezifischen Änderungen da rein packen. Zum Beispiel gäbe es dann ein #impressum-de und ein #impressum-en, ... - Nur wie ersetze ich die dann immer? Meine Standard-Sprache ist ja englisch, das heißt der muss dann #impressum-en laden und bei Klick auf deutsch dann entsprechend #impressum-de.
____________________________________________________________________________________________

Gerade fällt mir noch ein Fehler auf. Wenn ich die Sprache ändere, dann werden scheinbar alle DIVs, die geändert werden neu geladen, richtig?!? Bei den meisten ist das auch kein Problem, nur mein Hauptinhalt #content-wrap ist beim Laden der Seite immer unsichtbar, das heißt display:none; - Erst mit Klick auf einen Menüpunkt (nicht Sprachwahl) wird es mit display:block; sichtbar.

Sooo wenn ich das nun sichtbar habe und die Sprache (mit Klick auf ein flag-icon) wechsle, wird das wieder unsichtbar. Hast Du eine Idee wie man das sichtbar lassen könnte? (Meine Idee weiter unten.)

Eine weitere Schwierigkeit ist dabei, dass wenn #content-wrap unsichtbar ist, dann soll auch eine Sprachumschaltung das nicht ändern. Dann würden eben nur die Menüpunkte und so geändert werden.

Ich hatte gedacht evtl. könnte man bei Klick auf eine Flagge den aktuellen value von display bei #content-wrap zum Zeitpunkt der Sprachumschaltung auslesen und dann als neuen Wert übergeben. Was hälst Du davon? Ist das so machbar? Oder fällt Dir noch eine andere/bessere Variante ein?

Dafür hab ich versucht erstmal den aktuellen Wert als alert auszugeben, aber irgendwie funktioniert das nicht. Also.... es tut sich gar nichts, kein alert. Kannst Du mal checken wo der Fehler steckt?

PHP-Code:


var flags = document.getElementsByClassName('flag');
flags.onclick = function() {
        alert(document.getElementById("content-wrap").style.display);
};

**tsseh** · 26-09-2016, 15:59

Zitat von Mufasa

Die paar, die ich jetzt nach dem Template eingefügt hab, die sollen da bleiben, oder?!? Kann ich die dann auch in eine externe Datei packen und dort einfügen?

du kannst sie in eine extra datei in eine funktion packen und diese funktion dort aufrufen

Zitat von Mufasa

Aber ich kann doch nicht einfach '.json' ersetzen mit 'assets/lang'. Deswegen hab ich gefragt, weil mir nicht klar ist wo ich den Pfad definieren kann.

der pfad hier ist lang+".json" was zu "de.json" bzw. "en.json" wird. wenn du da was anderes haben willst, schreib es einfach hin.

Zitat von Mufasa

OK, ich hab ja meine Haupt-Style-Datei, das ist "style.css". Dann würde ich eine neue css-Datei anlegen (lang-style.css) und alle sprachspezifischen Änderungen da rein packen.

kannst du machen, laden kannst du das z.b. so

Code:

if ($("#"+lang+"css").length == 0)// um nicht mehrfach zu laden bei wechsel de -> en -> de -> ...
{
  var link = document.createElement('link');
  link.id = lang+"css";
  link.rel = "stylesheet";
  link.type = "text/css";
  link.href = lang+".css"; // kannst du wieder belibig anpassen
  $('head').append(link);
}

Zitat von Mufasa

Nur wie ersetze ich die dann immer? Meine Standard-Sprache ist ja englisch, das heißt der muss dann #impressum-en laden und bei Klick auf deutsch dann entsprechend #impressum-de.

laden muss er "de.css" und "en.css" (oder ähnlich) dort ist dann der style für #impressum-de bzw. #impressum-en definiert

Zitat von Mufasa

Wenn ich die Sprache ändere, dann werden scheinbar alle DIVs, die geändert werden neu geladen, richtig?!?

ja

Zitat von Mufasa

Sooo wenn ich das nun sichtbar habe und die Sprache (mit Klick auf ein flag-icon) wechsle, wird das wieder unsichtbar. Hast Du eine Idee wie man das sichtbar lassen könnte?

du musst dir die aktuelle seite ja merken, das macht man idR. über die history und manipulation des hash. hier mal ein beispiel mit jquery mobile um mir die arbeit zu spaaren, wie das mit dem hash geht sollte ersichtlich sein.
test.zip
die abhängigkeiten

HTML-Code:

    <link rel="stylesheet" type="text/css" href="jquery.mobile-1.4.5.css" />
    <script src="jquery.js"></script>
    <script src="jquery.mobile-1.4.5.js"></script>
    <script src="mustache.js"></script>

musst du dir mal selbst runterladen.

Zitat von Mufasa

Eine weitere Schwierigkeit ist dabei, dass wenn #content-wrap unsichtbar ist, dann soll auch eine Sprachumschaltung das nicht ändern. Dann würden eben nur die Menüpunkte und so geändert werden.

warum?

Zitat von Mufasa

Ich hatte gedacht evtl. könnte man den aktuellen value von display bei #content-wrap auslesen und dann bei Klick auf eine Flagge als neuen Wert übergeben. Was hälst Du davon? Ist das so machbar?

dann würde der back-button nicht funktionieren

- - - Aktualisiert - - -

Zitat von tsseh

hier mal ein beispiel mit jquery mobile um mir die arbeit zu spaaren, wie das mit dem hash geht sollte ersichtlich sein.

wenn du jquery-mobile nicht nehmen möchtest hier mal ein einfacher router
http://krasimirtsonev.com/blog/article/A-modern-JavaScript-router-in-100-lines-history-api-pushState-hash-url
keine ahnung ob der was taugt

- - - Aktualisiert - - -

oder nochmal zurück auf null, meine aussage aus #12
http://forum.jswelt.de/ajax/62508-div-inhalt-mittels-xml-ajax-ndern.html#post400660
stimmt vermutlich nicht. du willst nicht nur mal auf die schnelle auf einer seite ein paar texte sprachabhängig machen, sondern willst eine spa erstellen, mit sprachunterstützung.
dann müsstest du alles, vom laden der sprachen über das routing bis zum template selbst bauen bzw. dir eine jeweils passende lib suchen, oder du nimmst ein aufeinander abgestimmtes gesammtpacket.
angular wäre so eins. dafür sollte man aber fit sein in js.

**tsseh** · 27-09-2016, 11:36

hier noch ein beispiel mit sammy als router mit sammy.zip

**Mufasa** · 27-09-2016, 14:16

Danke schön, das schaue ich mir auf jeden Fall an und werde mir auch die Webseite und Beispiele dort genau angucken und probieren. Aber das ganze so umzubauen dauert denke ich doch ein ganzes Weilchen. Auch wenn das ohne Routing wirklich Murks ist, da ja dann -wie Du schon sagtest- auch der Back-Button nicht funktioniert, muss ich das jetzt so schnell wie möglich online bringen und dann später umbauen auf sammy.

Gibt es eine "schnelle Lösung" für das display-Problem? Vielleicht so wie ich das angedacht hatte irgendwie zum Zeitpunkt der Sprachumschaltung den aktuellen value von display von #content-wrap auslesen und dann wieder als neuen value übergeben. Wäre das so überhaupt machbar? Das ist so die leichteste quick-and-dirty-Lösung die mir einfällt. Oder fällt Dir da vielleicht noch eine andere Möglichkeit ein?

Klar ist, dass das Ganze später auf jeden Fall mit einem Router ausgestattet werden muss. Nur blicke ich da ehrlich gesagt noch nicht wirklich durch.....

**tsseh** · 27-09-2016, 14:52

Zitat von Mufasa

Gibt es eine "schnelle Lösung" für das display-Problem? Vielleicht so wie ich das angedacht hatte irgendwie zum Zeitpunkt der Sprachumschaltung den aktuellen value von display von #content-wrap auslesen und dann wieder als neuen value übergeben. Wäre das so überhaupt machbar? Das ist so die leichteste quick-and-dirty-Lösung die mir einfällt. Oder fällt Dir da vielleicht noch eine andere Möglichkeit ein?

soweit ich das verstanden habe, zeigst du in #content-wrap deine seiten an, die du über ein menü wählst.
du musst dir also merken
* welche sprache ist aktuell eingestellt
* welche seite wird gerade angezeigt
damit kannst du
* beim umschalten der sprache die gerade angezeigte seite in der neuen sprache laden
* beim wählen einer neuen seite diese neue seite in der gerade eingestellten sprache laden
die gerade angezeigte seite kannst du dir merken wie du willst. wenn du einen menüpunkt wählst musst du dir irgendwie die damit gewählte seite merken.
ein router macht das über den hash und deckt über die history gleich den back.button ab und sorgt dafür, daß man links auf seiten (und nicht nur auf die startseite) speichern kann.
in meinem beispiel ist die aktuelle seite im parameter id von function load(lang, id) gespeichert.
rufst du load mit gemerkter sprache und neuer seite als id direkt aus deinem menü auf kannst du den router auch weglassen, das funktioniert immer noch.

- - - Aktualisiert - - -

test.zip

**Mufasa** · 27-09-2016, 15:05

Danke!! Ich muss jetzt schnell raus, schaue mir das heute Abend an.

Thema: DIV-Inhalt mittels XML und Ajax ändern

LinkBack

Themen-Optionen

Anzeige

AW: DIV-Inhalt mittels XML und Ajax ändern

AW: DIV-Inhalt mittels XML und Ajax ändern

AW: DIV-Inhalt mittels XML und Ajax ändern

AW: DIV-Inhalt mittels XML und Ajax ändern

AW: DIV-Inhalt mittels XML und Ajax ändern

AW: DIV-Inhalt mittels XML und Ajax ändern

AW: DIV-Inhalt mittels XML und Ajax ändern

AW: DIV-Inhalt mittels XML und Ajax ändern

AW: DIV-Inhalt mittels XML und Ajax ändern

AW: DIV-Inhalt mittels XML und Ajax ändern

AW: DIV-Inhalt mittels XML und Ajax ändern

AW: DIV-Inhalt mittels XML und Ajax ändern

AW: DIV-Inhalt mittels XML und Ajax ändern

AW: DIV-Inhalt mittels XML und Ajax ändern

AW: DIV-Inhalt mittels XML und Ajax ändern

Ähnliche Themen

[GELÖST] Elemente einer Klasse nacheinander mittels Ajax mit neuem Inhalt füllen

PHP-Array mittels AJAX übertragbar?

Formulardaten mittels Ajax übermitteln

Inhalt eines anderen Frames mittels innerHTML erweitern

Imagelink Bordercolor mittels CSS ändern

Stichworte

Lesezeichen

Lesezeichen

Berechtigungen

JS MIN Date Property setzen

Hintergrundbild austauschen

Werkstudent Web-/...

Werkstudent Fullstack Entwicklung...

Senior Webentwickler (m/w/d)...

Node Server testen

JS MIN Date Property setzen

JS MIN Date Property setzen

Node Server testen

Node Server testen