Wie rufe ich mit URL-Parametern dynamisch Inhalte auf?

[borisbaer]

Ich habe gemerkt, dass ich einen blöden Fehler oben gemacht habe, und zwar habe ich einen relativen Pfad mit einem / angefangen – autsch. 😳

Es funktioniert jetzt sogar mit dem folgenden Code:

$(function () {

	$("#tabs .tab").click(function(event) {
		event.preventDefault();
		$(this).addClass("current").siblings().removeClass("current");
		var href = $(this).attr("href");
		window.history.pushState(null, "", href);
		$.ajax(
			{
				url: "subpages/" + href,
				success: function(html) {
					$(".append").html(html);
				}
			});
	});
});

ABER, wie du siehst, musste ich die Variable href wieder zu $(this).attr("href") umschreiben. Bei this.href hat sie immer den ganzen Pfad vor dem href-Attribut ausgegeben, also nicht nur bspw. savegame. Warum ist das so?

Ich gehe mal jetzt schon mal einen Schritt weiter und frage: Sollte ich jetzt wieder den Teil "subpages/" aus der Ajax-URL löschen und stattdessen die .htaccess so umschreiben, dass URLs nach dem Muster /games/$1/$2 automatisch /games/$1/subpages/$2 aufrufen?

Und noch weiter gefragt: Der Ajax-Call funktioniert also wieder, aber wenn ich auf den Zurück-Button klicke, geht zwar oben in der Adresszeile die URL zurück auf den vorherigen string, doch der Inhalt natürlich noch nicht. Hier kommt vermutlich dieses popstate-Funktion zum Einsatz. Wie ich das verstanden habe, reagiert popstate auf Veränderungen in der URL bzw. in der History. Wenn also jemand auf den Zurück-Button klickt, dann sollte mit popstate erkannt werden, dass sich was in der URL-Zeile verändert hat und der entsprechende Inhalte aufgerufen werden soll.

	window.onpopstate = function() {

		/* ein erneuter Ajax-Call? 
    Aber dieses Mal muss er ohne das href des Links auskommen, 
    sondern sich wohl auf die window.history verlassen. */

	};

Mein lieber Herr Gesangsvereien. 🤯