What Jquery Mobile event fires when an internal page is opened? - jquery-mobile

I have two 's in one html page.
In the first "page", I have a link to the second page.
I need to fire an event after the user clicks the link and after the DOM has been instantiated by jquery mobile.
I thought that event was "pagecreate", but this event only fires the first time. I need to capture an event that fires every time that link is clicked by the user.
Please help (or let me know if I need to provide more info).
Thanks

Related

on clicking browser back button redirect to an action method in mvc

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.

Force data-ajax="false" on a redirect, or on a certain page load

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!

Using knockout.js to handle data behind jQuery Mobile ajax page transitions

I have a proof-of-concept that is thoroughly and utterly broken here:
http://jsfiddle.net/floyd_may/FAmxj/
I'm hoping the intent behind this is evident. Basically, I want to use #editPage to edit elements on #mainPage one at a time. However, as soon as you click the 'Back to Main Page' button, the main page is empty.
Can I get some guidance here as to how to make this work?
Try using the pageinit event instead of pagebeforeshow: http://jsfiddle.net/FAmxj/11/
With pagebeforeshow, multiple models are bound to #mainpage.

jquerymobile ermm browser variation in DOM change for internal linking

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.

How to detect changes to a table using JQuery

I have a table which always updates by clicking on another link. This link has ajax functionality which is created by serverside API at run time and JQuery has no control over this link.
Now whenever this link changes table, I want to call a function by JQuery, how do I do that?

Resources