Content läd per Ajax nach - Vor- und Zurück-Button des Browsers funktionieren nicht

Glimmerchen

Hallo zusammen,

ich bin, um meinen Content per Ajax zu laden nach folgendem Tutorial gegangen:
http://code.tutsplus.com/tutorials/how-…-jquery--net-26

Wie bei der Demo hier zu sehen, lässt sich über die Navigation der Content durchblättern.
Betätigt man jedoch den Zurück-Button des Browsers, so wird der vorherige Content nicht geladen - obwohl die Adresse in der URL durchaus zurück springt. Die Seite mit dem vorherigen Content wird dann aber erst durch einen Refresh (F5) geladen.
Wie lässt sich dieses Problem lösen? Ich bekomme das nicht hin.

Liebe Grüße,
Glimmerchen

Basi

Hallo, was du brauchst bringt window.location.hash mit sich.

Du kannst das Event window.onhashchange abfangen, den Hash auslesen und dementsprechend reagieren.

Glimmerchen

Und wie kann ich "dementsprechend reagieren"?
Bei der Betätigung des Zurück-Buttons wird ja die URL in der Browser-Adresszeile entsprechend korrekt zurückt gesetzt, der Anker also geändert. Nur bleibt der Inhalt der Seite stehen, der vorherige Content wird nicht geladen.

Und ich weiß nicht, warum...

wolf

Einfach deine Funktion etwas umstellen .. das was beim Klicken des Links passiert, muss halt auch passieren wenn sich die URL verändert..

JavaScript

function handleSwitch(url){
  var toLoad = url+' #content';
  $('#content').hide('fast',loadContent);
  $('#load').remove();
  $('#wrapper').append('<span id="load">LOADING...</span>');
  $('#load').fadeIn('normal');
}
function loadContent() {
  $('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
  $('#content').show('normal',hideLoader());
}
function hideLoader() {
  $('#load').fadeOut('normal');
}




$(document).ready(function() {
  $('#nav li a').click(function(event){
    event.preventDefault();
    handleSwitch( $(this).attr('href') );
  });
});
window.onhashchange = function(){
  console.log(window.location);
  var url = '';//hier musst du dann eben die URL auslesen (aus dem window.location object)
  handleSwitch(url);
}

Alles anzeigen

Glimmerchen

Cool, das scheint zu funktionieren.

Damit wird beim Betätigen des Zurück-Buttons der Content ausgeblendet und der Ladevorgang läuft. Allerdings wird der vorherige Content noch nicht geladen, es bleibt beim Ladevorgang.

JavaScript

var url = '';//hier musst du dann eben die URL auslesen (aus dem window.location object)

Ich habe das versucht mit

JavaScript

var url = window.location.href;

versucht zu lösen, allerdings bleibt es dabei unverändert.
Oder wie meintest du das sonst?

Liebe Grüße,
Glimmerchen

wolf

Ja so etwa meine ich das.. mach halt mal ein console.log(window.location.href) .. dann siehst du ob das das richtige ist..
Sehen kannst du die Infos in der Browserkonsole

Glimmerchen

Habs mittlerweile hinbekommen.
Musste dazu ein paar Änderungen vornehmen, damits funktioniert.

So siehts aus und im Moment funktioniert alles.
Wenn du weißt wie man etwas geschickter lösen könnte...

JavaScript

function handleSwitch(url){
  var toLoad = url+'.html #content';
  $('#content').hide('fast',loadContent);
  $('#load').remove();
  $('#wrapper').append('<span id="load">LOADING...</span>');
  $('#load').fadeIn('normal');
  if(url==''){
         var url = 'home';
  }
  window.location.hash = url;
  function loadContent() {
         $('#content').load(toLoad,'',showNewContent())
  }
  function showNewContent() {
         $('#content').show('normal',hideLoader());
  }
  function hideLoader() {
         $('#load').fadeOut('normal');
  }
}




$(document).ready(function() {
  var hash = window.location.hash.substr(1);
  var href = $('#nav li a').each(function(){
         var href = $(this).attr('href');
         if(hash==href.substr(0,href.length-5)){
                 var toLoad = hash+'.html #content';
                 $('#content').load(toLoad)
         }
  });




  $('#nav li a').click(function(){
         window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
         return false;
  });
});




window.onhashchange = function(){
  console.log(window.location);
  var url = window.location.hash.substr(1);
  handleSwitch(url);
}

Alles anzeigen

Liebe Grüße,
Glimmerchen

Jetzt mitmachen!