Sign Up ›
  • chrissansone@hotmail.com
  • NEWBIE
  • 0 Points
  • Member since 2012
  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 1
    Questions
  • 1
    Replies
4 replies

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:

 

Login Page

 

 

However when I put in a username and password and click 'login' I am redirected to a page that just says 'undefined':

 

Undefined page

 

 

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....

 

Page looks bad

 

 

Does anyone have any ideas? It seems to be a problem with jQuery?

 

 

4 replies

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:

 

Login Page

 

 

However when I put in a username and password and click 'login' I am redirected to a page that just says 'undefined':

 

Undefined page

 

 

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....

 

Page looks bad

 

 

Does anyone have any ideas? It seems to be a problem with jQuery?