0

我正在尝试在 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 的版本，我无法运行此示例，但我采用了示例并尝试在我的应用程序中实现.

创建.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 并替换了代码

新的.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 中。

完成所有这些后，我运行应用程序转到 New Article 链接上的文章 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 解决了多余的字符，但仍然没有将表单加载到 form-dialog 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 代码输出中的表单对话框 div 并获得正确的表单。好吧，我尝试保存一篇文章并且它有效，但请记住，我以手动方式手动放置了 html 代码响应。

但问题仍然存在（表单未加载到表单对话框 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

有任何想法吗？

4

1 回答 1

0

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

 $(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

于 2013-02-18T03:44:25.507 回答