4

我有以下要求。我有一个“学校”下拉菜单，作为最后一个选项，我添加了新学校，所以如果用户选择该选项，我想通过 ajax 将 new_school 表单作为部分加载。

我上线了

gem 'rails', '3.2.9'
gem 'coffee-rails', '~> 3.2.1'
Jquery via gem 'jquery-rails'

早些时候使用rails < 3和我曾经使用的原型

Ajax.Updater (aka Rails link_to_remote :update => 'some_div')

并且使用我熟悉的rails > 3 + JQuery*.js.erb，并且有类似的东西

$("#school_form").html("<%= escape_javascript(render(:partial => "form"))%>");

但我是新手coffeescript，我不知道如何做到这一点coffeescript，有人可以帮助我:)，（因为我相信你不应该为此做一个服务器请求）

到目前为止，我已经完成了以下操作以捕获select_tag更改事件

$ ->
  $('#school_name_select').change ->
    unless $(this).val()
      $('school_name').html([I want to have the _new_school_form partial here])
4

2 回答 2

4

使用隐藏的 div。

一般来说，您不想费心尝试混合 JS 和 HTML。由于跨站点脚本攻击的可能性，转义可能很复杂、容易出错并且非常危险。

只需将您的表单部分呈现在默认情况下不显示的 div 中。在 ERB 中：

<div id="school_name_form" style="display: none;">
  <%= render 'form' %>
</div>

在您的 CoffeeScript 中：

$ ->
  $('#school_name_select').change ->
    if $(this).val()
      $('#school_name_form').slideUp()
    else
      $('#school_name_form').slideDown()

我建议使用小而雅致的过渡，例如滑动或淡入淡出。它使您的应用程序更加精致。

不需要 AJAX。这种模式非常常见，以至于我定义了一个应用程序范围的样式，如下所示。

.not-displayed {
  display: none;
}

然后使用 HAML（如果你喜欢的话），HTML 模板变得很简单：

#school_name_form.not-displayed
  = render 'form'
于 2012-11-28T00:39:08.457 回答
2

您可以尝试将表单部分呈现在隐藏的 div 内（从语义的角度来看不太正确），或者将表单 html 作为data任何相关元素的属性，例如

f.select school_name, ... , data: {form: escape_javascript(render(:partial => "form"))}

和咖啡脚本

$ ->
  $('#school_name_select').change ->
    unless $(this).val()
      $('school_name').html($('#school_name_select').data('form'))
于 2012-11-27T15:54:39.353 回答