jQuery MObile Login, on iPad, won't work in app mode, but will in Safari

jQuery MObile Login, on iPad, won't work in app mode, but will in Safari

HI,

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. The user will only be using an iPad. 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 in Safari,  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/jquery.mobile-1.3.2.min.js"></script>

<script type="text/javascript">

 $(document).ready(function() {

            $("input[name='login']").click(function() {

                var s = $("input[name='password']").val();

if(s=="123")

{window.location.href = "index.html#home";}

else

{window.location.href = "index.html#index_password";}

   });

 });

</script> 


<body>


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

     

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

          </form>  

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

        </header> 

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

</body>


Thanks so much for your help on this! 

Cheers,

Janell