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.
Related
I am learning Angular JS ui-router and I was wondering How ui-router manages to change url in navigation bar without reloading entire page?.
I have tried reading this blog and some stackoverflow questions, but couldn't find any proper explaination. Can some one explain properly?
Thanks in advance !
It's based on a simple fact that we can use hyperlinks(<a> tags) to jump to certain sections in a document and bring focus to that section. But if your href attribute points to IDs that do not exist in your page, then the browser will not do anything but change the hash part in the URL.
In modern browsers, everytime, the hash part changes in the URL, a hashchange event will be fired. ui-router or any router can actually listen for this event, get the hash part and use the config to update the view section accordingly.
This works well as long as you trigger a state change by clicking on some link but there are cases where you change the state using methods like $state.go() or $location.path(). In this case, we need to resort to HTML5's History API. There's a pushState method that allows us to change the URL in the address bar without causing the browser to load that resource.
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
To quickly explain, all of the links on my page currently use the following format:
Link
What I'd like to do is upgrade the code to something like the following:
Link
My goal is two-fold:
Make the status bar show the URL that the link leads to
Allow users to copy the link location and have it be a valid URL
My problem is that this then ignores the onclick and actually redirects to the URL. Whats the best way to fix this?
If you're using jQuery, then I suggest using History.js or jQuery BBQ. They both provide good support for HTML5 pushState with a fallback for HTML4 browsers. Using pushState, you'll be able to update the URL (to make it bookmarkable) and you can use the statechange event to handle navigation (like when the user hits the back button). Take a look at the documentation for History.js to see some examples of how it works.
Update:
Per your comment, I suggest creating an event handler for links that you want handled via an AJAX request.
For example, lets say all links you want to be ajaxy have the "ajaxify" class.
$(document).on("click", "a.ajaxify", function(e) {
var url = $(this).attr("href");
History.pushState({}, null, url);
// do something, like make an ajax request to get the url
e.preventDefault();
});
In your loadPageWithAjax() function, you need to be able to take the event data that it is automatically called by the browser.
function loadPageWithAjax(e){
e.preventDefault(); stops page from clicking
//do your ajax stuff
}
You can't set the URL of the address bar without changing loading the page unless you use hashes using window.location.hash, or the new history.pushState, which is only available to HTML5 browsers.
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.
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.