jQuery & history.js Beispiel

Question

Ich habe ein wenig Probleme mit history.js mit jQuery. Ich wollte nur ein Navigations-Set mit dem Zurück-Knopf arbeiten lassen (was sie anscheinend ziemlich gut machen). Jedoch. Wenn ich auf die Zurück-Schaltfläche klicke, ändert sich die URL in die alte (was wiederum gut ist und was ich will), aber der Inhalt ersetzt nicht wie er sollte.

Um dies ein wenig verständlicher zu machen, hier ist ein Code.

<ul class="content_links"> 
     <li><a href="/historyapi/pages/content_page_1.html">Content page 1</a></li> 
     <li><a href="/historyapi/pages/content_page_2.html">Content page 2</a></li> 
     <li><a href="/historyapi/pages/content_page_3.html">Content page 3</a></li> 
     <li><a href="/historyapi/pages/content_page_4.html">Content page 4</a></li> 
     <li><a href="/historyapi/pages/content_page_5.html">Content page 5</a></li> 
    </ul> 
    <div id="content"> 
     <p>Content within this box is replaced with content from supporting pages using javascript and AJAX. 
    </div> 

Offensichtlich, was ich will, ist der Inhalt der Seiten in Inhalt laden, die mit .load() schön und leicht getan und dann mag ich die Rücktaste, um durch sie bewegen zurück, wenn der Benutzer es verwendet. Im Moment ändern sich die URLs aber der Inhalt in der Box nicht. Wie würde ich das ändern oder reparieren?

Answer 1

Versuchen Sie Folgendes:

<ul class="content_links"> 
    <li><a href="/historyapi/pages/content_page_1.html">Content page 1</a></li> 
    <li><a href="/historyapi/pages/content_page_2.html">Content page 2</a></li> 
    <li><a href="/historyapi/pages/content_page_3.html">Content page 3</a></li> 
    <li><a href="/historyapi/pages/content_page_4.html">Content page 4</a></li> 
    <li><a href="/historyapi/pages/content_page_5.html">Content page 5</a></li> 
</ul> 
<div id="content"> 
    <p>Content within this box is replaced with content from supporting pages using javascript and AJAX. 
</div> 

<script> 
$(function() { 

    // Prepare 
    var History = window.History; // Note: We are using a capital H instead of a lower h 
    if (!History.enabled) { 
     // History.js is disabled for this browser. 
     // This is because we can optionally choose to support HTML4 browsers or not. 
     return false; 
    } 

    // Bind to StateChange Event 
    History.Adapter.bind(window,'statechange',function() { // Note: We are using statechange instead of popstate 
     var State = History.getState(); 
     $('#content').load(State.url); 
     /* Instead of the line above, you could run the code below if the url returns the whole page instead of just the content (assuming it has a `#content`): 
     $.get(State.url, function(response) { 
      $('#content').html($(response).find('#content').html()); }); 
     */ 
     }); 


    // Capture all the links to push their url to the history stack and trigger the StateChange Event 
    $('a').click(function(evt) { 
     evt.preventDefault(); 
     History.pushState(null, $(this).text(), $(this).attr('href')); 
    }); 
}); 
</script> 

Answer 2

es scheint das folgende Bit funktioniert nicht:

$.get(State.url, function(response) { 
    $('#content').html($(response).find('#content').html()); 
}); 

Sie haben die ‚Antwort‘ in ein DOM-Element zu konvertieren, bevor Sie verwenden können ‚finden 'darauf. So ähnlich:

$.get(State.url, function(response) { 
    var d = document.createElement('div'); 
    d.innerHTML = response; 
    $('#content').html($(d).find('#content').html()); 
});