jQuery i history.js przykład

Question

Mam trochę problemów z wykorzystaniem history.js z jQuery. Chciałem tylko, aby zestaw nawigacyjny działał z przyciskiem "Wstecz" (co wydaje się być całkiem przyjemne). Jednak. Kiedy klikam przycisk Wstecz, adres URL zmienia się na stary (co znowu jest dobre i to, czego chcę), ale treść nie zastępuje tak, jak powinna.

Aby było to trochę bardziej zrozumiałe, oto trochę kodu.

<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> 

Oczywiście to, co chcę jest zawartość stron załadować do treści, które odbywa się ładne i łatwo z .load(), a następnie chcę przycisk z powrotem do tyłu, aby przejść przez nich, jeśli użytkownik korzysta z niego. W tej chwili adresy URL zmieniają się, ale zawartość w polu nie. Jak mam to zmienić lub naprawić?

Answer 1

Spróbuj wykonać następujące czynności:

<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

Wydaje się, że po nieco nie działa:

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

Trzeba przekonwertować „odpowiedź” do elementu DOM, zanim będzie można użyć „znaleźć ' na tym. Podobnie jak:

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