Question

I have a login page using jQuery Mobile which contains the following code:

  <div id="loginPage" data-role="page" data-theme="a">

    <div data-role="content">

      <div id="alerts"></div>

      <form id="login-form">

        <input type="text" id="username" name="username" value="" placeholder="username or email" />
        <input type="password" id="password" name="password" value="" placeholder="password" />

        <button id="login-button" onClick="userLogin()">Login</button>

      </form>

    </div><!-- /content -->

  </div><!-- /page -->

Here is a part of my javascript that is called when the user clicks the ‘Login’ button. If one of the fields is left blank, I see the following text injected into the #alerts div, but then within a fraction of a second the content has disappeared again.

if (username.length == 0 || password.length == 0) {
  //alert('Please enter your username or email and your password');
  $('#alerts').html('Please enter your username or email and your password.').trigger('create');
}

I also tried this using .append() instead of .html(). Same result with both. I’ve commented out my test alert(), which works when one of the fields is left blank.

What can I do to make sure the content remains on the page once it is injected?

Thank you for any help or insight you can offer! -Mark

Per Jasper’s request, here is all of the javascript that is executed when the ‘Login’ button is clicked:

function userLogin() {
  var username = $("#username").val();
  var password = $("#password").val();

  if (username.length == 0 || password.length == 0) {
    $('#alerts').append('Please enter your username or email and your password.').trigger('create');
  }

  else {
    $.post("services/user-status.php", { type: 'login', username: username, password: password },
      function(data) {
        var response = data.item;
        console.log(response);
        if (response.loggedIn == false) {
          $('#alerts').html('The username/email and password you used did not work. Please try again.').trigger('create');
        }
        else {
          localStorage.userID = response.userID;
          localStorage.username = response.username;
          localStorage.userStatus = 'loggedIn';
          $.mobile.changePage('profile.html');
        }
      },'json');
  }
}

Answer 1

It looks like you need to stop the propagation of the click event from firing for your button. You can do that by returning false in the click event handler:

HTML —

<button id="login-button" onClick="return userLogin()">Login</button>

JS —

function userLogin() {
    ...
    return false;
}​

Here is a demo: http://jsfiddle.net/BkMEB/3/

Also, since you are using jQuery, you can bind to the <button> element like this:

$('#login-button').bind('click', userLogin);

This is the same as putting onClick="return userLogin()" as an attribute of the button but allows you to remove your inline JS.

Here is a demo: http://jsfiddle.net/BkMEB/4/