2012-04-04 12 views
11

stavo cercando di ottenere PJAX lavorare con il mio sito PHP, questo è il codice che sto usando per esso:Come usare PJAX? (? PJAX con PHP)

<script src="js/jquery.js"></script> 
<script src="js/jquery.pjax.js"></script> 
    <script type="text/javascript"> 
     $(function(){ 
      // pjax 
      $('ul a').pjax('section') 
     }) 
    </script> 

sto solo utilizzando il codice hanno usato sulla pagina demo PJAX , ma sostituendo il contenitore che hanno usato (#main) con quello per il mio sito, che era il tag della sezione. Non ci sono errori sulla console o sulla pagina, ma non funziona neanche! Prima usavo

$(function() { $('ul a').pjax('section') }); e

$('document').ready(function(){ 
    $('ul a').pjax('section') 
}); 

Ma quando io non uso una di quelle e basta usare $ ('ul a'). Pjax (sezione '') Vedo questo errore in la console:

Uncaught nessun contenitore pjax per la sezione in jquery.pjax.js (linea: 353)

Potrei avere un aiuto con questo? Grazie

+0

La pagina contiene un tag '

'? Il tuo server restituisce contenuto privo di chrome quando vengono inviati l'header 'X-PJAX' o il parametro di ricerca' _pjax'? Puoi collegarti a un URL demo? –

+0

In realtà non ero in grado di caricare il materiale PHP, ma ho provato la stessa identica cosa con semplici semplici file html, ma sempre la stessa cosa. Puoi vederlo qui: http://sbtest.comoj.com – user1302430

+0

In questo sito di test, sostituire la chiamata pjax con '$ (function() {$ ('ul a'). Pjax (" # main ", {framment : "#main"});}); '. Oppure posiziona la chiamata in fondo alla pagina. –

risposta

10

Per impostazione predefinita, pjax si aspetta che le nuove pagine vengano consegnate senza il chrome - uno snippet HTML che verrà utilizzato come innerHTML del contenitore.

Nel tuo esempio il contenitore sarebbe il primo tag <section> suppongo. Non so se pjax garantisce che userà il primo elemento che corrisponde a un selettore - potrebbe semplicemente sostituire ogni elemento corrispondente. Probabilmente sarebbe meglio usare un selettore ID, come #main.

In ogni caso, sembra che tu non stavi consegnando snippet HTML, ma solo l'intera pagina. Questo quasi sconfigge lo scopo di pjax, ma può essere supportato specificando un frammento nel contenuto scaricato. Quasi sempre questo sarà un selettore che corrisponde al contenitore che verrà sostituito.

Quindi, supponendo di utilizzare un contenitore con @id=main si potrebbe chiamare pjax con

$(function() { $("ul a").pjax("#main", { fragment: "#main" }); }); 

Assicurarsi che pjax è chiamato dopo il caricamento del documento, altrimenti la ricerca del contenitore avrà esito negativo.

A proposito, un modo più semplice per passare alla navigazione assistita pushState è con il mio progetto HTMLDecor. Richiede di cambiare prospettiva per la generazione di pagine HTML, ma una volta che hai fatto devi solo aggiungere lo script HTMLDecor.js alle tue pagine e pushState viene usato automaticamente quando appropriato - nessuna configurazione necessaria.