从远程模式清理形式

我触发远程模式是这样的：从远程模式清理形式

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

我建立在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>

因此，在这种情况下，该错误消息继续显示。

任何想法？

编辑：所以我在想，试图调用hide事件，并试图清理从那里可能会奏效。（见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; 
    });

警报不火。

来源

2015-05-12 Dynelight

请尝试，使一个小提琴，以便其他人可以帮助你更多！ –

@AbhishekGhosh我试着添加更多细节，这有帮助吗？ – Dynelight

你可以像这样

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

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

来源

2015-06-03 06:27:25

从远程模式清理形式

回答

相关问题