JQuery Mobile - constant url with native back button support - jquery-mobile

I'm working on a JQM app that has multiple pages, most of which can be automatically generated based on the data they need to display.
I'm using ajax calls to pull-in the json and moustache to generate the html. So far so good.
I wanted to avoid having the url change with every transition because not only does this interfere with the notion of an "app", but it also causes not a small amount of havoc should the user refresh a "sub" page.
So I handle all the page transitions directly with $.mobile.changePage, which allows me to set changeHash to false.
The problem is that when the user hits the browser back button they are taken out of the app.
Is there a way to keep a constant url in the browser bar and still have native back button support?

Related

detecting a change in the page including refresh

so i am working in a .tpl file meaning i am open to js, html and php answers. what i want to do is whenever a person refreshes the page, experience a change in the url or exits the browser, my site would take an action based on this change of state. so basically, when they leave that specific page of mines in any way, i would call a function. the reason i want this is because i am saving this editable image on my site. but whenever they leave the page, i want the image the created to be autosaved.
this task splits into client-side and server-side parts. At client side you should bind to interesting browser events, triggering some background http requests to some service URLs of your website, this is probably JS. At the server side, you should provide corresponding reaction to these requests, which is probably PHP.
As long as these service URLs are to be called intermittently by various visitors, be sure to keep an eye on what request came from which client's window. PHP sessions should help you.
I'd propose to work this separately, first to get saving machinery working -- just bind everything to explicit big buttons at the page (page close, url change, etc), then replace each button with the binding to exact JS event. Keep in mind differencies among browsers.

JQuery Mobile Back Button Functionality

I think this must be a common scenario-- but I can't seem to find a solution.
JQueryMobile site with authentication functionality:
Link on all pages takes user to dynamically loaded authentication page
All pages have back button functionality
A bad username and password causes an ajax form submission
Clicking the back button in this scenario takes you back to the authentication page (which makes sense because that's where you came from-- but if I input a bad password five times, I have to click on the back button five times before I get back to where I came from)
I guess what I want is to have the ajax form submission for logging in taken out of the "hash" history.
One way to solve this would be by keeping track of the failed attempts numberOfAttempts++. Then using history.go(-numberOfAttempts); when the back button is clicked.

Jquery Mobile Logon Loop

Knocked-out a simple jQuery Mobile site with [logon -> index -> content] pages.
If I use the back button to the logon page, I can't escape no matter what I do - forward, back, filling it in, nothing.
I'd like to remove the #logon page from the navigation, so you cannot get back to it without typing it in, or logging out - any advice?
Easiest way to keep a page from showing up in history (with jquery mobile) is show that page in a dialog. This model works particularly well in situations where the content that would be in a dialog is either tangential to the main content or some sort of interrupt (which the login process is). See an example here. DISLAIMER: this is not the right way to implement content like this in the long run, it is only meant to show the effect of using a dialog in a login process to bypass insertion into history.
Another (more manual) route would be to use the a normal jqm page and do your login by way of an ajax posting. If the response came back as successful, then use location.replace() to remove the the current (logon) page from history.
I ended up removing the ajax navigation full stop and sticking to manual, not as pretty but headaches avoided!

Alternative way of Page.IsPostBack

I am into iPhone, Android and Blackberry web programming. I am struck into an issue in which i either need to stop refresh of page (which according to blogs is not possible) or i need to just refresh the page rather than submitting.
I have used basic HTML controls not ASP.Net server controls, so Page.IsPostBack cannot be used to differentiate between page refresh and a postback.
Alternatives that i have tried:
The root of the issue is that : Having used Request.Form Collection which are read only and are only updated on a postback. So, on a page refresh the Request.Form collection is having previous values and thus submits according to previous request.
I have tried using cookies as found in this link: http://hi.baidu.com/cxyking/blog/item/508872346135283c5ab5f53c.html
It is able to detect a page refresh only after it has already loaded. While my requirement is that i need to detect page refresh before the original page has been unloaded.
I tried to use OnBeforeUnload to display some warning message. But, this only works in desktop browsers and iOS does not seem to do anything on this event.
Is there any idea on how i can do any one of following:
Completely stop page refresh.
Display warning message to user for not leaving the page (OnBeforeUnload not working on iOS)
Somehow, update Request.Form Collection (Note that it has a Set but it is readonly, so it doesnt work)

How can I make something similar to that cool bar on the top of stackoverflow that pops up when you get a new badge?

When you get a new badge on stackoverflow.com, a bar appears at the top of the screen informing you of your achievement. It sticks around until the user closes it.
I rather like that system of informing the user about new news related to the site or their account. It's fairly unintrusive, but still clearly communicates the information. Even if all users receive a notification this way, it sticks around for each user until they have acknowledged seeing it.
I'm running a system using Ruby on Rails on a PostGres database. What's the best way to implement a similar system on my setup?
Edit: Just to clarify, I'm interested both in the server side and client side of the setup.
The effect can be accomplished with jQuery and the slideDown method (http://api.jquery.com/slideDown/). Set an onClick event to make the element slideUp, hide, or hit an AJAX call to let you know that the user got the message and dismissed it.
You could set the contents of the element (I'd go with a div) via an AJAX call, or you could simply populate the div with the appropriate message when generating your page, start the div off as hidden, and then kick off the slideDown method when the page load is complete via a $(document).ready definition (http://think2loud.com/jquery-document-ready-howto/).
You could use something like the jquery popup bubble extension: http://www.farmcode.org/post/2009/04/06/jQuery-popup-bubble-extension.aspx

Resources