添加列表项客户端

时间:2010-09-26 19:52:01

标签: javascript ruby-on-rails

我会马上说,我是Rails的初学者,所以这可能是我不知道的显而易见的事情。

我有一个用于编辑无序(<ul>)问题列表的网络表单。每个问题都是列表中的一个项目。每个问题都有一个问题文本的文本字段和一个下拉列表,表明它是什么类型的问题(多项选择,真/假等)。

我还希望用户能够通过点击链接并在列表中显示新文本框和下拉列表来添加新问题。

我还没有找到一种非常干净的方法,所以我从各种教程中将它拼凑在一起。我错过了更好的方法吗?

以下是edit.html.erb的代码:

<h1>Editing Survey: <%= "#{@survey.name}" -%></h1>

<% form_for @survey, :url => {:action => 'update', :id => params[:id]} do |survey_form| %>
  <h2>Title: <%= survey_form.text_field :name %></h2>
  <ol class='question_list'>
  <% for @question in @survey.questions %>
    <% fields_for "question[]" do |f| %>
      <li>
      <%= f.text_field :q_text %><br>
      <%= select(:question, :q_type, { "True/False" => "T", "Multiple Choice" => "M"}) %><br>
      </li>
    <% end %>
  <% end %>
  </ol>
  <%=
    link_to_function "Add another question",
                     update_page {  |page|
                        page.insert_html :bottom, 
                        'blank_question', 
                        (render :partial => 'blank_question', :object => @question ) 
                     }

  %>
  <%= submit_tag "Update" %><br>
<% end %> <% "End of form_for" %>

<%= link_to "Back", {:action => 'list' } %>

我创建了另一个名为_blank_question.erb的erb文件,这是我希望在点击“添加其他问题”链接时包含的元素:

<li>
  <%= text_field :question, :id, :size => 25 %><br>
  <%= select(:question, :q_type, { "True/False" => "T", "Multiple Choice" => "M"}) %><br>
</li>

问题是当我点击“添加其他问题”链接时,我在弹出窗口中收到以下错误。

  

RJS错误:

     

TypeError:对象函数Element(){   [native code]}没有方法'insert'[native code]}没有方法'insert'

相当多的谷歌搜索没有发现任何有用的结果。知道我哪里错了吗?

3 个答案:

答案 0 :(得分:1)

如果您使用的是Rails版本&gt; 2.3(我建议,如果你不这样做),你可以观看两个截屏视频:

准确地解释你想要做什么。第二部分涉及Ajax部分,但我真的建议同时观察第一部分和第二部分,因为Ryan Bates逐渐构建它,它将真正帮助你澄清很多事情。

通常,Railscasts网站是了解大量简单或复杂Rails内容的最佳方式之一。

答案 1 :(得分:1)

一些提示:

似乎没有元素'blank_question'可以插入呈现的HTML。您可能想要插入父元素:

update_page do |page|
  page['parent'].insert_html :bottom, :partial => 'blank_question',
                                      :object => @survey.questions.build
end

甚至更简单的让Rails决定使用哪个部分:

update_page {|page| page['parent'].insert_html :bottom, @survey.questions.build }

这将尝试使用“_question.html.erb”将已经与您的调查相关联的空问题作为局部变量“问题”传递,此外,您可以共享部分内容以呈现现有问题和新问题(见下文)。

顺便说一句:看看如何直接跳过调用渲染(并让Rails为你的调查构建空白问题)。

另一个BTW:您可以像这样将集合传递给fields_for(它会自动循环遍历它,您可以跳过for循环):

survey_form.fields_for :questions do |f|
  #...
end

但是,这仅适用于class Survey; has_many :questions。但情况可能就是这样。父表单上使用的fields_for也支持数据库中尚未存在的新对象 - 这可能对您有用(又名“blank_question”)。此外,您只需使用form_for @survey do |survey_form|即可。 Rails将足够聪明,可以根据数据库中的对象使用更新或创建URL。 Rails使用new_record?方法。

上述补遗 - 分享部分然后使用:

survey_form.fields_for :questions {|f| render f.object }

这将为每个集合成员呈现“_question.html.erb”。

我通常使用帮助器来渲染这样的嵌套表单:

module SurveysHelper
  def setup_survey(s)
    # add empty question to survey if none associated
    s.questions.build unless s.questions.size > 0
    return s
  end
end

并在视图中:

form_for setup_survey(@survey) do |survey|
  survey.fields_for :questions {|f| render f.object }
end

答案 2 :(得分:-1)

确保prototype.js包含在rails的javascript目录中,并且您要将其导入标题: