You need to sign in to do that
Don't have an account?
Issue with jQuery on Mobile Login page?
Hi All,
I am having an issue with a login page for a mobile customer portal. It doesnt seem to like jQuery.
Here is what the markup for my page looks like:
<apex:page showHeader="false" docType="html-5.0" standardStylesheets="false" cache="true" controller="LoginController"> <html> <head> <title>Login Mobile</title> <apex:includeScript value="{!URLFOR($Resource.mobile, 'mobile/jquery-1.7.2.min.js')}" /> <apex:stylesheet value="{!URLFOR($Resource.mobile, 'mobile/themes/mytheme.min.css')}" /> <apex:stylesheet value="{!URLFOR($Resource.mobile, 'mobile/jquery.mobile.structure-1.1.1.min.css')}" /> <apex:includeScript value="{!URLFOR($Resource.mobile, 'mobile/jquery.mobile-1.1.1.min.js')}" /> </head> <body> <div data-role="page" id="login"> <div data-role="header"> <h1>Login</h1> </div><!-- /header --> <div data-role="content" style="text-align:center;"> <center> <apex:form id="frmLogin" forceSSL="true" > <apex:inputText id="username" value="{!username}" style="width:250px;"/> <apex:inputSecret id="password" value="{!password}" style="width:250px;"/> <apex:commandButton id="login" value="Login" action="{!login}" /> </apex:form> </center> </div><!-- /content --> <div data-role="footer"> <h1>Footer</h1> </div><!-- /footer --> </div><!-- /page --> </body> </html> </apex:page>
And here is the controller code behind the markup:
public class LoginController { public String username {get; set;} public String password {get; set;} public PageReference login() { PageReference pageReference = null; String startURL = Site.getPrefix() + '/MobileLanding'; pageReference = Site.login(username,password,startUrl); return pageReference; } }
Now when I use the code above my page looks like this when it loads:
However when I put in a username and password and click 'login' I am redirected to a page that just says 'undefined':
If I remove jQuery from the page then everything works and i get redirected to the landing page as expected.
<!--<apex:includeScript value="{!URLFOR($Resource.mobile, 'mobile/jquery-1.7.2.min.js')}" />-->
but.....all my theming is gone and my page looks bad....
Does anyone have any ideas? It seems to be a problem with jQuery?
Did you include the jQuery noConflict() function (http://api.jquery.com/jQuery.noConflict/)? That often resolves conflicts with any other code using the '$' identifier.
The page I posted above is what we have. There are no functions on the login page that use the '$' identifier.
I tried adding the following to my page:
but the result was the same.
Whats weird is if I close my browser and go to hxxp://mydomain.com/mobile
and then login I am redirected to hxxp://mydomain.com/mobile/MobileLanding
just fine.
But if I baskspace the URL in the address bar back to hxxp://mydomain.com/mobile
then try to login again I cannot....and it gives me the undefined page....
I think Matt meant using jQuery.noConflict(), which causes jQuery to release the $ variable. VF may also use $ and it's caused conflicts before.
I found a solution to the login issue. JQuery mobile expects a "propery formatted" JQuery Mobile page to be returned on all requests.
When you call the login function as I have shown above the PageRerence object that is returned is a full instantiation of a new HTML page. If you look at this page returned in Firebug you will see that the page is blank and just contains some JavaScript to redirect you to the appropriate page with a session ID.
To get around this I just disable thed jQuery Mobile ajax on this page because I didnt need it anyway.