Jquery Ajax Aufruf HTML5 Geschichte und Zurück-Taste

Question

Ich habe viel darüber gelesen und fühle, dass, während ich alle Teile verstehe, kann ich nicht herausfinden, wie man alles zusammen, ohne mein Projekt zu wiederholen. Ich habe Ajax eingerichtet und arbeite sehr gut auf meiner Website. Ich konnte ein # in der URL hinzufügen, wenn neuer Inhalt hereinkommt. Die Zurück-Taste funktioniert und durchläuft alle korrekten URLs, ohne die Seite neu zu laden, aber der Ajax wird nicht aktualisiert.

Das ist mein HTML für die Tasten:

<a class="portfolioThumbnail" onclick="return false;" data-name="myPage" href="myPage.html"> 

    <img src="imagepath" /> 

</a> <!-- portfolioThumbnail --> 

und hier ist mein JQuery:

$('.portfolioThumbnail').on('click', function(){ 

var thisProject = $(this).attr('href') 

$.ajax('http://oursite.com/' + thisProject, { 
    success: function(response) { 
    $('.projectWrapperReplace').html(response); 
    }, 
    error: function() { 

     alert('error'); 
    }, 
    timeout: 5500, 
    beforeSend: function() { 

    $(this).find('.portfolioThumbnail').addClass('loading'); 

    }, 
    complete: function() { 


    $(".blurable").addClass('blur'); 

    $(".blurable").addClass('whiteOut'); 



    $('.projectWrapper').fadeIn('slow', function(){ 

     $('.projectWrapper').addClass('noBlur'); 

     window.location.hash = thisProject; 


    }); 

    } 

}); 

});  

Ich habe ein div projectWrapperReplace in meinem HTML auch genannt. Schauen, wenn jemand mir helfen kann, das zu arbeiten. Danke

Answer 1

Sie benötigen einen Ereignis-Listener, wenn die Zurück- oder Vorwärts-Tasten gedrückt werden (im Moment laden Sie nur den Ajax-Inhalt, wenn Sie auf die .portfolioThumbnail-Schaltflächen klicken).

Sprechen Sie die Ajax-Last und Zustandsklassen eine eigene Funktion, sagen hashChange()

Kasse onhashchange

//call hashChange on window hash chage 
window.onhashchange = hashChange; 
//and also on buttonclick 
$('.portfolioThumbnail').on('click', function() { 
    hashChange(); 
})