Question

我有一个表单，我通过ajax提交，而表单正在提交，我需要显示一个加载动画gif。当我做下面的事情时，一切正常。

我的表格

  <% form_tag url_for(:action=>'create'),:remote=>true, :id=>"registration_form" do %>
   ...some form fields...
   <% submit_tag 'Create my account' %>
 <% end %>

我有一个动画gif，它位于一个隐藏的div中：

<div id="loading_registration" style="display:none" >loading...</div>

在我的脚本部分我有

  var toggleLoading = function() { $("#loading_registration").toggle() };
  $("#registration_form")
  .bind("ajax:loading",  toggleLoading)
  .bind("ajax:complete", toggleLoading)
  .bind('ajax:success', function(evt, data, status, xhr) {
                   });

现在我需要更改这个以便执行客户端javascript验证功能，因为表单是通过ajax提交给服务器的。

所以我做了以下几点：
在我的脚本部分，我添加了以下功能：

$('#registration_form').submit(function() {

if ($("#first_name").val()!=''){
    $(this).ajaxSubmit(options); //submit the form 
}
else{
    ..display some client side message to the user
}
    // !!! Important !!!
    // always return false to prevent standard browser submit and page navigation
    return false;
});

它可以正常运行并在打开ajax调用之前执行javascript验证 但问题是现在它没有显示我的加载gif动画
我尝试以下面的方式将它添加到ajaxSubmit的选项部分：

var toggleLoading = function() { $("#loading_registration").toggle() };                   
 var options = { loading: toggleLoading,
                 complete: toggleLoading}                    


$('#registration_form').ajaxSubmit(options);

但它没有奏效。它只有在我从内部调用警报功能时才有效

var options = { loading: alert('loading'),
        complete: alert('complete')}                     
 $('#registration_form').ajaxSubmit(options);

但如果我调用一个函数而不是警告它就会停止工作

如果有人能解决这个问题，我将很高兴

由于

Answer 1

您是否尝试使用jquery validator plugin？

rails 3使用javascript验证在表单提交上显示加载动画

1 个答案: