I have a jQuery Mobile application I'm developing. jQuery Mobile uses pushState by default to allow the browser's back button to work dynamically.
Now, my application is meant to change its pages dynamically, and the user should always arrive at the front page when loading the application.
The problem is, jQuery Mobile updates the page's hash in the URL whenever I go to a page in the application. Now, if the user enters the same hash in the application, jQuery Mobile will automatically take them to that page (when I'd want them to be handled by my code). Also, if they refresh the page, I'd like my code to take them back to where they should be, not directly moved to the hash the URL had.
To prevent this, I tried to add the following code in the mobileinit event:
$.mobile.hashListeningEnabled = false;
This works, but it also disables the pushState updates, which in turn breaks the back button, which I don't want to happen.
What would be the best way to allow users to use the back button while still not allowing manual movement between pages?
I don't have so much element to describe a possible and accurate solution for your problem, but an easy one should be this:
on every link on your page that take to another one attach a function like this:
$(DOMElem).on("click",function(){
sessionStorage["urlChangedByLink"] = "true";
});
On the same page you can try if there are no problem with this:
$( window ).on( "navigate", function( event, data ) {
if(sessionStorage["urlChangedByLink"] == "true")
$.mobile.hashListeningEnabled = true;
else
$.mobile.hashListeningEnabled = false;
});
Or this, on the other page you check if this storage variable exsist and than make your operation:
if(sessionStorage["urlChangedByLink"] == "true")
continue navigation...
else
window.history.back();
one option here is to set the data-url for each of your pages you simply add the attribute to your page div and set it equal to your home page that way the url for the page shown in the history doesnt have the hash values (or you could include your own values). the documentation on this is better explained in the jquery mobile documentation
Related
I am trying to implement a single page application in knockout and at a point I am clicking a link to go back to a page. The URL is changing but it is still remaining on the same page. Only on refresh it is going to the required page.
I am using window.location.hash = "#/home" to set the link in the URL.
Any idea what can be done so that the page actually changes according to the URL.
Use event onhashchange like,
window.onhashchange = function(){
// change your page content here
}
I want to change url when i open big image in pop up window on a current page with preview images. I don't want use window.location.hash feature because i want to manipulate with new url through PHP next and i found this complex to made it with hash. So, I found that I can use HTML5 feature to make this.
window.history.pushState(“object or string”, “Title”, “/new-url”);
My problem is: I want to remove this new-url from page when i close big image. How can i make this, without using
window.history.back();
?
Thanks.
Closing the image is not analogous to pressing the back button in the browser. It is analogous to following another link back to the original page. So there's no need to go back. Just pushState again, back to the original URL.
On the other hand, if the person does click the back button in their browser, you want that to bring them back to the original page too. So you need to listen for the popstate event, and, when it's fired, run a function which will remove the popup image:
window.addEventListener("popstate", function(e) {
hideimage();
}
Read more about the HTML5 history API.
I need to prevent users from refreshing a page.
I have scripted in such a way that there is no 'forward' or 'backward' movement required.
However, if one refreshes the page, 'everything' starts from the beginning.
To save everything before page refresh and restore them after is not ideal.
In order to prevent page refresh, I could use an alert();, but there are chances that the user might neglect the warning.
Any other choices...???
JavaScript cannot prevent the user from leaving the page (refresh counts as leaving the page), as it would violate the user's... whatever... Anyway, it's not possible. (even if you try, the browser will have tools to easily bypass any script you may write).
But if you will use pushState / replaceState from HTML5 to visually store the state of your webapp (and set the server to serve it from all those urls), you can navigate the user to the right place of an app even after refresh.
There is no way to prevent the user from refreshing the page. If you do not require that much data to be preserved, you can put in the URL (site.com/page.php?sort=2&x=3&y=4).
If you need a lot of data, you can only hope the user doesn't refresh the page. One way would be to, as you noted, display a dialog.
Oh, guess you could also use AJAX to store data server side and serve page to the user considering it's last state.
The best thing you can do is to ask for a confirmation by means of the window.onBeforeUnload event handler.
window.addEventListener('beforeUnload', function(e) {
var dialogText = 'Dialog text here';
e.returnValue = dialogText;
return dialogText;
});
Note that the handler function should assign a string value to the returnValue property of the Event object and return the same string.
For more information see MDN WindowEventHandlers.onbeforeunload.
I have a page where navigation is handled by hiding and showing preloaded divs when users click on links. But, the users think they've actually changed pages, so they click on their browser's "back" button trying to go back to the div that was previously hidden. But of course, they go back to the page from which they came.
What's the best way to handle this? 90% of the traffic is from a login page. Should I just sandwich a redirect page in between the two? How is this done? Can I just change the browser's back button behavior?
If you are already using jQuery, why not simply add a history manager like jq-bbq or the hashchange or history manager? (Or, if you want to really go all out, switch to a MVC JavaScript framework like Sammy.) That way, the back button will work as the user expects, rather than hacking around their expectations by blocking the back button or throwing in redirects. (Unless you have a good reason to, of course :-) )
If you use a browser history plugin like the jQuery UI one you end up changing the history so that the back button doesn't actually unload the page.
http://yoursite.com
-> User clicks something
-> new address bar reads http://yoursite.com/#/something
because of the hash mark when user goes back it goes back to http://yoursite.com which should inturn fire your show previous div function
read more about the available history manager plugins available for jQuery. There are quite a few. Most if not all provide available callback functions that you can specify.
On change of the state of your page, write a unique set of parameters to the hash of your URL. You can change this via JS without causing the page to reload.
Set a timer on the page that checks the current location hash repeatedly, and if it changes (i.e. the user presses the Back button) then update the state of your page to match the URL.
I have this scheme working to great effect in a local application.
The jQuery Address library is another great alternative.
http://www.asual.com/jquery/address/
You can set the URL for different application states, and get the URL 'parameters' when the page reloads.
Two ideas:
1) onbeforeunload. Ask the user if they want to really go back.
2) Sandwidch a redirect page. Login -> redirect -> your page. A single back click would take the user to your redirect page.
The second is kind of a pain in the neck for people who know what they're doing though. I think the Back button (and all standard navigational elements) should be messed with as little as possible.
I would go with onbeforeunload:
function sure()
{
event.returnValue = "sure?";
}
...
<BODY onbeforeunload="sure()">
I need a solution for the page refresh and the back button when using AJAX.
I'm using simple javascript for the AJAX implementation.
If anybody could send a code snippet I would be very grateful.
If you're using jQuery, there's the history plugin.
Here's a solution that I've used in some of my pages. Add this to pages that changes are made at.
window.onbeforeunload = function() {
window.name = "reloader";
}
this triggers when you leave those pages. You can also trigger it if there were changes made. So that it won't unnecessarily reload the page that needs reloading.
Then on pages that you want to get reloaded on after a the browser "back" use.
if (window.name == "reloader") {
window.name = "no";
location.reload();
}
this will trigger a reload on the page you need reloading to.
essentially, you need to use & monitor the hash portion of the url...
http://.../path?parms#hashpart
Whan you change the hash, iirc window.location.hash , it won't reload the page, but your ajax can monitor, and respond to it.
The onbeforeunload event can be useful to guard against refreshing but it fires if you navigate away or refresh. If you require that users login to the app you can always show a generic message advising against navigating away and refreshing. If users click your app log out button set a var to disable the warning. Could probably also make a 'Close' button that does the same thing.
Try PathJS it does not require jQuery or any other additional lib.