mobilefirst logout redirect to new page - jquery-mobile

I am using jquery mobile and I am using $.mobile.changePage( "#newpage"); option when the user authentication is done to move to next page. in the next page I have a logout button and when user clicks on that it has to logout and on success it has to come back to the login screen again.
WL.Client.logout('CustomAuthenticatorRealm',{onSuccess: WL.Client.reloadApp})
in this code onsuccess it is reloading the same url. i tried to change it like onSuccess: $.mobile.changePage( "#loginpage");
but it is not working. any suggestions please

Hi I got it working ..
Instead making a page change I used onSuccess: WL.Client.reloadApp and for all the pages where I am using the load page function i have added changeHash: false so that the same url follows till the end . now it works fine as I expected

I am not sure about that #loginpage bit, but that depends on your multiple pages implementation.
Anyway, try this instead as the onSuccess callback:
$.mobile.changePage("#loginpage", { changeHash: false });

Related

How to handle session expire in partially loaded divs in mvc

I have 2 divs on a page, based on the click id on left i load the content in the right div.
But when session expires, i am expecting the page to redirect to Login, but it does not behave tht way.
some times the button wont work or some times the login screen loads in the right div.
Any suggestions to handle this session expire?
By default, the IIS simply returns the login-page with an HTTP status code 200 when the session is expired. This makes your ajax not see it as an error.
So you need to do a check in your controller action to see whether the Session has expired, and if it has, you can return an HttpStatusCodeResult(HttpStatusCode.Unauthorized).
After that, in your ajax, you can use somthing like this:
$.ajax({
//...
error: function(data, textStatus, xhr) {
if(xhr.status == "401"){ window.location.href = "/login";
}
}

Jquery Mobile Redirect Issue

Iam using jquery mobile 1.4.5
Here, Page is redirect automatically into last page and redirect count also increasing respectively.
For Page Redirection, I Have used following method but still same issue
$.mobile.pageContainer.pagecontainer("change", "dashboardPage.html");
$.mobile.changePage( "dashboard.html", {
//transition: "pop",
reverse: false,
changeHash: false
});
$.mobile.changePage( "dashboard.html");
My Issue is
For Ex:
I'm in Page 1, from page 1 i'll goto page 2, Then from there i come to page 1. Then again i goto page 2. So this time page2 is automatically redirect to page1.
If i switch between two pages, automatic page redirection increasing 1,2,3 time.
For switching pages, im using above page redirection method.

jQuery Mobile Site using an ajax $.get() to check username availability returning previous page code in return data

I have a simple JQM site I'm working on. I'm trying to validate the availability of a username on the fly in a form. I'm using jquery $.get() ajax to return "success" or "fail" however the return data is being replace with the code of the previous page.
$(document).on('pageinit', function () {
// check to see if username is available
$("#username").change(function() {
$.get("controller.php", { action: "check_username", username: username }, function(data) {
console.log(data);
}
});
The controller.php is checking for availability of the username and return "pass" or "fail" When I do the console.log(data) which I'm expecting to be pass or fail, it's logging out the code from the previous page??
I'm thinking maybe it's a JQM caching issue so I tried to disable cache with no effect. I was orginally using a JQM dialog box to display the form. Thinking that had something to do with it I pulled that out and loaded a straight link. That didn't fix it so I tried to load the page directly using
$.mobile.changePage( "user-new.php", { reloadPage: true});
I am stumped. Why would a $.get ajax call return data be returning code from the previous page?
Here's a face palm! My controller was authenticating and kicking it back out to a login page. Apparently php redirects act funky with ajax return data. Rather then returning the login page code it was returning the previous page code. I Removed the authentication and it works fine. Unbelievable! I'm going to go work at a gas station or something :)

jQuery Mobile Secure Pages

I'm developing a jquery mobile site that is only available to users that are logged in.
I have a function that checks a server for their logged in status:
function checkLogin() {
$(function () {
$.getJSON(root_url + 'manageUsers/checklogin/?callback=?', null,
function (data) {
if (data.logged == 'false') {
$("#index_Container").html("<h2>Login Required</h2></div><p>We've noticed you're not logged in, please login to use this app.</p><p><a href='login.html' data-role='button'>Click here to login</a></p>").trigger('create');
$.mobile.changePage('login.html');
} else {
$(".logged_in").text(data.username);
$(".logged_in").addClass('logout');
$(".header_div").trigger('create');
}
});
});
}
I can't seem to figure out how to implement this so everytime the index page is loaded and any other page loads this is fired prior to rendering anything else on the page. Currently, the page will load and show the HTML, then do $.mobile.changePage('login.html'):
EDIT: If anyone has any ideas on how to implement this in a better way I'd love to know, every page in the app requires the user to be logged in.
In order to have this function run every time you load anew page, you will need to bind it to the pagebeforeload event, and potentially cancel the user navigation if it does not validate the login.
$( document ).bind( "pagebeforeshow", function( event, data ){
event.preventDefault(); //prevents usual load of page
checkLogin(data);
});
You will have to make changes to checkLogin, notably because as the page does not exist yet, so you cannot make changes to the DOM. You can see an quick and dirty example in this fiddle, giving hints as to how do it considering the asynchronous nature of your call.

Jquery mobile page navigation corrupts base url and causes ajax on main page to fail

My main page is here:
http://www.mydomain.com/main/main.php
My login page is here:
http://www.mydomain.com/main/pages/login.php
Main.php uses ajax to fetch data in response to a tap event. This works fine until I navigate to my login page and then back to my main page. After going to the login page and back, the relative paths get messed up such that the ajax looks for server file in the wrong place.
here is the ajax:
1. function get_more_data() {
2. more_data_index += 15;
3. var formData = "index=" + more_data_index;
4. $.ajax({
5. type: "POST",
6. url: "genxml.php", // file located here: http://www.mydomain.com/main/genxml.php
7. cache: false,
8. data: formData,
9. dataType: "xml",
10. success: showFiles3,
11. error: onErrorMoreData
12. });
13. }
After I navigate back to main.php from login.php the ajax tries posting to the wrong location:
http://www.mydomain.com/main/pages/genxml.php
(genxml.php is not in the "pages" subdirectory; it's in the main directory.)
I tried updating the ajax to use an absolute path:
url: "http://www.mydomain.com/main/genxml.php"
This made the post successful, but my data parsing failed because relatives paths are used in the main file for things like images. So instead of getting images from here: http://www.mydomain.com/main/ the script was trying to get images from here: http://www.mydomain.com/main/pages/
I've found a few posts with people having similar issues, but I've not come across a solution. I've also tried reading the jquerymobile docs and it's very possible that the jquery developers attempt to cover this issue here, but I admit I don't completely understand everything on this page:
http://jquerymobile.com/demos/1.0b3/#/demos/1.0b3/docs/pages/page-navmodel.html
If anyone can help I would really appreciate it. Thanks.
P.S. This issue happens on Android and Google Chrome, but not in Firefox.
I have created a working example of what you're trying to do. You should be able to look at this and see what I've done. Be sure to checkout the master.js. I think that the key to making it work in your situation is to nest the ajax calls within the "pageshow" event to be sure that your baseURL has been updated. You can download the example at http://www.roughlybrilliant.com/stackoverflow/7372909.7z
View the example in action as it pulls in weather.xml with relative URLs.
$("div").live("pageshow", function(){
var $page = $(this);
get_more_data();
});
Why don't you use one of this:
use "../main.php" when redirecting back from login page, or
remember UrlRefer from Headers when you entering login.php and use that to redirect back to any previous page with 301

Resources