[GELÖST] String hinter # im URL auslesen und Seite "includen" per ajax

Pariak · 27. Feb. 2014

Hallo zusammen,

die Überschrift hört sich sicherlich sehr kompliziert an, aber ich denke, dass dies machbar ist.

Ich baue zur Zeit eine Seite mit einer Background Slideshow (Ähnlich, wie: Demo - Vegas Background jQuery Plugin). Nun möchte ich gerne auf diesen Hintergrundbildern eine Oberfläche schaffen, wo der Besucher sich bewegt. Das ist alles soweit auch kein Problem einzurichten. Innerhalb der Seite habe ich nun einen DIV-Bereich definiert mit einer festen ID (div#seitenInhalt), um eine Alternative zum iFrame zu nutzen. Nun stecken hinter jedem Link eine JavaScript-Funktion, die wie folgt in etwa lautet:

Code:

$("div#homeInhalt a#eventLink").on("click", function(){
		$("div#seitenInhalt").empty().load("event.php");
	 });

Kurz zur Verständlichkeit: Wenn der Link mit der ID "eventLink" geklickt wird, dann wird der Inhalt vom Div-Bereich mit der ID seitenInhalt zuerst "entfernt" (empty) und anschließend wird per load die Seite vom Server geholt und anschließend angezeigt. Der Vorteil hierbei ist, dass die Seite nicht neu geladen wird, sondern nur der Inhalt vom DIV. Dies finde ich auch alles super, weil so läuft der Hintergrund immer weiter und wird beim durchstöbern auf der Seite nicht jedesmal von vorne anfangen, wenn man eine neue Seite aufgerufen hat.

Auf den einzelnen Links selber gebe ich folgendes im href mit: #event . Und nun kommen wir zu meinem Problem....

In Moment bringt mit der Hashbag (nennt man das so? -> #event) nichts, weil der ohne Funktion ist. Nun würde ich gerne per php (switch) den Hashbag abfragen und dem entsprechend den Inhalt anzeigen, wenn die Seite das erste Mal geladen wird. Als Beispiel:

Ich bin auf der Startseite und dann findet man nur folgendem Link in der Linkleiste: Home
Wenn man nun auf ein Link geklickt hat, wird innerhalb des DIVs ein neuer Inhalt angezeigt und in der Linkleiste steht folgendes: Home
Wenn man diesen Link nun an andere weiter leitet, dann kommt man wieder auf die Startseite, anstatt auf die "Event"-Seite. Und aus diesen Grund würde ich hier gerne per switch-Abfrage die jeweilige Seite beim direkten Aufrufen includen.

Ich hoffe, dass mein Problem verständlich erklärt ist und ihr wisst, was ich meine...

Mit besten Grüßen
Pariak

mikdoe · 28. Feb. 2014

Meinst du

HTML:

document.location.hash

?

Pariak · 28. Feb. 2014

Unglaublich... Hätte nicht gedacht, dass es so einfach geht

Nun muss ich dies nur noch in einer Variable auslesen lassen und dann sollte es passen

Vielen Dank, mikdoe!

P. S. Ich lasse den Thread noch offen, falls ich im Laufe der Folgewoche noch offene Fragen zu diesen Thema habe.

Pariak · 28. Feb. 2014

Ich habe es mir wohl doch zu einfach vorgestellt...

Code:

<?php
	$content = "<script>document.location.hash</script>";
	switch($content) {
		case '#seite1': 
			include 'seite1.php';
			break;
		case '#seite2':
			include 'seite2.php';
			break;
		case '#seite3':
			include 'seite3.php';
			break;
		case '#seite4': 
			include 'seite4.php';
		default: 
			include 'seite1.php';
	}
?>

Das einzige, was hier passt ist, dass seite1.php immer aufgerufen wird, egal, was hinter der Raute steht. Ich wollte eigentlich, wenn z. B. #seite2 im Link steht, direkt die Seite2.php aufgerufen wird... Habe ich hier irgendwie ein Denkfehler im Code?

j-l-n · 28. Feb. 2014

Pariak schrieb:
Habe ich hier irgendwie ein Denkfehler im Code?

Ja, hast du. Und zwar ist die location undefiniert, da ja das JavaScript erst nach dem Laden der Seite ausgeführt wird und PHP ja eine serverseitige Sprache ist. D.h., einmal ausgeliefert, kann man mit PHP nichts mehr im nachhinein ändern.

EDIT: Muss das denn unbedingt ein Anker sein? Könntest du denn auch nicht einfach auf bspw. ?requested-page=seite1 verlinken?
Dann wäre das mit PHP ganz einfach:

PHP:

$requested = $_GET['requested-page'];
switch($requested) {
//usw.

Pariak · 28. Feb. 2014

leider ja.. Ich will ja nicht die ganze Seite neu laden, sondern nur ein Teil (den Div-Bereich). Denn nebenbei wird ein Hintergrund animiert, der durchgehend weiter weiter laufen soll und nicht jedes Mal, wenn man eine neue Seite aufruft, wieder von vorne anfangen.

kkapsner · 01. März 2014

Nebenbemerkung: da der Hash nicht an den Server übertragen wird, kann du da mit PHP nicht wirklich weiterkommen... du musst im window.onload einfach nachschauen, ob ein Hash da ist und dann dort entsprechend handeln, wie du es im onclick gemacht hast.

j-l-n · 01. März 2014

Pariak schrieb:
leider ja.. Ich will ja nicht die ganze Seite neu laden, sondern nur ein Teil (den Div-Bereich).

Ähm... Ajax funktioniert genauso auch ohne Anker...

mikdoe · 01. März 2014

Das wollte ich auch gerade sagen. Für Ajax braucht man keine Anker. Anker sind eigentlich nur sinnvoll, wenn man sie in einem Link verwendet und kein Serverscript aufgerufen wird, also z.B. für Sprünge im Dokument. Denn Server verwerfen den Anker i.d.R.

j-l-n · 01. März 2014

mikdoe schrieb:
Denn Server verwerfen den Anker i.d.R.

Ja, bzw. sie werden gar nicht mitgesendet. Aus dem Grund bin ich auch weiterhin dafür, das Ganze einfach über einen get-Parameter zu machen. Also dass dann über Ajax an das PHP-Skript etwas wie http://example.com/index.php?load=start übergeben wird und dann jeweils die angeforderte Seite per switch eingebunden wird.

Pariak · 01. März 2014

Das würde ich ja auch gerne (bzw. hatte ich auch genutzt), nur dann habe ich das Problem, dass die ganze Seite neu geladen wird und somit die Hintergrundbilder wieder von vorne angezeigt werden. Ich hätte es lieber, wenn die Hintergrundbilder durchgehend angezeigt werden.

In Moment wird die Hintergrund per CSS ausgesteuert (Codequelle: http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/index.html) und wenn ich per switch und dem get-Parameter die Seite neu laden lasse, wird selbstverständlich auch der CSS-Code neu geladen, was ich natürlich nicht will... Ich will nur, dass der DIV-Bereich neu geladen wird, wenn man eine andere Seite aufruft.

j-l-n · 01. März 2014

Pariak schrieb:
Das würde ich ja auch gerne (bzw. hatte ich auch genutzt), nur dann habe ich das Problem, dass die ganze Seite neu geladen wird und somit die Hintergrundbilder wieder von vorne angezeigt werden.

Nochmal: Ajax braucht keine Anker!!!

using php include in jquery - Stack Overflow
Include PHP file inside a DIV using Jquery & AJAX - Stack Overflow

Pariak · 01. März 2014

Julian, ich weiß, dass Ajax keine Anker braucht (habe ich auch nirgends geschrieben).

Ich werde mir deine Links einmal anschauen und gucken, ob ich damit etwas anfangen kann.

Ich würde auch lieber ein Link, wie dies haben: http://example.com/index.php?load=start und ich weiß auch, dass ich mit php den Wert hinter load auslesen kann. Das Problem ist nur, wenn ich ein Link <a href=?load=start> einbaue, dann wird ja die ganze Zeit neu geladen + den PHP-Code, der die jeweilige Seite öffnet, wie ich die per switch & include verweise. Was ich aber will ist, dass nur der eine Bereich, wo die switch-Funktion steht, neu geladen wird und nicht das, was drum herum ist...

Beste Grüße
Pariak

j-l-n · 01. März 2014

Pariak schrieb:
Julian, ich weiß, dass Ajax keine Anker braucht (habe ich auch nirgends geschrieben).

Ja, das stimmt schon. Aber es steht im kompletten Widerspruch hierzu

<a href=?load=start> einbaue, dann wird ja die ganze Zeit neu geladen + den PHP-Code, der die jeweilige Seite öffnet, wie ich die per switch & include verweise.

Da sagst du ja, dass dann die ganze Seite neu geladen wird. Aber das stimmt eben nicht...

______
Julian

kkapsner · 01. März 2014

Sehe ich das richtig, dass dein Problem nicht beim AJAX liegt, sonderen daran, dass jemand sich die URL speichert (wo auch immer) und dann damit, inklusive Hash, die Seite aufruft und in deiner jetzigen Funktionsweise nur die normale Startseite sieht und nicht das, was durch den Hash spezifiziert wurde?

Wenn ja: lies' dir nochmal meinen Beitrag von oben durch.
Wenn nein: erklär' bitte nochmal genauer, was exakt dein Problem ist.

Pariak · 02. März 2014

Hallo kkapsner,

Genau das meine ich & dein Hinweis mit dem window.onload schein ich überlesen zu haben...Sorry!

In Zusammenhang deiner Aussage habe ich folgenden Link gefunden und werde dies mal dazu einbauen: Spaß mit location.hash und jQuery « Interaktionsdesigner.de

Gruß
Pariak

kkapsner · 02. März 2014

Kein Problem - kann ja mal passieren.

Pariak · 02. März 2014

Ich hab' es nun endlich geschafft.

Mit folgender Funktion lasse ich den Wert hinter der # auslesen:

Code:

var content = $(location).attr("hash").substr(1).split("&",1);

Anschließend habe ich eine Funktion, die ähnlich, wie include (aus PHP) funktioniert:

Code:

if(content){
		$("#"+content).addClass("active");
		$("div#seitenInhalt").load(content+".php").fadeIn(500);
	} else {
		$("#home").addClass("active");
		$("div#seitenInhalt").load("home.php").fadeIn(500);
	}

Somit wird schon mal bei aufrufen der Seite direkt auf die jeweilige Seite "verlinkt".

Und damit nur der Inhalt des DIV geladen wird, nutzt ich folgenden Code:

Code:

$("a.ajaxLink").click(function() {
		$("#footer a.active").removeClass("active");
		$(this).addClass("active");
		$("div#seitenInhalt").fadeOut(50);
		$("div#seitenInhalt").load($(this).attr('id')+".php");
		$("div#seitenInhalt").fadeIn(500);
	});

Ich danke allen für eure Hilfe und bin froh, dass ich es übers Wochenende endlich lösen konnte!

Beste Grüße
Pariak

P. S. Dieser Thread kann als "Fertig" markiert werden.

kkapsner · 04. März 2014

Pariak schrieb:
Code:

$(location).attr("hash")

Wo hast du denn diesen Schwachsinn her?

Code:

location.hash

ist kürzer, leichter zu lesen und schneller...

PS: auf "Gelöst" gestellt.

[GELÖST] String hinter # im URL auslesen und Seite "includen" per ajax

Pariak

New member

mikdoe

Moderator

Pariak

New member

Pariak

New member

j-l-n

Guest

Pariak

New member

kkapsner

Super Moderator

j-l-n

Guest

mikdoe

Moderator

j-l-n

Guest

Pariak

New member

j-l-n

Guest

Pariak

New member

j-l-n

Guest

kkapsner

Super Moderator

Pariak

New member

kkapsner

Super Moderator

Pariak

New member

kkapsner

Super Moderator