I'm trying to figure out exactly what happens when you link to a same-domain external page with JQM. I know the new page gets added to the DOM, but if I cruise through 5 or so of these links, are all 5 now in the DOM?
Firebug is showing the initial page and the active page in the DOM and nothing else.
Chrome is showing variable results, usually storing the last page and the active page.
What exactly happens here?
Do I need to assume all my handlers on a page are lost when I change page? So I need to rebind them on each pageinit?
Easy way to check. Bind page create:
$('#pageID').live('pagecreate', function (event) { alert("Inserted to the dom") };
That triggers when the page is inserted to the dom. If the alert is triggered every time you enter the page, it means the page is not saved to the dom. And I think that is actually the case. But I am not sure.
Related
I am new to mvc application and i am using MVC 5 version.The scenario that i face now is like if i click browser back button on staying inside any webpage inside my application then login page should be shown instead of showing any cached page.
I added below code in global.asax to clear the cache.So after some time if cache is cleared and back button is clicked then expired page will be shown.
protected void Application_BeginRequest(){
Response.Cache.SetCacheability(HttpCacheability.NoCache);
Response.Cache.SetExpires(DateTime.UtcNow.AddHours(-1));
Response.Cache.SetNoStore();
}
My intention is to show the Login action method at any point of time if browser back button is clicked with in the aplication.Please help me out guys..
According to me this should never be done.
The back button on browser is a client / user action and it has a specific behaviour. You should not try to change something like that.
But its all up to you if you want to do something that would be really bad according to user persceptive.
What you can do is use the unload event in JavaScript or jquery. This will not just let you know when back button is pressed but when anytime the page is navigated away.
I had used this when dealing with data entry form to confirm navigation away after user has entered data without saving.
The unload event is sent to the window element when the user navigates away from the page. This could mean one of many things. The user could have clicked on a link to leave the page, or typed in a new URL in the address bar. The forward and back buttons will trigger the event. Closing the browser window will cause the event to be triggered. Even a page reload will first create an unload event.
http://api.jquery.com/unload/
$( window ).unload(function() {
return "Handler for .unload() called.";
});
I think now you would be thinking of distinguishing what causes the unload event. But that is not possible, at least not in a cross browser way and without any hacks. You can refer this link for more details about it - Is there a way in javascript to detect if the unload event is caused via a refresh, the back button, or closing the browser?
update (copied from another SO answer):
Since you are doing this for logout-purposes you should probably use a timestamp variable at the server that gets updated with every request (or use a ajax-ping), and logout the user if it hasn't been seen for a specified time.
Let's say that I have a link to a page such as:
<a class="ui-btn" data-transition="slide" href="/Stuff/Properties/Q6158">Properties for Q6158"</a>
Normally, I would want this page to slide into view and thus data-ajax would be default "true" and this works fine. But what if on the server side, something happens that causes me to instead want to redirect to a different page, and not to load it using ajax? In other words, the user's session has expired and I'd like to reload the entire login page, not just slide it into view instead of the requested page. Hope that makes sense.
I realize that by the time the request gets to the server and it figures out the session has disappeared, it's kind of too late to change the request, it's already been made by jQM. I suppose I could handle the click of the link myself and handle a custom "redirect" response manually, but that seems overly cumbersome because basically every link on the site is affected by this.
So I'm out of ideas. I'd really like the entire login page to be fully reloaded at this point. Any ideas would be helpful! Thanks!
On the server side you can control the session and in the ajax call, if the session has expired, return an 404 error.
In jQuery Mobile there is an event called "pageloadfailed" that's triggered when a page load fails. There you cold redirect to your login page.
$( document ).on( "pageloadfailed", function( event, data ) {
event.preventDefault();
//redirect to your login page
});
Hope that works.
I ended up introducing a third page. I return this page I call "Loading" when the session has expired. All the page does is display "Loading, please wait..." and instantly sets location.url to the login page in the pageinit causing login to be fully reloaded. Seems to work well so far for my particular situation. But thanks for the other suggestions!
I'm using JQM 1.3.2 and 1 page per html file. JQM automatically removes pages from the DOM that are loaded by AJAX. But there is a known issue (clearly stated in the docs and frequently discussed in various forums) where the first page is not removed. I'm wondering if there are any potential pitfalls with this workaround:
$(document).on('pageshow.firstPageRemoval', function (event, data) {
if (data.prevPage.length > 0) {
data.prevPage.remove();
$(document).off('pageshow.firstPageRemoval');
}
});
From my brief testing, it seems to be working as designed. The first page loads, and data.prevPage.length === 0, so it does nothing. After the next page transition, it removes the first page and removes the handler.
My question is, are there any issues that might crop up because I've removed the first page?
Only issue is browser history, basically you will remove page but it will still stay in history.
Of course there's a workaround. Instead of removing first page, don't have one in the first place.
Let your first HTML be blank, and load external page during that page document ready state. Unfortunately you will not be able to use pageinit (or similar page event here) because you will not have initial page to trigger it.
This way you will circumvent this problem and browser history will stay clean and intact.
I have been working with jQuery mobile 1.0.1.
I have a page which drills down to a listing page. The listing page is created dynamically because the links to it have href's to a separate page.
The thing I find confusing, is that when I click the back button from the detail page, there is an ajax call to grab the listing page. I don't see why this has to happen as the listing page is in the DOM.
Not only is it inefficient, but let's say I had filtered the list on the listing page, that information will be lost when the listing page reloads.
I found a workaround where have the empty listing page on the first page that loads, I then dynamically modify it by making the ajax call myself. When I do this, it doesn't make the ajax call when going from the detail page back to the listing page.
Any help would be appreciated.
jQuery Mobile removes pseudo-pages from the DOM after they are navigated away from (this is for external pages only). You can stop this behavior on a single pseudo-page by adding the data-dom-cache="true" attribute to the data-role="page" element for the pseudo-page:
<div data-dom-cache="true" data-role="page">
...
</div>
There are other ways to enable (well disable really I guess) this functionality; you can read about them here: http://jquerymobile.com/demos/1.0.1/docs/pages/page-cache.html
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!