Javascript-форум - Показать сообщение отдельно

Faab · #5 (**permalink**) 14.03.2014, 01:47

неа, чудо не произошло. У меня такое впечатления что до выполнении ajax вообще не успевает дойти дело. Но я не могу это протестировать, так как все записи в консоле обновляются/стираются.

Вот весь конечный исходный код (с поправкой submit на text - c.70 и c.77):

<!DOCTYPE html>
<html>
<head>
  <title>Регистрация и вход</title>

  <link rel="stylesheet" href="/vendor/bower_components/bootstrap/dist/css/bootstrap.css"/>
  <link rel="stylesheet" href="/css/app.css"/>

  <script src="/vendor/bower_components/jquery/jquery.js"></script>
  <script src="/vendor/bower_components/bootstrap/dist/js/bootstrap.js"></script>
  
</head>
<body>
<header>
  
</header>
<section class="container">

  <nav class="navbar navbar-default" role="navigation">
  <ul class="nav navbar-nav">
    <li><a href="/">Главная</a></li>
    
    <li><a href="/chat">Чат</a></li>
    
  </ul>
  <ul class="nav navbar-nav navbar-right">
    
    <li><a href="" onclick="$('<form method=POST action=/logout>').submit();return false">Выйти</a></form></li>
    
  </ul>
</nav>

  <h1>Регистрация и вход</h1>

  
<p>Введите имя пользователя и пароль. Если такого пользователя нет - он будет создан.</p>

<form class="form-horizontal login-form" name="login-form">
  <div class="form-group">
    <label for="input-username" class="col-lg-2 control-label">Имя</label>

    <div class="col-lg-10">
      <input name="username" value="name" type="text" class="form-control" id="input-username" placeholder="Имя">
    </div>
  </div>
  <div class="form-group">
    <label for="input-password" class="col-lg-2 control-label">Пароль</label>

    <div class="col-lg-10">
      <input name="password" value="pass" type="password" class="form-control" id="input-password" placeholder="Пароль">
    </div>
  </div>
  <div class="form-group">
    <div class="col-lg-offset-2 col-lg-10">
      <button type="submit"  class="btn btn-primary" data-loading-text="Отправляю..." > Войти</button> 
      <span class="help-block error"></span>
    </div>
  </div>
</form>


</form>
-

<script>
  $(document.forms['login-form']).on('submit', function() {
    var form = $(this);

    $('.error', form).html('');
    $(":text", form).button("loading");

    $.ajax({
      url: "/login",
      method: "POST",
      data: form.serialize(),
      complete: function() {
        $(":text", form).button("reset");
      },
      statusCode: {
        200: function() {
          form.html("Вы вошли в сайт").addClass('alert-success');
          window.location.href = "/chat";
        },
        403: function(jqXHR) {
          var error = JSON.parse(jqXHR.responseText);
          $('.error', form).html(error.message);
        }
      }
    });
    return false;
  });
</script></section>
<footer>
  
</footer>
</body>
</html>