Question

我正在使用modalbox作为模态窗口来提交我从这个Nettuts tutorial中学到的表单。现在它在我的模型中创建一个新客户端时很有效，即使表单中有错误 - 它允许我留在模态框中，直到错误得到纠正。我也想用它来编辑一个客户端。除非编辑客户端表单引发错误，否则几乎所有操作都可以。而不是像添加新客户端一样留在模态框窗口内，它会刷新到另一个页面以完成表单。以下是我正在使用的新客户端功能：

在我看来：

<%= link_to 'New Client', new_client_path, :id => 'newclient-link' %>

在我的ClientsController中：

def create
@client = Client.new(params[:client])

respond_to do |format|
if @client.save
    format.js { render :redirect} #modal form redirection (redirect.js.erb)
    format.html { redirect_to(@clients, :notice => 'Client was successfully created.') }
    format.xml  { render :xml => @client, :status => :created, :location => @client }
  else
    format.html { render :new }
    format.js
    format.xml  { render :xml => @client.errors, :status => :unprocessable_entity }
  end
end
end

这是在application.js文件中：

document.observe('dom:loaded', function() {
$('newclient-link').observe('click', function(event) {
    event.stop();
    Modalbox.show(this.href,
        {title: 'Add New Client',
        width: 500,
        afterLoad: function() {
            $('new_client').observe('submit', function(event) {
                event.stop();
                this.request();
            })
        }}
    );
});

}）

最后，这是在create.js.erb中，它应该将表单保留在modalbox中：

$('MB_content').update("<%= escape_javascript(render :partial => 'form') %>");
Modalbox.resizeToContent();
$('new_clients').observe('submit', function(event) {
event.stop();
this.request();
});

现在，粘贴所有这些，为了复制编辑方法，我复制了application.js文件中的jquery，并将“newclient-link”替换为“editclient-link”以匹配编辑链接中的link_to id，并且几乎在控制器中复制了create方法的代码并将其放在update方法中......但是，我认为这就是问题所在。似乎解决方案应该是简单的，并且在控制器中应该调用ajax以允许我更新模态框中的表单，即使在抛出错误时也像新客户端链接一样。

有什么想法吗？

Answer 1

我通过使用fancybox来解决我的问题：

http://fancybox.net/howto

在我看来，新用户链接和编辑用户链接在fancybox iframe中打开。完成iframe内部的表单后，即使抛出并纠正错误，iframe也会显示指定的成功消息，当关闭或点击iframe外部时，父（主）页面会像我想要的那样刷新。在完成快速设置之后，这里是修改后的脚本，用于关闭窗口并在提交表单时刷新：

 $(document).ready(function() {
$("a.myfancy").fancybox({
    'transitionIn'  :   'fade',
    'transitionOut' :   'fade',
    'speedIn'       :   200, 
    'speedOut'      :   200, 
    'overlayShow'   :   true,
    'type'          :   'iframe',
    'onClosed'      :   function () {
        parent.location.reload(true);
        ;} 
   });

 }); /* Close main fancybox script */

：class“.myfancy”是打开iframe的链接类。我想知道怎么做的一件事是在窗口关闭和页面刷新之后，我想突出显示添加到表中几秒钟的新行，然后逐渐淡出。有谁知道怎么做？

Answer 2

您还可以查看空投：https://github.com/xirukitepe/airdrop

这个是使用bootstrap模式。

Rails 3 - 在modalbox中显示有错误的表单

2 个答案: