Wie rufe ich mit URL-Parametern dynamisch Inhalte auf?

[Rolf B]

Hallo borisbaer,

Ja, aber wie mache ich das?

Du erinnerst mich an einen Tag in meiner Kindheit. Ich war bestimmt noch keine 10 Jahre, extrem schüchtern, und meine Mutter wollte mich schicken, um Kaffee zu kaufen. Doch, wirklich, in den 70ern wurde einem Kind sowas zugetraut. Da gab's noch keinen Supermarkt bei uns und die Bäckereien verkauften den. Und ich? Ich war in Panik bei dem Gedanken, da allein vor der Theke zu stehen und auch noch etwas sagen zu müssen und habe immer nur wiederholt "Ich weiß aber nicht was ich da sagen soll" und die Versuche meiner Mutter, mir zu erklären, was genau ich der Verkäuferin sagen muss um den Kaffee zu bekommen, sind komplett in den Wirbel, der sich in meinem Kopf befand, verpufft. Sie ist irgendwann zu mir durchgedrungen - es hat möglicherweise einer therapeutischen Ohrfeige bedurft - ich habe den Kaffee bekommen und gelernt, dass meine Angst komplett idiotisch war, aber das ist mir als einer der schrecklicheren Momente meiner Kindheit hängengeblieben.

Bei deinem "Wie mache ich das" komm ich mir vor wie meine Mutter damals. Fühle Dich also therapeutisch geohrfeigt, und leg die Panik weg.

Vor allem: Guck nicht nur nach Codeschnipseln zum rauskopieren. Ich hab jetzt viel geschrieben, um Dir zu erklären, was zu tun ist. Ein fertiger Schnipsel ist nicht dabei!

Schauen wir noch mal hier drauf.

		var href = $( this ).attr( "href" );
		window.history.pushState( null, "", href );
		$.ajax( { url: this.href, success: function( html ) {{
			$( ".append" ).html( html );
		});

Das ist die 2. Hälfte aus deinem gestern nachmittag geposteten click-Handler für die Tabs. Vorher hast Du preventDefault() aufgerufen - korrekt - und die current Klasse gesetzt (bei der man sogar noch diskutieren könnte ob man da für besser Zugänglichkeit mit dem aria-current Attribut arbeiten sollte, aber dieses Thema will ich jetzt nicht auch noch aufmachen).

Zeile 1: Bestücken der href Variablen mit dem Wert des href Attributs. Tatsächlich machst Du das an der Stelle zu umständlich. 2 Zeilen tiefer ist es viel einfacher gemacht: this.href. Dies ist ein Eventhandler für einen click auf einen Link, er ist auf den Links registriert, und der Browser ruft ihn so auf, dass this auf das DOM Element zeigt, auf dem das Event registriert wurde.

Wenn der Link so aussieht: `<a href="savegames">Savegames</a>, dann findest Du nun in href den String "savegames".

Zeile 2: Dieser String wird in die URL History gepusht. Du bist für den Browser auf Seite "/games/demons-souls/" oder vielleicht "/demons-souls/game", und deswegen, wie schon beschrieben, interpretiert der Browser den pushState(null, "", "savegames") so als ob Du /games/demons-souls/savegames gepusht hättest. Gut so.

Zeile 3: Vielleicht sollte man diese Zeile nochmal näher erklären, wenn es Dir noch an Verständnis für JavaScript mangelt. Das ist der Aufruf der Methode ajax, die jQuery mitbringt. Diese Methode bekommt ein Objekt übergeben, und zwar dieses:

{
   url: ...
   success: ...
}

Man nennt das in JavaScript ein "Objektliteral" - also sowas wie ein fertiges Objekt, das im Quellcode steht und vom Programm an der Stelle als Wert verwendet werden kann. Es ist ein Objekt mit zwei Eigenschaften: url und success. Das Objekt, das Du hier an .ajax übergibst, kann noch viel mehr Eigenschaften haben - was Du hier siehst ist so ziemlich das Minimum. Der Artikel im jQuery Handbuch, der das erklärt, ist ein halber Roman.

Diese Schreibweise mit dem Objektliteral gibt es auch in PHP, da sähe das so aus (das hilft Dir für JavaScript nichts, es ist nur eine Analogie für's Verständnis der JavaScript-Schreibweise):

$xxx = [
   "url" => ....
   "success" => function() { ... }
];

Ja, tatsächlich, eine Funktion als Wert geht in neueren PHP Versionen auch. Man kann es mit älterer Syntax auch so schreiben:

$xxx = ARRAY(
   "url" => ...,
   "success" => ...
);

Gleicher Wein, anderer Schlauch. Zurück zu JavaScript.

Unter success steht die Funktion, die bei einem erfolgreichen Ajax-Abruf aufgerufen wird, um das Ergebnis zu verarbeiten. Die hast Du und die tut, was sie soll. Haken dran.

Unter url muss die abzurufende URL stehen. Wenn Du hier this.href hinschreibst, wird das href-Attribut des Links verwendet (this zeigt auf das Link-Element). So, wie der Aufruf jetzt ist, wird der url Eigenschaft also "savegames" zugewiesen, der Browser interpretiert das als relative URL und macht /games/demons-souls/savegames draus. Möööp - falsch.

Du brauchst /games/demons-souls/subpages/savegames - und das heißt, dass an die url Eigenschaft der Wert "subpages/savegames" zugewiesen werden muss. Wie macht man aus "savegames" den Wert "subpages/savegames"?!

Ach so. Ist das hier vielleicht dein Problem? In PHP verkettet man Strings mit dem . Operator. In JavaScript nicht. Da verwendet man das +.

Eigentlich sollte es Dir jetzt nicht mehr schwerfallen, die Sternchen durch den richtigen Code zu ersetzen. Den Ajax-Aufruf verteile ich mal auf ein paar mehr Zeilen, dann erkennt man besser, wie sich das zusammensetzt.

		var href = this.href;
		window.history.pushState( null, "", href );
		$.ajax(
			{
				url: *********,
				success: function( html ) {
					...
				} 
			});

Rolf