Wie rufe ich mit URL-Parametern dynamisch Inhalte auf?

[Rolf B]

Hallo borisbaer,

ich finde deinen Code durch die Doppelzeiligkeit schwer lesbar. Aber ok, jedem sein Stil.

URL Parameter am Server interessieren Dich zur Zeit nicht, wenn ich das richtig verstehe. Darum schreibe ich dazu jetzt nichts. Wichtig sind die Hashes.

Was mir nicht klar ist: Auf der Savegame Seite hast Du eine Subnavigation, bei der Beute. Möchtest Du deren Seiten dauerhaft komplett laden, oder soll das auf AJAX umgestellt werden? In dem Fall wird die Hash-Behandlung etwas schwieriger. Nicht viel, aber doch. Ich gehe erstmal davon aus, dass Du das nicht machst.

Mein Vorschlag wäre:

• Mach ein Backup von dem, was Du hast…
• Ergänze deine Links um ein #, also href="#game" statt href="game"
• Reagiere nicht auf den Klick des Links, sondern auf das hashchange Event des window-Objekts
• Bau dein Script in etwa so:

$(function() {
   let currentHash = '';

   // loadCurrentPage als hashchange-Handler registrieren
   window.addEventListener("hashchange", loadCurrentPage);

   // und gleich beim Start der Seite aufrufen um die Default-Page zu laden
   loadCurrentPage();

   function loadCurrentPage() {
      let newHash = window.location.hash;
      let $newTab;

      if (newHash.length == 0) {
         $newTab = $("#tabs .tab:first-child");
         newHash = $newTab.attr("href");
      }
      else {
         $newTab = $("#tabs .tab[href="+newHash+"]");
         if ($newTab.length == 0) {
            // Fehler, den Tab gibt's nicht
         }
      } 


      if (newHash != currentHash) {
         currentHash = newHash;
         $newTab.addClass("current").siblings().removeClass("current");

         let tabName = newHash.substr(1);   // das # steht in newHash drin
         $("main".attr("id", tabName);

         $ajax(tabName)
         .then(function(html) { $("#append").html(html); });
      }
   }
});

Das ist jetzt so aus der Hüfte geschossen und ungetestet. Teils habe ich Code von Dir übernommen. Geändert habe ich:

• $(document).ready(function() { ... }) ist in jQuery missbilligt, die einzig korrekte Installation eines Ready-Handlers erfolgt mit $(function() { ... })
• Der aktuelle Tab-Link wird in einer Variablen ($newTab) gespeichert. Diese Variable beginnt mit einem $, das ist meine Methode, um darzustellen, dass hier ein jQuery Set drin ist.
• Statt des success-Callback verwende ich die modernere Deferred-technik von jQuery (in vanilla javascript auch Promise genannt)
• statt .empty().append(html) verwende ich .html(html), das tut das gleiche in einem Schritt.

Das sollte die Zeilen 65-114 deines main.js abdecken. Durch die Navigation mittels hashchange entfällt die Reaktion auf eine click der Links.

Was fehlt, ist die Behandlung des Fehlers, wenn der genannte Hash nicht existiert. Das kann passieren, wenn der User den Hash editiert oder Du Dich vertippst hast.

Man könnte auch ganz auf jQuery verzichten, aber da Du ein Freund davon bist, habe ich es dringelassen.

Rolf