jquery: change the URL address without redirecting? [duplicate]

by

NOTE: history.pushState() is now supported – see other answers.

You cannot change the whole url without redirecting, what you can do instead is change the hash.

The hash is the part of the url that goes after the # symbol. That was initially intended to direct you (locally) to sections of your HTML document, but you can read and modify it through javascript to use it somewhat like a global variable.

If applied well, this technique is useful in two ways:

  1. the browser history will remember each different step you took (since the url+hash changed)
  2. you can have an address which links not only to a particular html document, but also gives your javascript a clue about what to do. That means you end up pointing to a state inside your web app.

To change the hash you can do:

document.location.hash = "show_picture";

To watch for hash changes you have to do something like:

window.onhashchange = function(){
    var what_to_do = document.location.hash;    
    if (what_to_do=="#show_picture")
        show_picture();
}

Of course the hash is just a string, so you can do pretty much what you like with it. For example you can put a whole object there if you use JSON to stringify it.

There are very good JQuery libraries to do advanced things with that.

More Related Contents:

  1. jQuery and AJAX response header
  2. Redirecting after AJAX post in Django
  3. Jquery Ajax Posting JSON to webservice
  4. How can I use JQuery to post JSON data?
  5. How can I convince IE to simply display application/json rather than offer to download it?
  6. jQuery Call to WebService returns “No Transport” error
  7. Send JSON data via POST (ajax) and receive json response from Controller (MVC)
  8. Queue ajax requests using jQuery.queue()
  9. How do I catch an Ajax query post error?
  10. Detecting no results on jQuery UI autocomplete
  11. How to get a cookie from an AJAX response?
  12. How to return data from PHP to a jQuery ajax call
  13. How do I make jQuery wait for an Ajax call to finish before it returns?
  14. Getting 400 bad request error in Jquery Ajax POST
  15. jQuery: Check if image exists
  16. jQuery.ajax fails when url is from different server
  17. When using Ajax with jQuery DataTables, how do I determine what to do with the data returned?
  18. “How” to save an entire collection in Backbone.js – Backbone.sync or jQuery.ajax?
  19. What is the difference between async:false and async:true in jquery ajax?
  20. GUI-based or Web-based JSON editor that works like property explorer [closed]
  21. MS MVC form AJAXifying techniques [closed]
  22. jQuery: Making simultaneous ajax requests, is it possible?
  23. Simple jQuery Ajax call leaks memory in Internet Explorer
  24. JQuery .load() callback function
  25. jQuery AJAX call results in error status 403
  26. jquery ajax load certain div
  27. Using jQuery’s $.ajax within an angularJS controller
  28. Jquery post and unobtrusive ajax validation not working mvc 4
  29. jQuery Deferred – getting result of chained ajax calls
  30. Stop $.ajax on beforeSend

Leave a Comment