Esempio jQuery e history.js

Question

Sto riscontrando qualche problema con history.js con jQuery. Volevo solo far funzionare un set di navigazione con il pulsante Indietro (che sembrano fare abbastanza bene). Però. Quando clicco sul pulsante Indietro, l'url diventa vecchio (che è di nuovo buono e ciò che voglio) ma il contenuto non si sostituisce come dovrebbe.

Per rendere un po 'più comprensibile ecco un codice.

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

Ovviamente quello che voglio è il contenuto delle pagine caricare in contenuti che si fa bello e facilmente con .load() e poi voglio il tasto back per tornare indietro attraverso di loro se l'utente utilizza. Al momento gli URL cambiano ma il contenuto nella casella non lo fa. Come potrei cambiare o aggiustarlo?

Answer 1

Provare quanto segue:

<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

sembra il seguente bit non funziona:

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

Dovete convertire la 'risposta' in un elemento DOM prima di poter utilizzare 'trovare ' su di essa. Così:

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