Search jQuery

jQuery Forum

jQuery Mobile

markerick..

Login problems with redirects

in jQuery Mobile • 12 years ago

Background:

* Using Ruby on Rails 3 with Devise for authentication.

* All pages (except sign-in, sign-up, etc) are behind authentication

* My "home" page contains multiple jQuery Mobile "pages".

Problem:

When the user tries to visit the root / home, they get redirected to login. After the user authenticates, they are redirected back to the root url. The root path contains multiple jQuery Mobile pages.

Root URL attempt: http://localhost:3000/

- redirects to -

- after authentication, user is redirected to root path but gets... -

Redirected to root : http://localhost:3000/users/sign_in#/users/sign_in

The page shown is the last "page" in the multi-page list.

Forcibly changing the URL to the desired root (http://localhost:3000/), the application then works fine.

Question:

Is there a way to conditionally handle redirects as "rel='external'" or something similar? Has anyone found a solution for this problem?

-Mark E.

Replies(16)

markerick..

Re: Login problems with redirects

12 years ago

I raised this question as an issue on the gihub project page.

http://github.com/jquery/jquery-mobile/issues/issue/501

Please vote for the issue to help raise attention.

Thanks,
-Mark E.

abuiles

Re: Login problems with redirects

12 years ago

Hey Mark, I ended up doing a nasty trick to get this working, though, it's not very clean, but It fixes the problem while a better solution appears.

https://gist.github.com/704452

I hope that helps

Adolfo

markcrook..

Re: Login problems with redirects

12 years ago

Just a suggestion, on your sign in page, make links external:

$(document).bind("mobileinit", function(){

$.mobile.ajaxLinksEnabled(false);

});

abuiles

Re: Login problems with redirects

12 years ago

markcrooknz: did it, and it didn't solved the problem ;S.

sanyyas

Re: Login problems with redirects

12 years ago

be sure you put it before loading the jquerymobile. this way works for me.

<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
        <script type="text/javascript">
            $(document).bind("mobileinit", function(){
                $.extend( $.mobile , {
                    ajaxFormsEnabled: false
                });
            });

        </script>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>

markerick..

Re: Re: Login problems with redirects

12 years ago

@sanyyas, Excellent! Thanks for the clear example and explanation.

For others, this is what I did in my Rails application...

In my mobile layout file, I added a hook for inserting the javascript before jQueryMobile loads.

# mobile layout file
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<%= yield :pre_mobile_load %>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>

Then in my login page view I added this...

<%= content_for :pre_mobile_load do %>
<script type="text/javascript">
$(document).bind("mobileinit", function(){
$.extend( $.mobile, { ajaxFormsEnabled: false });
});
</script>
<% end %>
...login view code...

The javascript override code is included when the login page loads. The login page is submitted without AJAX and the redirect works correctly.

Thanks again!
-Mark E.

bramvdh

Re: Re: Login problems with redirects

11 years ago

I have about the same problem

scenario:

go to: mysite.com

redirects to: mysite.com/login.php that has a form to login, the form posts to itself (so action="login.php")

if login successful i want to redirect to mysite.com (login state is stored in cookie)

mysite.com has a number of pages, with 1 being the homepage with links to other pages.

the home page I have added data-url="/" to, so the url is updated correctly but

only the homepage page is loaded. the rest of the pages are just not visible in the dom

if I refresh the page, it checks that I am still logged in, and then I do see all the content fine.

just after a fresh login, the redirect only shows the homepage, but the rest of the pages are not loaded.

Anyone got any ideas?

thx

pr2012

Re: Login problems with redirects

12 years ago

This is a total life saver.

This problem has kill about a days worth of development time.

THANK YOU!

pr2012

Re: Login problems with redirects

12 years ago

Ok, should have seen this coming.

Anyway to do this on a per "page" or per form basis?

minox86

Re: Login problems with redirects

12 years ago

Hi,
I'm trying to integrate jQuery Mobile in a JSF application and I found some trouble like those explained in this thread.

First of all, I solved redirection problems disabling AJAX navigation as explained above, but I'de like to know if someone knows a way to use AJAX navigation, which is really user friendly, with JSF and redirections in general.

As I've tested, redirection seem to work good but the HTTP GET request done after the redirection returns a page which is not loadable by jQuery Mobile. This page is the simplest html page, with no JavaScript.

Thank you very much,
Mattia

markerick..

Re: Re: Login problems with redirects

12 years ago

I don't know if this is helpful, but here is more on my situation.

My login redirects were the problem because it was treating the login page as the "base" or main page and dynamically adding the other pages to that base.

Conditionally applying that javascript config to disable the AJAX on that page solved it. The AJAX loaded pages all worked correctly when loaded from the correct 'home' base.

It may be that you need to designing your site (or mobile interface) uniquely for use with jQuery Mobile. That is what I had to do. My mobile interface is only a subset of the full site and the "home" page loads contents for other pages so common loads can happen quickly.

The AJAX loads using redirects in other situations works fine for me. Keep in mind that jQueryMobile creates a new div with an ID of the URL path for the loaded page. I saw this in the docs but couldn't find it just now.

So for me, using a RESTful URL interface works well.

Where appropriate you can just disable the AJAX loading on specific pages using the above logic conditionally. Just keep in mind that the redirected page (after that is disabled) is effectively the new base for the URLs.

Hope that helped some.

-Mark E.

PS> Ah... here is the page with the information on how AJAX calls are actually implemented.

http://jquerymobile.com/demos/1.0a2/#docs/pages/docs-navmodel.html

korayem

Re: Login problems with redirects

11 years ago

For forms just set "data-ajax" attribute to false.

It should be like this:

<form action="postthis" method="post" data-ajax="false">

This will disable default ajax handling of jQuery mobile
Reference: http://jquerymobile.com/test/docs/forms/forms-sample.html

elricstorm

Re: Login problems with redirects

11 years ago

For Rails you can do this for jquery mobile:

<%= form_tag session_path, :'data-ajax' => 'false' do %>

Enjoy. :)

elricstorm

Re: Login problems with redirects

11 years ago

I thought i would provide a full example for two types of forms using data-ajax with rails 3:

The first is an example registration form:

<%= form_for(@user, :html => {:'data-ajax' => 'false'}) do |f| %>

<div class="field">
Name: <%= f.text_field :name %>
</div>
<div class="field">
Email: <%= f.text_field :email %>
</div>
<div class="field">
Password: <%= f.text_field :password %>
</div>

<% end %>

By supplying the :html options we can include the :'data-ajax' option into the form. We need to add the symbol before the quotes so we don't receive an unserialized error.

The example above this one using:

<%= form_tag session_path, :'data-ajax' => 'false' do %>

.. can be used for logging into a site. Just follow the standard rails format for creating a form. Both examples just show you where to include the :'data-ajax" options.

I hope that helps.

alterfalt..

Re: Login problems with redirects

9 years ago

Hi,

i want to build a mobile platform template for everyone easy to use: http://dwaver.wordpress.com/2013/04/02/gigalaunch-de-web-platform-template-presentation-php-jquery-mobile-mobile-web-platforms/

i tried that data-ajax="false" IT DID NOT DO SHIT!!!!

this is my project:

demo: http://gigalaunch.de

http://sourceforge.net/projects/gigalaunchde/?source=directory

i also tried your (DOES THIS STILL WORK with jq 1.91 and jqm 1.30? this code did not get executed in my app... i don't know why)

<script type="text/javascript">
$(document).bind("mobileinit", function(){
$.extend( $.mobile, { ajaxFormsEnabled: false });
});
</script>

this is my html login page: (get the full code on http://sourceforge.net/projects/gigalaunchde/?source=directory)

<!DOCTYPE html> 
<html> 
<head> 
	<title>login</title>
	 
	
		<!-- meta -->
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		
		<meta name="viewport" content="width=device-width, initial-scale=1">
		
		<!-- apple-iphone specific stuff -->
		<meta name="apple-mobile-web-app-capable" content="yes"/>
		<meta name="apple-mobile-web-app-status-bar-style" content="white">
		<link rel="apple-touch-icon" href="images/opensource_icon.png"/>

		<!-- credits: who made this world a better place? -->
		<meta name="author" content="user">
		
		<!-- tools: what was used to make this world a better place -->
		<meta name="editor" content="pdt eclipse">
		
		<!-- default jquery mobile css -->
		<link rel="stylesheet" type="text/css" href="../library/css/jquery.mobile-1.3.0.min.css" />

		<!-- custom project css -->
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		
		<!-- default js libraries: jquery, jquery mobile -->
		<script type="text/javascript" src="../library/js/jquery-1.9.1.min.js"></script>
        <script type="text/javascript">
            $(document).bind("mobileinit", function(){
                $.extend(  $.mobile , {
                    ajaxFormsEnabled: false
                });
            });
		</script>
		<script type="text/javascript" src="../library/js/jquery.mobile-1.3.0.min.js"></script>

		<!-- timer plugin -->
		<script type="text/javascript" src="../library/js/jquery.timer.js"></script>
		
		<!-- js-client-side-md5, so that no password gets over network unencrypted, esp not during registration -->
		<script type="text/javascript" src="../library/js/webtoolkit.md5.js"></script>
		
		<!-- nice input validation plugin -->
		<script type="text/javascript" src="../library/js/jquery.validate.js"></script>
				
		<!--  provices conversion function -->
		<script type="text/javascript" src="../library/js/convert.js"></script>
		
		<!--  provices string operation functions -->
		<script type="text/javascript" src="../library/js/strings.js"></script>
						
		<!-- client side functions to process server response -->
		<script type="text/javascript" src="../library/js/gigalaunch.js"></script>
				
		<!-- page specific js includes & custom js code -->
		<script type="text/javascript" src="js/login.js"></script>
		</head>
<body>
	<div data-role="page" id="login">
		<div data-role="header" data-position="inline">
			<img id="logo" src="images/projectlogo.png" style="width:200px;"/>		</div>
		<div data-role="content">
			<form id="loginForm" class="loginForm" action="login.php" method="post" accept-charset="UTF-8" data-ajax="false">
				<legend> LOGIN </legend>

				<!-- where errors are displayed (put it directly next to the interactive element, that can produce an error) -->
				<div id="error" data-role="collapsible">
					<h3>error/status</h3>
					<p>
					<div id="details">details</div>
					</p>
				</div>
				
				<!-- credentials -->
				<!-- username input -->
				<label for="username">UserName*:</label> <input type="text" name="username" id="username" maxlength="50" />

				<!-- password input -->
				<label for="password">Password*:</label> <input type="password" name="password" id="password" maxlength="50" />

				<!-- submit button -->
				<input type="submit" name="Submit" value="login" />
				
				<!-- this should enable submit-on-enter-key -->
				<input type="hidden" name="submitted" id="submitted" value="1" />
			</form>
		</div> 
		<div data-role="footer">
			<!-- if a user is not registered yet, they can click on this button -->
			<a href="useradd.php" rel="external">register</a>
		</div> 
	</div>
</body>
</html>

alterfalt..

Re: Login problems with redirects

9 years ago

i am using php + mysql as a backend.

the platform aims to easily exchange backend language + database. (see config.php)

my problem is i can not get a FULL PAGE LOAD, when js-programmatically changing/loading pages with jqm (because it likes to load divs into DOMs... which is cool... but not for modular big projects)

so eitehr i do:

header("Location: youareloggedinnow.php");

for redirects... which is also shiiiiit... because i want to echo an message "login successfull", before redirecting.

comprende amigos?

Top Reply

Response title

Attachments

jQuery Forum

Login problems with redirects

Replies(16)

Re: Login problems with redirects

Re: Login problems with redirects

Re: Login problems with redirects

Re: Login problems with redirects

Re: Login problems with redirects

Re: Re: Login problems with redirects

Re: Re: Login problems with redirects

Re: Login problems with redirects

Re: Login problems with redirects

Re: Login problems with redirects

Re: Re: Login problems with redirects

Re: Login problems with redirects

Re: Login problems with redirects

Re: Login problems with redirects

Re: Login problems with redirects

Re: Login problems with redirects

Statistics

Tags

Actions