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

Glimmerchen · 17. Aug. 2015

Hallo zusammen,

ich bin, um meinen Content per Ajax zu laden nach folgendem Tutorial gegangen:
How to Load In and Animate Content with jQuery - Tuts+ Code Tutorial

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

mikdoe · 17. Aug. 2015

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

kann man sich die seite online anschauen?

Glimmerchen · 18. Aug. 2015

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

mikdoe schrieb:
kann man sich die seite online anschauen?

Die Demo des Scripts ist hier: mmm... Ajax!

Das Problem ist auf dieser Seite nachzuvollziehen.

mikdoe · 18. Aug. 2015

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

Achso, das ist die Seite, OK sorry.
Also ich würde vermuten, dass die Histoy nicht gesetzt wird. Hab jetzt aber nicht in das JS reingeschaut.
Mit HTML5 wäre das diese Sache hier: https://developer.mozilla.org/de/docs/Web/Guide/DOM/Manipulating_the_browser_history Abschnitt "Adding and modifying history entries"
Probier mal ein history.pushState() bei den einzelnen Seiten

Erg.:
Konnte jetzt doch mal in die http://cdn.tutsplus.com/net/uploads/legacy/011_jQuerySite/sample/js.js schauen und das scheint meinen Verdacht zu bestätigen. Keine History.

TecEye · 18. Aug. 2015

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

Code:

// Hash-Change
(function($,e,b){var c="hashchange",h=document,f,g=$.event.special,i=h.documentMode,d="on"+c in e&&(i===b||i>7);function a(j){j=j||location.href;return"#"+j.replace(/^[^#]*#?(.*)$/,"$1")}$.fn[c]=function(j){return j?this.bind(c,j):this.trigger(c)};$.fn[c].delay=50;g[c]=$.extend(g[c],{setup:function(){if(d){return false}$(f.start)},teardown:function(){if(d){return false}$(f.stop)}});f=(function(){var j={},p,m=a(),k=function(q){return q},l=k,o=k;j.start=function(){p||n()};j.stop=function(){p&&clearTimeout(p);p=b};function n(){var r=a(),q=o(m);if(r!==m){l(m=r,q);$(e).trigger(c)}else{if(q!==m){location.href=location.href.replace(/#.*/,"")+q}}p=setTimeout(n,$.fn[c].delay)}$.browser.msie&&!d&&(function(){var q,r;j.start=function(){if(!q){r=$.fn[c].src;r=r&&r+a();q=$('<iframe tabindex="-1" title="empty"/>').hide().one("load",function(){r||l(a());n()}).attr("src",r||"javascript:0").insertAfter("body")[0].contentWindow;h.onpropertychange=function(){try{if(event.propertyName==="title"){q.document.title=h.title}}catch(s){}}}};j.stop=k;o=function(){return a(q.location.href)};l=function(v,s){var u=q.document,t=$.fn[c].domain;if(v!==s){u.title=h.title;u.open();t&&u.write('<script>document.domain="'+t+'"<\/script>');u.close();q.location.hash=v}}})();return j})()})(jQuery,this);

dann kannst du mit den folgenden Code den Hash auslesen wenn er sich ändert und dementsprechend dein Ajax kontaktieren

Code:

$(window).hashchange( function(){
   var hash = location.hash;
   // hier kannst du auf den Hash reagieren - achtung er beinhaltet noch #
});

mikdoe · 18. Aug. 2015

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

Tec, wieso braucht er eine zusätzliche Hilfe dafür? Wenn er den Code aus seinem verlinkten Beispiel nimmt hat er das doch schon drin. Es geht doch nur noch ums Blättern mit Vor und Zurück.

TecEye · 18. Aug. 2015

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

ah ok, geht um die history die keine Einträge bekommt, ok Sorry mein Fehler

tsseh · 18. Aug. 2015

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

TecEye schrieb:
ah ok, geht um die history die keine Einträge bekommt, ok Sorry mein Fehler

nee, soweit ich das sehe, kann er vor und zurück nutzen, nur der vorherige content wird nicht geladen.
da er keinen code gepostet hat, könnte dein code das beheben, kann aber auch ganz was anderes sein

mikdoe · 18. Aug. 2015

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

tsseh schrieb:
nee, soweit ich das sehe, kann er vor und zurück nutzen, nur der vorherige content wird nicht geladen.

ja weil beim aufruf die history nicht gesetzt wird. oder geht das bei ajax inzwischen automatisch? nicht das ich wüsste.

tsseh · 18. Aug. 2015

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

mikdoe schrieb:
ja weil beim aufruf die history nicht gesetzt wird.

wenn er die history nicht aktualisiert, könnte er aber überhaupt nicht den zurück-button nutzen. kann er aber, da er schreibt:

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.

mikdoe · 18. Aug. 2015

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

hesst probier es im chrome desktop version.
zurück geht aber inhalt ist falsch genau wie er schreibt.
scheinbar baut chrome eine leere history bei ajax.

TecEye · 18. Aug. 2015

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

was man umgehen kann wenn man den hash abfragt und den entsprechenden inhalt läd!
Verfahre so schon seit sehr langer Zeit, absolut crossbrowser kompatibel

tsseh · 18. Aug. 2015

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

mikdoe schrieb:
zurück geht aber inhalt ist falsch genau wie er schreibt.
scheinbar baut chrome eine leere history bei ajax.

was heißt "inhalt ist falsch"? die addresszeile ist leer?

Glimmerchen · 18. Aug. 2015

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

TecEye schrieb:
was man umgehen kann wenn man den hash abfragt und den entsprechenden inhalt läd!
Verfahre so schon seit sehr langer Zeit, absolut crossbrowser kompatibel

Der hash wird doch im dem JS bereits ohnehin abgefragt durch

Code:

var hash = window.location.hash.substr(1);

Ich schaffe es irgendwie nicht, das Problem zu lösen.

Sitze da jetzt schon wieder zwei Stunden dran.

Das ist auch in sämtlichen Browsern der Fall; Firefox, IE, Opera und Chrome.

Auf "About" geklickt und die URL wechselt auf index.html#about, der entsprechende Content wird angezeigt.
Weiter auf "Portfolio" geklickt und die URL wechselt auf index.html#portfolio, der entsprechende Content wird angezeigt.

Betätigt man nun den Zurück-Button des Browsers, wechselt die URL in der Adresszeile zurück auf index.html#about, doch wird nicht auf den Content von "About" gewechselt sondern der Inhalt von "Portfolio" bleibt stehen. Der Content von "About" wird dann erst durch einen Refresh (wie z.B. F5) angezeigt.

tsseh · 18. Aug. 2015

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

Glimmerchen schrieb:
Betätigt man nun den Zurück-Button des Browsers, wechselt die URL in der Adresszeile zurück auf index.html#about, doch wird nicht auf den Content von "About" gewechselt sondern der Inhalt von "Portfolio" bleibt stehen. Der Content von "About" wird dann erst durch einen Refresh (wie z.B. F5) angezeigt.

also doch, die history passt du an, nur der content wird nicht geladen.
dafür bist du selbst verantwortlich, TecEye hat dir ja schon ein beispiel gezeigt, du musst je nachdem wie du die history veränderst auf unterschiedliche events reagieren und deinen content laden

mikdoe · 18. Aug. 2015

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

glimmerchen hast du meinen vorschlag ausprobiert?

tsseh · 18. Aug. 2015

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

mikdoe schrieb:
glimmerchen hast du meinen vorschlag ausprobiert?

die history hat er doch, ihm fehlt der content

Glimmerchen · 19. Aug. 2015

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

mikdoe schrieb:
glimmerchen hast du meinen vorschlag ausprobiert?

Nein; denn an der History lag es nicht - wie hier auch schon ein paar mal erwähnt wurde.

Die vorherige Adresse wird aus der History korrekt genommen, wenn man den Button betätigt; nur wird der Content nicht mit geladen.

TecEye schrieb:

Code:

// Hash-Change
(function($,e,b){var c="hashchange",h=document,f,g=$.event.special,i=h.documentMode,d="on"+c in e&&(i===b||i>7);function a(j){j=j||location.href;return"#"+j.replace(/^[^#]*#?(.*)$/,"$1")}$.fn[c]=function(j){return j?this.bind(c,j):this.trigger(c)};$.fn[c].delay=50;g[c]=$.extend(g[c],{setup:function(){if(d){return false}$(f.start)},teardown:function(){if(d){return false}$(f.stop)}});f=(function(){var j={},p,m=a(),k=function(q){return q},l=k,o=k;j.start=function(){p||n()};j.stop=function(){p&&clearTimeout(p);p=b};function n(){var r=a(),q=o(m);if(r!==m){l(m=r,q);$(e).trigger(c)}else{if(q!==m){location.href=location.href.replace(/#.*/,"")+q}}p=setTimeout(n,$.fn[c].delay)}$.browser.msie&&!d&&(function(){var q,r;j.start=function(){if(!q){r=$.fn[c].src;r=r&&r+a();q=$('<iframe tabindex="-1" title="empty"/>').hide().one("load",function(){r||l(a());n()}).attr("src",r||"javascript:0").insertAfter("body")[0].contentWindow;h.onpropertychange=function(){try{if(event.propertyName==="title"){q.document.title=h.title}}catch(s){}}}};j.stop=k;o=function(){return a(q.location.href)};l=function(v,s){var u=q.document,t=$.fn[c].domain;if(v!==s){u.title=h.title;u.open();t&&u.write('<script>document.domain="'+t+'"<\/script>');u.close();q.location.hash=v}}})();return j})()})(jQuery,this);

dann kannst du mit den folgenden Code den Hash auslesen

Deinen oberer Code wird eigentlich nicht benötigt, mit window.onhashchange = function() kann ich ohnehin jegliche Änderung bezüglich des Hash überwachen.

Habe das Problem mittlerweile auch gelöst. Alles funktioniert wunderbar mit allen Browsern, so wie gewünscht.

Aus

Code:

$(document).ready(function() {
     
    // Check for hash value in URL
    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(){
     
    var toLoad = $(this).attr('href')+' #content';
    $('#content').hide('fast',loadContent);
    $('#load').remove();
    $('#wrapper').append('<span id="load">LOADING...</span>');
    $('#load').fadeIn('normal');
    window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
    function loadContent() {
        $('#content').load(toLoad,'',showNewContent())
    }
    function showNewContent() {
        $('#content').show('normal',hideLoader());
    }
    function hideLoader() {
        $('#load').fadeOut('normal');
    }
    return false;
     
    });
});

Wurde:

Code:

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);
}

Falls das jemand benötigt.

Vielen Dank für eure Antworten. ^^

Liebe Grüße,
Glimmerchen

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

Glimmerchen

New member

mikdoe

Moderator

Glimmerchen

New member

mikdoe

Moderator

TecEye

New member

mikdoe

Moderator

TecEye

New member

tsseh

Lounge-Member

mikdoe

Moderator

tsseh

Lounge-Member

mikdoe

Moderator

TecEye

New member

tsseh

Lounge-Member

Glimmerchen

New member

tsseh

Lounge-Member

mikdoe

Moderator

tsseh

Lounge-Member

Glimmerchen

New member