Rails自定义Twitter Bootstrap模态为删除方法,回调问题 [英] Rails custom Twitter Bootstrap modal for delete method, Problem with callback

查看:184
本文介绍了Rails自定义Twitter Bootstrap模态为删除方法,回调问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

以下代码会按预期销毁记录,但回调从一个模态继承到下一个模态。因此,当一个记录被正确删除,Rails不断寻找删除以前删除的,以及。
我使用的是一个Twitter Bootstrap模式窗口,它位于Rails视图模板中,当一个标准的Rails删除方法被触发时,显示它,取代了常规的javascript对话框。

Following code does destroy records as intended, but the callback is inherited from one modal to the next one. So while a record is properly deleted, Rails keeps looking to delete the formerly deleted ones as well. I'm using a Twitter Bootstrap modal window, that sits in a Rails view template and is shown when a standard Rails delete method is fired, replacing the regular javascript dialog.

如何在被触发后清除回调?

How to clear the callback after it has been fired?

$.rails.allowAction = function(element) {

  var message = element.data('confirm'),
  answer = false, callback;
  if (!message) { return true; }

  if ($.rails.fire(element, 'confirm')) {
    myCustomConfirmBox(message, function() {
     callback = $.rails.fire(element,
       'confirm:complete', [answer]);
     if(callback) {
       var oldAllowAction = $.rails.allowAction;
       $.rails.allowAction = function() { return true; };
       element.trigger('click');
       $.rails.allowAction = oldAllowAction;
     }
    });
  }
  return false;
}

function myCustomConfirmBox(message, callback) {
    $('#dialog-confirm').modal('show');
    $('#dialog-confirm button.primary').click(function(){
        callback();
        $('#dialog-confirm').modal('hide');
    });
}

编辑:
由于我使用相同的基本模态并重复任何删除操作,回调队列。因此,当删除操作之前已被取消时,仍然会在另一个对象的另一个删除实例上触发,因为回调仍然有效。底线:如何清除回调队列?

edit: Since I'm using the same base modal over and over again for any delete action, the callbacks queue up. So when a delete action has been cancelled before, it will still be triggered on another delete instance of a different object, since the callback is still valid. Bottom line: How to clear the callback queue?

推荐答案

结果是,出于各种原因,解决本机delete方法/回调是一个坏主意。我的解决方案解决方案如下。

Turns out it is a bad idea to fiddle with the native delete method/callback for various reasons. My workaround solution is as follows.

在视图中有一个删除按钮,其中包含一些JS数据值:

Have a "delete" button in your view, with some JS data values:

#delete button in view template
link_to "delete", "#", 
   :class => "delete_post", 
   "data-id" => YOUR_POST_ID, 
   "data-controls-modal" => "YOUR_MODAL_LAYER",
       #more bootstrap options here…

Bootstrap打开模态窗口。在里面,有另一个删除按钮与远程设置,所以动作将使用JS。

Bootstrap opens the modal window. Inside that, have another "delete" button with "remote" set, so the action will use JS.

#delete button in modal window
link_to "delete", post_path(0), 
   :method => :delete, 
   :class => "btn primary closeModal", 
   :remote => true  

CloseModal 是另一个:class,让我知道何时关闭引导模态窗口。我在我的 application.js 中添加了一个额外的函数。
注意,默认的路径有一个nil值,我们将在下一步通过data-id参数附加通过JS删除的真正的职位ID:

CloseModal is another :class for me to know when to close the bootstrap modal window. I've put an additional function for that in my application.js. Note, the default path has a nil value, we'll attach the real post ID to be deleted via JS in the next step via the "data-id" param:

#application.js 
$('a.delete_post').live('click', function(){
    _target = $(this).data('id');
    $('#YOUR_MODAL_LAYER .primary').attr('href', '/posts/' + _target);
});

我们的Posts控制器中的destroy操作将使用JS为已删除的帖子渲染动画: p>

The destroy action in our Posts controller will use JS to render an animation for the deleted post:

#posts_controller.rb
def destroy
    @post = Post.find(params[:id])
    @post.destroy
    respond_to do |format|
       # format.html { redirect_to(posts_url) }
       format.js { render :content_type => 'text/javascript' }
    end
end

请。在此示例中,我们只是淡出已删除的帖子:

Insert here effects as you please. In this example we are simply fading out the deleted post:

#views/posts/destroy.js    
$("div#post-<%= params[:id] %>").fadeOut();

总而言之,这项工作非常顺利!

Altogether this works really smoothly!

这篇关于Rails自定义Twitter Bootstrap模态为删除方法,回调问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆