4

次の要件があります。「学校」ドロップダウンがあり、最後のオプションとして新しい学校を追加したので、ユーザーがそのオプションを選択した場合、ajaxを介してnew_schoolフォームを部分的にロードします。

私は〜に乗っています

gem 'rails', '3.2.9'
gem 'coffee-rails', '~> 3.2.1'
Jquery via gem 'jquery-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"))}

そしてCoffeescript

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