通过从 javascript 文件调用部分更新 html 元素

Question

我有一个容器 td 元素，我使用 HTML 部分成功地使用其他元素填充该元素，它在页面加载时完成。

部分运行在一个 task 对象上，该对象作为参数获取，并决定要添加哪些元素。

完成特定操作后，任务对象将被更新，我想通过再次运行部分来更新容器。

我使用更新的 task 从我的 create.js.haml 调用这个部分，该部分运行并构建正确的更新的 HTML（我可以在 Firebug 响应中看到它） ）。

但实际页面不会更新。我在这里缺少什么？

这是我的文件：

html.haml 包含容器 td：

%td#task-categories{ :class => "#{dom_id(task)}_categories"}
  = render 'task_categories_mini_bar', :task => task

部分 html.haml：

- _MAX_DISPLAYED_CAT = 3
- cat_index = 0
- task.categories.each do |category|
  - if (cat_index == _MAX_DISPLAYED_CAT)
    %td{:style => "padding-left:1px; padding-right:5px"} ...
    - break
  - cat_index += 1
  %td{ :class => "task-category-color_#{dom_id(category)}",
  :style => "width:60px; background:#{category.color}; border:solid 1pt lightblue; border-radius:3pt; text-align:center; "}
    = truncate(category.name, :length => 10)

将它们组合在一起构建此 HTML：

<td id="task-categories" class="task_3_categories"> </td>
<td class="task-category-color_category_1" style="width:60px; background:#b8d7ff; border:solid 1pt lightblue; border-radius:3pt; text-align:center; "> cat1 </td>
<td class="task-category-color_category_2" style="width:60px; background:#ff8fcb; border:solid 1pt lightblue; border-radius:3pt; text-align:center; "> cat2 </td>

还有另一个这里的问题 - 两个添加的类别 td 添加到第一个容器 td 下方。我怎样才能将它们添加到其中而不是之后？

现在，create.js.haml 再次调用该部分：

$('td.#{dom_id(@task)}_categories').html(#{escape_javascript(render(:partial => 'tasks/task_categories_mini_bar', :locals => {:task => @task}))})

响应 HTML 再次显示新的 HTML，但页面不会更新。

我正在使用 Rails 3.0.10 谢谢分配，Eyal。

Answer 1

好吧，我缺少的是在我的 ajax create.js.haml 中对部分的调用周围的“”，

$('td.#{dom_id(@task)}_categories').html("#{escape_javascript(render(:partial => 'tasks/task_categories_mini_bar', :locals => {:task => @task}))}")

就是这样。