SitePoint Sponsor

User Tag List

Results 1 to 1 of 1
  1. #1
    SitePoint Member
    Join Date
    Oct 2007
    Los Angeles, CA, USA
    0 Post(s)
    0 Thread(s)

    JQuery Mobile login, won't work in app mode, but does in Safari on iPad

    I have an app that will be on a private server not open to the internet nor will there be a way to "see" passwords. We need to have the user login. On my index.html page I have the following code (see below).

    It all works on my computer, if I don't enter the password and click OK, I do get the popup saying "Password Incorrect, Try Again." It also works fine on my iPad but it will not work at all once put in app mode. (i.e., putting the icon on the home screen and opening the website from there.)

    It doesn't seem to help if I change paths to index.html#home or index.html#index_password :

    In the head tag:

    <script src="jquery-mobile/jquery-1.8.2.min.js"></script>
    	<script src="jquery-mobile/"></script>
    <script type="text/javascript">
     $(document).ready(function() {
                $("input[name='login']").click(function() {
                    var s = $("input[name='password']").val();
    {window.location.href = "index.html#home";}
    {window.location.href = "index.html#index_password";}
    <div data-role="dialog" id="index" data-close-btn="none">
    	<div data-role="header" class="ui-body-a" data-position="inline" data-close-text="none">
    	<h1>Please Sign-In</h1>
           <div data-role="content">
            <h1 class="welcome text_center">Welcome!</h1>
            <p class="text_center">Enter 123</p><!--this is for testing only-->
            <form name="PasswordField" data-ajax="false">
            <input type="password" name="password" pattern="[0-9]*" id="password" value=""  autocomplete="off">
                <input type="button" value="Log in" name="login" id="login">
            </div><!--end Content-->
           </div><!--end dialog--> 
            <div data-role="dialog" id="index_password" data-close-btn="none">
    	<div data-role="header" class="ui-body-a" data-position="inline" data-close-text="none">
    	<h1>Please Sign-In</h1>
            </div><!--end dialog for header-->
            <div data-role="content" class="ui-body-b">
            <h3 class="welcome text_center">Your Password was incorrect.<br />Please try again.</h3>
                <a data-role="button" id="some-button" data-rel="back">OK</a>
            </div><!--end Content-->
     </div> <!--end dialog-->       
     <div data-role="page" id="home"   class="ui-mobile-viewport">
    	<header data-role="header"   class="ui-body-a"  data-position="inline">
    		<h1>Home Page</h1>
                   <div data-role="content">
            <h1 class="welcome text_center">Welcome</h1>      
               <p> Then there is some stuff on this page</p>
            <!--end data role content--></div>
            <!--end home page--></div>
    Thanks so much for your help on this!
    Last edited by Pullo; Jul 3, 2014 at 00:59. Reason: Code tags

Tags for this Thread


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts