Geek Answers Handbook

Ajax + back and forth buttons

I'm starting to write a new application and want to make it a full ajax style :)

I am using jquery to create ajax queries. The main JS file receives some variable from the clicked link and, according to this link, goes to some php files, some data is returned and put everything in the pre-prepared html tags.

So I see this application.

Now I have found several solutions for launching the back & forward buttons, but in these solutions their script goes to predefined pages and reads some data according to some constant identifier. I do not like it.

I want to...

  • I need a code that will not allow the browser to reload the page if the user clicks the back button, the forward button
  • Remember the position of the browser, so if we press "C" and back, it brings JS some variable with the value "B", then JS goes to php and says "B", so php will understand what content to prepare, returns the JS content. JS refreshes the page, everyone is happy.

Is there a solution that will work this way?

+5
source share
2 answers

I used jQuery BBQ: Back Button and Query Library in the past just for this purpose.

In particular, an example of the main AJAX looks exactly as you need. The remaining examples are also excellent.

+3
source

, backbone.js http://documentcloud.github.com/backbone/. , URL-.

, , route/# itemsList, /# items/id. , , , , , URL-. ( 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 →

www.myapp.com/#item/32 → ID 32, item (id), Ajax

www.myapp.com/#itemList → , # / .

+2

More articles:


All Articles