Rails模式表单 - 在不成功的表单提交后用html.erb文件中的内容更新弹出窗口

时间:2012-02-28 22:16:23

标签: javascript jquery ruby-on-rails ajax

我有一个Rails视图(食谱/新),允许用户输入新的食谱。在该视图中,用户可以从另一个模型,成分中选择项目。我希望用户能够在不离开食谱表的情况下添加新成分。

我为新成分创建了一个链接,用于加载JQuery模式框。以下是我的recipes.js文件中驱动模式的代码:

资产/ Javascript角/ recipes.js

来自@ coreyward的答案的代码 - 请参阅Jquery modal windows and edit object了解详情 - 谢谢,核心!

$(function(){
    var $modal = $('#modal'),
        $modal_close = $modal.find('.close'),
        $modal_container = $('#modal-container');

    $('a[data-remote]').live('ajax:beforeSend', function(e, xhr, settings){
        xhr.setRequestHeader('accept', '*/*;q=0.5, text/html, ' + settings.accepts.html);       
    });

    $('a[data-remote]').live('ajax:success', function(xhr, data, status){
        $modal
            .html(data)
            .prepend($modal_close)
            .css('top', $(window).scrollTop() + 40)
            .show();
        $modal_container.show();
    });

    $('.close', '#modal').live('click', function(){
        $modal_container.hide();
        $modal.hide();
        return false;
    });
});

我在recipes / new.html.erb中的链接:

<%= link_to 'New ingredient', new_ingredient_path, :remote => true %>

这很有效,因为它在那里加载了具有新成分形式的模态形式。我可以填写表格,如果保存了该成分,我会从我的控制器调用另一个函数来关闭模态:

ingredients_controller.rb

def create
  if @ingredient.save
    respond_to do |format|
      format.js { render :js => "close_modal();" }
    end
  end
end

我的问题是表单没有正确填写。用户点击并得不到任何错误/遗漏字段等的反馈...我想在弹出框中重新加载成分表单,这将导致共享错误部分:

成分/ new.html.erb

<%= form_for @ingredient, :remote => true do |i| %>
    <%= render 'shared/ingredient_error_messages' %>

    <div class="field">
        <%= i.label :name %>
        <%= i.text_field :name %>
    </div>
    <div class="field">
        <%= i.label :srm %>
        <%= i.text_field :srm %>
    </div>
    <div class="field">
        <%= i.label :price %>
        <%= i.text_field :price %>
    </div>
    <div class="actions">
        <%= i.submit "Save ingredient" %>
    </div>
<% end %>

共享/ _ingredient_error_messages.html.erb

<% if @ingredient.errors.any? %>
    <div id="error_explanation">
        <h2><%= pluralize(@ingredient.errors.count, "error") %>
            prohibited this recipe from being saved:</h2>
        <p>There were problems with the following fields:</p>
        <ul>
            <% @ingredient.errors.full_messages.each do |msg| %>

                <li><%= msg %></li>
            <% end %>
        </ul>
    </div>
<% end %>

让这个工作的最佳方法是什么?如果保存不成功,我可以轻松地创建另一个JS函数并从控制器调用它,但我找不到传递除了直接文本/ html之外的任何方法。有没有办法,在控制器中,我可以解析并输出一个函数我的“新”视图的内容?是否有更好/更清洁的方法来做到这一点?

1 个答案:

答案 0 :(得分:3)

这是一个链接到github Rails JQuery-Modal表单,由Ramblex设计来完成这件事:

https://github.com/ramblex/modal-form

以下是它解决的各个问题(所以你可以回答他的答案):Rails and modal jquery dialog form