Ajax + back e pulsanti avanti

Question

sto iniziando a scrivere nuova applicazione e vuole renderlo pieno stile ajax :)

Sto utilizzando jQuery per fare richieste Ajax. Il file JS principale ottiene alcune variabili dal collegamento premuto e, in base al collegamento, alcuni file php catturano alcuni dati e restituisce tutto nei tag html pre preparati.

Questo è il modo in cui vedo questa app.

Ora ho trovato alcune soluzioni per riavviare i pulsanti di avvio &, ma in quelle soluzioni il loro script va a pagine predefinite e legge alcuni dati in base a qualche ID costante. Quindi non mi piace.

Quello che voglio è ...

1. Ho bisogno di qualche codice che impedirà browser dalla pagina di ricaricare se l'utente sta premendo indietro, tasto avanti
2. Ricorda posizione del browser, quindi se siamo in stato di ' C 'e back sono stati premuti per portare a JS alcune variabili con valore' B ', quindi JS va a php e dice' B 'così php capirà quale contenuto preparare. restituisce il contenuto a JS, JS aggiorna la pagina, tutti contenti.

C'è una soluzione che funzionerà in questo modo?

Answer 1

Ho usato jQuery BBQ: Back Button & Query Library in passato proprio per questo scopo.

In particolare, l'esempio basic AJAX sembra essere quello che stai cercando. Anche il resto dello examples è eccellente.

Answer 2

Penso che dovresti dare un'occhiata a backbone.js http://documentcloud.github.com/backbone/. Ha una struttura di applicazione basata su router, in cui ogni route è in realtà un diverso/# url.

In questo modo, quando si dispone di un elenco di elementi, è possibile visualizzarlo nell'elenco di elementi route/# e ogni pagina di dettagli di un articolo potrebbe essere su/# item/id. L'intera navigazione è gestita per te, tutto ciò che devi fare è chiamare alcune funzioni o incollare il codice che vuoi che venga eseguito quando arrivi a quell'URL. (Esempio adattato http://documentcloud.github.com/backbone/#Router)

var Workspace = Backbone.Router.extend({ 

    routes: { 
    "help":     "help", // #help 
    "item/:id":  "item", // #item/myItemId 
    "itemList": "list" // #itemList 
    }, 

    help: function() { 
    ... show help 
    }, 

    item: function(id) { 
    ... show single item with jQuery, Ajax, jQuery UI etc 
    }, 

    itemList: function(){ 
    ... show item list with jQuery, jQuery UI etc. 
    } 

}); 

www.myapp.com/#help -> codice aiuto

www.myapp.com/#item/32 -> elemento con ID 32, che viene catturato nella funzione item (id) e richiesta di recupero dati tramite Ajax

www.myapp.com/#itemList -> l'elenco di tutti gli articoli, in cui è possibile generare collegamenti con # item/id per ogni articolo.