Rails - 仅在视觉效果完成后调用Ajax

时间:2011-07-18 16:09:54

标签: jquery ruby-on-rails ruby ajax

我想在我的FadeOut效果完成后才进行ajax调用。 这是我的简单代码:

<script type="text/javascript">
function closeIt(id) {
    $(id).slideUp();        
}
</script>

<%= link_to_remote('Delete', :url => {:action => "ajaxdestroy", :controller => "blog_comments", :blog_post_id => @blog_post.id, :id => comment.id}, :before => "closeIt('comment#{comment.id}')", :update => "blogPostComments", :confirm => 'Are you sure?') %></p>

现在生成的html看起来像这样:

<a onclick="if (confirm('Are you sure?')) { closeIt('comment39'); new Ajax.Updater('blogPostComments', '/blog_comments/ajaxdestroy/39?blog_post_id=6', {asynchronous:true, evalScripts:true, parameters:'authenticity_token=' + encodeURIComponent('Xzvq2/0BlbVi3eVCxW5TGcKmap3nrVC1SiG76W+bVGc=')}); }; return false;" href="#">Delete</a>

因此调用了closeIt函数的效果,但是ajax调用在slideUp效果之前完成。如何在前一个closeIt函数的回调中调用Ajax函数?

谢谢

2 个答案:

答案 0 :(得分:2)

使用

<a onclick="return closeThat(39);" href="#">Delete</a>



function closeThat(id) {
    if (confirm('Are you sure?')) {
        closeIt('comment'+id, function() {
            new Ajax.Updater('blogPostComments', '/blog_comments/ajaxdestroy/'+id+'?blog_post_id=6', {
                asynchronous: true,
                evalScripts: true,
                parameters: 'authenticity_token=' + encodeURIComponent('Xzvq2/0BlbVi3eVCxW5TGcKmap3nrVC1SiG76W+bVGc=')
            });
        });
    }
    return false;
}


function closeIt(id, callback) {
    $(id).slideUp(400, callback);        
}

答案 1 :(得分:1)

好的,我在创建完成后使用了javascript解决了。我删除了:before和:确认link_to_remote中的符号,并在生成的元素中添加了“id”字段

 <%= link_to_remote 'Cancella', {:url => {:action => "ajaxdestroy", 
                                          :controller => "blog_comments", 
                                          :blog_post_id => @blog_post.id, 
                                          :id => comment.id},
                                 :update => "blogPostComments"},
                                 {:id => "delete#{comment.id}"} %></p>

     <script>   
         var onClick<%=comment.id%> = new Function($('#delete<%= comment.id%>').attr('onClick'));  //get the ajax call autogenerated        
         function nuova() {   //define a new function to wrap it
              if (confirm('Are you sure?')) { //move here the confirm message
                  $('#comment<%= comment.id%>').hide(600,onClick<%=comment.id%>);
              }
              return false;     
    }                                   
         $('#delete<%= comment.id%>').removeAttr('onclick').click(nuova);
    </script>

不是最干净的,但这是一个解决方案。现在,只有在效果终止后才会提交删除ajax调用