jQuery Mobile: введенный контент появляется, а затем сразу исчезает - PullRequest
Новая
       6

jQuery Mobile: введенный контент появляется, а затем сразу исчезает

2 голосов
/ 12 марта 2012

У меня есть страница входа в систему с использованием jQuery Mobile, которая содержит следующий код: 

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

Вот часть моего JavaScript, которая вызывается, когда пользователь нажимает кнопку «Вход».Если одно из полей оставить пустым, я вижу следующий текст, вставленный в #alerts div, но затем в доли секунды содержимое снова исчезает. 

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');
}

Я также попробовал это, используя.append() вместо .html().Тот же результат с обоими.Я прокомментировал мой тест alert(), который работает, когда одно из полей оставлено пустым.

Что я могу сделать, чтобы контент оставался на странице после его внедрения?

Спасибо за любую помощь или понимание, которое вы можете предложить!-Mark

В соответствии с запросом Джаспера, здесь находится весь javascript, который выполняется при нажатии кнопки «Войти»: 

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');
  }
}

1 Ответ

2 голосов
/ 12 марта 2012

Похоже, вам нужно остановить распространение события click для вашей кнопки.Вы можете сделать это, вернув false в обработчике событий click:

HTML - 

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

JS - 

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

Вотdemo: http://jsfiddle.net/BkMEB/3/

Кроме того, поскольку вы используете jQuery, вы можете привязать элемент <button> следующим образом: 

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

Это то же самое, что поставить onClick="return userLogin()" какатрибут кнопки, но позволяет удалить встроенный JS.

Вот демонстрационная версия: http://jsfiddle.net/BkMEB/4/

...