function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
chrissansone@hotmail.comchrissansone@hotmail.com 

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?

 

 

Matt D.ax1353Matt D.ax1353

Did you include the jQuery noConflict() function (http://api.jquery.com/jQuery.noConflict/)?  That often resolves conflicts with any other code using the '$' identifier.
chrissansone@hotmail.comchrissansone@hotmail.com

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:

 

<script type="text/javascript">
   $.noConflict();
</script>

 

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

I think Matt meant using jQuery.noConflict(), which causes jQuery to release the $ variable. VF may also use $ and it's caused conflicts before.
chrissansonechrissansone

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.

 

<script type="text/javascript">
    $.mobile.ajaxEnabled = false;
</script>