Question

我正在尝试在rails应用程序中获取表单对话框弹出窗口。在应用程序中有一个表单来创建一个名为Movement的资源，这个resorce必须关联另一个名为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();
   });
});

我没有resorce文章然后我为此创建了一个脚手架，只是看看这个例子是否有效，但事实并非如此。 Te scaffold是文章标题：字符串之后，我在文章视图中更改了文件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对话框 - 没有表单的元素，表单是form_for的方式：remote =＆gt;如果我更改了form_tag并仍然无法正常工作

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

要尝试找到应用程序中正在发生的事情我正在使用代码并获取帮助我使用firefox的firefox，首先在控制台中显示错误：模板丢失，然后我更改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响应。

但问题仍然存在（表单没有加载到表单对话框div中）本身

文章wiew中部分_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中的代码，特别是在新的动作中。

# 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

有什么想法吗？

Answer 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加载到弹出窗口？但它改为如何在rails 3.2.6中获取弹出窗体

如何在rails 3.2.6中获取弹出窗体？

1 个答案: