如何在 Rails 3.2.6 中获取弹出窗口？答案

【问题标题】：How to get popups forms in rails 3.2.6?如何在 Rails 3.2.6 中获取弹出窗口？
【发布时间】：2013-02-05 19:57:21
【问题描述】：

我正在尝试在 Rails 应用程序中获取表单对话框弹出窗口。在应用程序中，有一个表单来创建一个名为 Movement 的资源，此资源必须关联另一个名为 Concept 的资源，因为存在一个列表框来选择一个，但我希望在单击时有一个按钮打开一个对话框表单以创建一个新概念.该应用程序使用 rails 3.2.6 运行，并安装了 jquery-rails、jquery-ui、jquery-ujs gems。在https://github.com/ramblex/modal-form 站点中，我找到了一个示例，但我无法使用此示例。有 3 个主要代码，它们是：create.js.erb(view)、modalform.js、_form.html.erb 由于 rake 的版本，我无法运行此示例，但我采用了示例并尝试在我的应用程序中实现.

create.js.erb

    <%-if @article.errors.any? %>
         console.log('Error');
         $('#dialog-form').html('<%= escape_javascript(render('form')) %>');
        <%- else %>
         console.log('Created');
         $('#dialog-form').dialog('close');
        $('#dialog-form').remove();
       $('table').append('<%= escape_javascript(render(@article)) %>');
    <%- end %>

modalform.js

$(document).ready(function() {
    $('#create_article').click(function(e) {
    var url = $(this).attr('href');
    var dialog_form = $('<div id="dialog-form">Loading form...</div>').dialog({
    autoOpen: false,
        width: 520,
        modal: true,
        open: function() {
            return $(this).load(url + ' #content');
        },
        close: function() {
            $('#dialog-form').remove();
        }
    });
    dialog_form.dialog('open');
    e.preventDefault();
   });
});

我没有资源文章，然后我为此创建了一个脚手架，仅查看示例是否有效，但事实并非如此。脚手架是文章标题：字符串之后我在文章视图中更改了文件 new.html.erb 并替换了代码

new.js.erb

<%-if @article.errors.any? %>
    console.log('Error');
    $('#dialog-form').html('<%= escape_javascript render 'form'%>');
<%-else %>
    console.log('Created');
    $('#dialog-form').dialog('close');
    $('#dialog-form').remove();
    $('table').append('<%= escape_javascript(render(@article)) %>');
<%-end %>

然后在文章视图的视图 index.html.erb 中将链接更改为新文章的行

<%= link_to 'New Article', new_article_path, :id => "create_article"%>

我将 Javascript 代码放入 vendor/assets/javascripts 并添加行

//=require modalform

在 app/assets/javascripts 中的 application.js 中。

完成所有这些后，我运行应用程序转到新文章链接上的文章 clic，唯一出现的是 elment 对话框 - 没有表单元素，因为表单是带有 :remote => true 的 form_for我换了 form_tag 还是不行

http://i46.tinypic.com/11sp4j5.png

为了尝试发现我正在使用代码的应用程序中发生的事情并获得帮助，我使用了 firefox 的 firebug，首先在控制台中显示错误：模板丢失，然后我将 new.js.erb 更改为只下线

$('#dialog-form').html('<%= escape_javascript(render('form')) %>');

再次检查，在控制台的响应中这是输出

    $('#dialog-form').html('<form accept-charset=\"UTF-8\" action=\"/articles\"    class=\"new_article\" id=\"new_article\" method=\"post\">
<div style=\"margin:0;padding:0;  display:inline\"><input name=\"utf8\" type=\"hidden\" value=\"&#x2713;\" />
<input name=\"authenticity_token\" type=\"hidden\" value=\"Vw6+xyfR/hnJutu/8Q2yLIqkau/s2xebEygKGZF07O8=\" />
<\/div>\n\n  <div class=\"field\">\n    <label for=\"article_title\">Title<\/label><br />\n    
<input id=\"article_title\" name=\"article[title]\" size=\"30\" type=\"text\" />\n  <\/div>\n  <div class=\"actions\">\n   
<input    name=\"commit\" type=\"submit\" value=\"Create Article\" />\n  <\/div>\n<\/form>');

我剪切代码并编辑 html 代码并将其放在表单对话框 div 之间，结果是一个包含大量字符 / \n 等的表单。

然后我感谢这是问题所在，我一直在使用代码，直到我发现在 new.js.erb 中删除 scape_javascript 解决了多余的字符，但仍然没有将表单加载到表单对话框 div 中

$('#dialog-form').html('<%= render 'form'%>');

再次检查响应，这是响应

$('#dialog-form').html('<form accept-charset="UTF-8" action="/articles" class="new_article" id="new_article" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="Vw8+xyfR/hnJutu/8Q2yNIqvau/x2xebPqgKGZF0728=" /></div>

 <div class="field">
   <label for="article_title">Title</label><br />
   <input id="article_title" name="article[title]" size="30" type="text" />
   </div>
  <div class="actions">
   <input name="commit" type="submit" value="Create Article" />
 </div>
</form>');

我再次将此输出剪切到 html 代码输出中的 form-dialog div 并获得正确的表单。好吧，我尝试保存一篇文章，它可以工作，但请记住，我以手动方式手动放置了 html 代码 de response。

但问题仍然存在（表单未加载到表单对话框 div 中）

文章视图中部分_form的代码是

<%= form_for(@article)  do |f|  %>
    <% if @article.errors.any? %>
        <div id="error_explanation">
          <h2><%= pluralize(@article.errors.count, "error") %> prohibited this article     from being saved:</h2>

         <ul>
           <% @article.errors.full_messages.each do |msg| %>
             <li><%= msg %></li>
           <% end %>
          </ul>
      </div>
<% end %>

<div class="field">
  <%= f.label :title %><br />
  <%= f.text_field :title %>
</div>
<div class="actions">
  <%= f.submit %>
</div>

我认为向您展示 ArticlesController 中的代码很重要，尤其是在操作 new 中。

# GET /articles/new
# GET /articles/new.json
def new
    @article = Article.new

    respond_to do |format|
    format.js
    #format.html # new.js.erb
    #format.json { render json: @article }
end
end

有什么想法吗？

【问题讨论】：

标签： ruby-on-rails

【解决方案1】：

什么，你认为是什么？一个简单的空间

 $(document).ready(function() {
  $('#create_article').click(function(e) {
    var url = $(this).attr('href');
    var dialog_form = $('<div id="dialog-form">Loading form...</div>').dialog({
    autoOpen: false,
    width: 520,
    modal: true,
    open: function() {
    return $(this).load(url + ' #content');
   },
   close: function() {
    $('#dialog-form').remove();
   }
 });
 dialog_form.dialog('open');
 e.preventDefault();
 });
 });

正好在一行

return $(this).load(url + ' #content');

应该是

return $(this).load(url + '#content');

使用 Alex Duller 的代码并重申我的应用程序在 3.2.8 版本上运行

这些是最终代码

new.html.erb (myaplication/app/views/articles)

 <%= render 'form' %>

请注意，删除了几行，它只减少了一行。

articles_controller.erb (myaplication/app/controllers)

def new
  @article = Article.new

  respond_to do |format|   
   format.js
  end
end

最后这个问题的标题最初是如何达到将 new.js.erb 加载到弹出窗口中的？但它更改为 How to get popups forms in rails 3.2.6

【讨论】：