Question

我正在触发这样的远程模态：

        <li><a data-toggle="modal" href="/login" data-target="#modal">Sign in</a></li>

我建立了＆＃39;路线＆＃39; Javascript上的变量，然后加载模态：

$('#modal').modal({
  show: true,
  remote: route
});

...其中route是一个变量，取决于它的值，告诉我从哪里获取数据。

我加载的这些页面大部分都包含登录，用户注册等表单......它们加载成功。

当我尝试关闭此窗口并再次打开时出现问题。表格未清除。这意味着，如果我尝试登录并且登录失败并显示错误消息，则当我再次单击登录按钮时，它们将会出现。

对于此示例，加载的登录HTML包含以下内容：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <%= csrf_meta_tags %>    
    <title>Sign in to Chocolatechix</title>  
  </head>

  <body>
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    </div> 

    <%= form_for @user_session, url: user_session_path, method: :post, html: { class: 'form-horizontal', role: 'form' } do |f| %>  

    <div class="modal-body">
        <div class="row lower-space">
          <div class="col-xs-10 col-xs-offset-1">
            <%= f.text_field :email, class: 'form-control email_field', placeholder: 'E-mail Address' %>
          </div>
        </div>

        <div class="row lower-space">
          <div class="col-xs-10 col-xs-offset-1">
            <%= f.password_field :password, class: 'form-control password_field', placeholder: 'Password' %>
          </div>
        </div>

        <div class="row">
          <div class="col-xs-10 col-xs-offset-1">
            <%= f.submit 'Sign In', class: 'btn btn-primary full-width' %>
          </div>
        </div>

        <div class="row lowest-space">
          <div class="col-xs-10 col-xs-offset-1">
            <a href="#">Forgot password?</a>
          </div>
        </div>

        <div class='row'>
          <div class="col-xs-4 col-xs-offset-1 center new-text bold">
            New user? 
          </div>

          <div class="col-xs-4 col-xs-offset-1 center">
            <a class="btn btn-success" href="/become">Create account</a> 
          </div>          
        </div>    

        <div class="row">
          <div class="col-xs-12" id="error_messages">

          </div>
        </div>            
    </div>


    <div class="modal-footer">      
    </div>      <!-- /modal-footer -->
    <% end %>

    <script type="text/javascript">
    $( document ).ready(function(){
      // process the form
    $('form').submit(function(event) {

        // get the form data
        // there are many ways to get this data using jQuery (you can use the class or id also)
        var formData = {
            'user_session[email]'      : $('.email_field').val(),
            'user_session[password]'   : $('.password_field').val(), 
            'authenticity_token': $('input[name=authenticity_token]').val(), 
            'utf8': $('input[name=utf8]').val()
        };

        // process the form
        $.ajax({
            type        : 'POST', // define the type of HTTP verb we want to use (POST for our form)
            url         : '/user_session', // the url where we want to POST
            data        : formData, // our data object
            dataType    : 'json', // what type of data do we expect back from the server
                        encode          : true
        }).done(function(data) {
                console.log(data);
                if(!data.logged_in){
                  $('#error_messages').html('<span class="label label-danger">' + data.error+ '</span>');
                }
                else {
                  window.location.replace("/");
                }
            });

        // stop the form from submitting the normal way and refreshing the page
        event.preventDefault();
      });    
    });
    </script>
  </body>
</html>

因此，在这种情况下，错误消息会一直显示。

有什么想法吗？

编辑：所以我认为尝试调用一个隐藏事件并尝试从那里清理它可能会有效。（见Bind a function to Twitter Bootstrap Modal Close）

我试图用这种方式调用此事件：

  $('#modal').modal({
    show: true
  });
  $('#modal').on('hidden.bs.modal', function () {
      alert('Foo');
  });

......但这不会被触发。

想法？

编辑2：又一次尝试：

     $(document).on('hide.bs.modal','#modal', function () {          
    alert('Foo');
  }).modal({
    show: true, 
    remote: route;
  });

警报不会触发。

Answer 1

你可以这样做

<li><a data-toggle="modal" href="/login" onclick="test()">Sign in</a></li>

function test(){
$("#formid")[0].reset();
 $('#modal').modal({
    show: true
  });
}

从远程模式

1 个答案: