I have an ajax application that is based on jQuery. I enabled browser history using jQuery history plugin. But we find out that the application generated too much history.
Especially, we provide an in-page "ajax-back" button that enable the page to return to previous ajax state. When the in-page "ajax-back" button was pressed, we want it to act like the broswer back button, by moving the current index of the history, or removing the latest history record, instand of inserting a new history record.
So, I would like to ask, is it possible to remove the latest browser record from javascript? or is it possible to modify the current index of the browser history list?
Examples that are based on jQuery history plugin will be very appreciated.
Most likely you can't easily do what you're attempting. There is window.location.replace, which goes to a new URL and removes the current page from the history, but that's for full page navigations and will almost certainly break jQuery's way of faking history.
It is possible to change where in the history stack you are, using window.history.go(), which takes an integer offset into history and navigates to the relevant entry. It doesn't modify the stack at all, it just puts you in a new place. There are also back() and forward() functions which just call go with -1 and 1 respectively. This is probably what you're looking for, though it won't modify the stack, just move you around in it.
Ideally, you'd find a plugin for jQuery that doesn't maintain history the way jQuery.history does, but instead offers an onhashchange abstraction, and your library would just react to hash changes. That way, the browser is in charge of the history stack and you won't run into a lot of the crazy issues that dog ajaxian history libraries.
browser history is typically accessible in a very limited way through javascript (to prevent sites from snooping/accessing that information). short answer - what you are trying to do is not available to you through jquery, as far as I know.
Related
Is there any way to do something like this: $(window).on("hashchange", doSomething); but detect document.location.search change?
This was already asked in On - window.location.hash - change?. In a nutshell, there is no perfectly clean way to do this in JavaScript; you would need to be checking the location every now and then. Some frameworks and libraries will give you a nice abstraction layer over this but internally, they just keep polling the location.
Unfortunately, Lucas' answer is incorrect - you can use the JavaScript History API to modify the current URL without reloading the page.
The hash and the search tag are having different implementation. When the search string got changes the whole page got reloaded but not in the case of hash. So if you want to do some processing on href change then you can use the onbeforeunload event handler.
You can use the beforeunload event to trigger your code to run prior to navigation... If you need something more specific (e.g., only navigations initiated in your code), then I recommend that you factor out code changing window.location into a separate function, and add a hook for your custom logic.
For better understanding you may want to look at Ben Nadel's post in regard to doing this, it may be exactly what you're looking for.
Differently from what happens with hash, if your search value changes due to a user's action, your page will get reloaded. Therefore, your option would be to use the onbeforeunload event:
<body onbeforeunload="return myFunction()">
http://www.w3schools.com/tags/ev_onbeforeunload.asp
I'm building a little CoffeeScript application with 10 buttons and a container (simple). When the user press on one of the button : the container change.
The buttons look like a navbar and instead of using links (that will reload the entire page), I used javascript (Coffeescript, jquery or whatever) to change the content of the page (with some Ajax query to load data).
The problem is that the back and forward button of the browser can't work with that solution... and I need to find a solution for that. Routing maybe ?
I really like the way Asana.com resolved this issue: actually the address change but the content seems not to be entirely reloaded.
What do you suggest ? Thanks for the help
Hashes. The simplest solution is to define an URL hash every time the user clicks on a button. For example:
location.href = "#" + button.id;
With that, you create a history entry, and the user can press back or forward in the browser.
But how can you check when this happens? There's the hashchange event:
window.onhashchange = function() {
var state = location.hash.substring(1); // chomps the initial #
...
};
Basing your code on the state variable, you can trigger your AJAX calls from there.
By the way, you can change your code altogether, using links instead of buttons with an hash as the href property, which does not reload the page, but creates an history entry and fires the hashchange event.
The hashchange event is supported by every modern browser (that support history.pushState too, a more flexible and powerful way to control your history) and IE8-9.
How do change the url shown with the jQuery? With pagination, I do an ajax call to get the next page, but I want to update the url for bookmarking purposes. How do I do that?
You'd do it with either the HTML5 History API or hash tags.
You should consider using the address plugin: http://www.asual.com/jquery/address/
Supports deep linking and updates the address for you with a simple function call.
How far do you want to go? Do you want to change index.html to about.html or do you want to change it to index.html#about.html and have JavaScript change the page?
If you want to do the first you will need to use the HTML5 history API. Be aware that it only works in some browsers. I would recommend reading Dive Into HTML5's History API tutorial to understand all the details of how it works, but if you want to jump right into it, you can try the History.js jQuery plugin.
If you need support for older browsers, consider the hashchange event and the HashChange jQuery plugin. Every time you change pages, you can set location.hash to the page you want to map.
In both cases, you need to be aware that you're adding pages to the history and will need to monitor the events provided by the plugins. Otherwise, when the user clicks back, the URL will change but the page won't.
When the browser clicks "back" button, I want to append "&page=3" to the URL.
How do I bind it, and then do this?
Edit: I want this very simple.
BIND the event{
window.location(that-url + "&page=3")
}
Can it be done that simply?
It sounds like you're trying to create a history plugin.
Have you tried using using the mikage history plugin?
I wouldn't recommend changing the URL when they navigate away from the current page (which is what the back button does), because you immediately erase the forward history (thus breaking the forward button). When trying to handle the back button with pagination and javascript/ajax it is more typical to use the browser hash to pass parameters. The JavaScript namespace doesn't get cleared when the forward and backward buttons are used and the hash is updated according to what navigation was used. These history plugins have a couple of methods to detect when navigation is used (as the doc load event doesn't fire).
So beware, writing a history plugin isn't straightforward because of the way browsers fail to consistently handle hash property of the location object (part of the window object). You will definitely want to look at what others have done.
We use the window.location.hash to handle the history in our app.
I guess it works well in single page apps and is very simple.
For multiple pages app, I don't think it's a good idea to try to control and change the natural page history of the browser.
When the user clicks "back" or "next", the hash key gets the previous or next value.
Because of IE7 you need to use a polling technique (but it is ok in all browsers), with a setInterval(...) and a fast function that checks for instance every 300ms if the hash has changed.
Then, if a change occurs, act accordingly.
ie: call the server and refresh some areas in the page.
It works very well, and does not kill at all the responsiveness of the application.
You all know how to build AJAX sites with those 300ms trigger for checking anchors (hash links) in URL and then loading proper page with AJAX. But, these anchor links are nothing to search engines =(
I've thought of making some kind of workaround. All JS code remains the same, but, this little thing (I'm with JQuery, sorry):
$('a').live("click",function(){
var lnk = $(this).attr("href");
document.location.hash = lnk;
return false;
})
And then, you replace your anchor links in the body with plain links, build corresponding plain pages (still containing all JS codes) for non-javascript users and search engines. For normal visitors you would have plain links converted into hashes on fly and AJAX content loaded immediately. For those who are trying to load certain pages found through search engine - they will, and after that visitor will continue to move around with ajax navigation... somehow (remember, those plain direct pages still contain JS code).
I just want to make sure my assumptions are right. Are they?
Update: Bad thing is that when user directly enters some internal page with for ex. /portfolio address, he would then continue to /portfolio#contacts or similar URLs that are not so pretty, but still working (I mean /portfolio#contacts would show contacts).
That doesn't seem to be a good approach mainly because you'll end up having that function being triggered for the click event of each and every link, even those where you do not want to use your AJAX approach for loading content, for instance links to other sites or to javascript:....
If you place all your AJAX-y links under the same class or use another attribute to distinguish them and then adapt the jQuery selector that you're using there, then it will work and it will be a good approach because not only will it be SEO-friendly, but it also provides graceful degradation, that is, your users will still be able to access the content even if they're running in an environment where no JavaScript is allowed.
Other than that, and if SEO is your only concern, you may search the web for what a sitemap.xml file is and how to use it. Wikipedia has an article on it that may be worth a reading.
Sounds very sound... only I would suggest the callback on your 300ms timer also be called inside the event you have above, that way you have an instant result when clicking a link(and also a user can goto the link in the address bar and get the same effect)
Hey mate, you probably want to check out jQuery Ajaxy. It gracefully upgrades websites into rich ajax applications, so your website still works for SEO and Javascript disabled users.
You can see this functionality in action in this upcoming website. Notice how all the links are the same as they would be if the website isn't a Ajax application - and they still work if you right click and go open in new window!
This functionality is explained in detail at it's demo page. You can also find other examples and usage instructions there to:
http://www.balupton.com/sandbox/jquery-ajaxy/demo/
Overall to use it is surprisingly simple and straightforward (especially considering what it allows you to do!), and the support is fantastic.