title: jQuery mobile getting wrong authentication
body: <p>I have the following situation:</p>
  
  <p>index.html (which is my login page)</p>
  
  <pre><code>&lt;div data-role="page" id="page_login"&gt;
  &lt;div id="wrapper_top_image"&gt;
     &lt;div id="top_image"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div data-role="content" data-theme="b"&gt;    
      &lt;div id="landmark-1" data-landmark-id="1"&gt;
      &lt;form id="loginForm" onsubmit="return submitLogin();"&gt;
      &lt;div data-role="fieldcontain" class="ui-hide-label"&gt;
          &lt;label for="username"&gt;Username:&lt;/label&gt;
          &lt;input type="text" name="username" id="username" value="" placeholder="Username" /&gt;
      &lt;/div&gt;
  
      &lt;div data-role="fieldcontain" class="ui-hide-label"&gt;
          &lt;label for="password"&gt;Password:&lt;/label&gt;
          &lt;input type="password" name="password" id="password" value="" placeholder="Password" /&gt;
      &lt;/div&gt;
  
      &lt;input type="submit" value="Login" id="submitButton"&gt;
      &lt;/form&gt;
  &lt;/div&gt;      
  &lt;/div&gt;
  &lt;div data-role="footer"&gt;
      &lt;h4&gt;&amp;copy; 2013 Company&lt;/h4&gt;
      &lt;h6&gt;Developed by Alex&lt;/h6&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>and then my PHP Script that is going to check everything -> ps.. I fixed to avoid injection already! :</p>
  
  <p>auth.php</p>
  
  <pre><code>$mysqli = new mysqli($mysql_hostname,$mysql_user, $mysql_password, $mysql_database);
  
  // Parse the log in form if the user has filled it out and pressed "Log In"
  if (isset($_POST["username"]) &amp;&amp; isset($_POST["password"])) {
  
      $username =$_POST['username'];
      $password =$_POST['password'];
  
      $sql = "SELECT id, password, username FROM users WHERE username='$username' AND password='$password' LIMIT 1";
      $result = $mysqli-&gt;query($sql) or die( $mysqli-&gt;error() );
      $rowN= mysqli_num_rows($result);
      if($rowN==1){
         $response_array['status'] = 'success'; 
      } else {
         $response_array['status'] = 'error'; 
      }
      echo json_encode($response_array);
  
  }
  $mysqli-&gt;close();
  </code></pre>
  
  <p>Finally my JQuery Script:</p>
  
  <pre><code>function submitLogin(){ 
   jQuery.support.cors = true; 
   $.ajax({ 
       url: 'http://www.xxxx.com/mobile/auth.php',
       crossDomain: true,
       type: "post",
       data: $("#loginForm").serialize(), 
       success: function(data){
           if(data.status == 'success'){
               //alert("Granted Access!");
               $.mobile.changePage("main.html");  
           }else if(data.status == 'error'){
               alert("Authentication Invalid. Please try again!");
               navigator.app.exitApp();
               $.mobile.changePage("index.html");       
          }
  
       }
   }); 
  };
  </code></pre>
  
  <p>Everything is working ok! Data is checked and if it is okay, is redirected to main.html (main page) otherwise the app pops up a window saying that the authentication is wrong, keeping the user in the same page.</p>
  
  <p>Here is the dilemma: If users type the wrong credential trying to login again, any credential that he/she enter will be considerate invalid even if he/she entered the right one and the app will keep going back to the login page until I refresh the browser or end the app in case of running in the device.</p>
  
  <p>Does anyone knows what may be happening?</p>