4

selectを使用したドロップダウンがあります

<%= select("array", "folder", @rows.keys, {}, :onchange =>"?" )%>

「フォーム」という部分があります

<%= render "form"%>

選択範囲が変更されるたびに、パーシャルをレンダリングする必要があります。お手数ですが、方法があれば教えてください。remote_functionRails 3.0 から非推奨になっていることがわかりました。ここで onchange および select タグを使用したすべての可能なリンクを見てきましたが、適切な答えが見つかりませんでした。Rails、jQuery、Ajax は初めてです。助けてください

ありがとう

4

2 に答える 2

12

これを行う方法は確かにあり、少し手間がかかりますが、コツをつかめば非常に簡単です。

changeまず、選択ボックスのイベントにjQuery 関数を追加します。これは、ファイルに JavaScript を追加することで実行できapplication.jsます。ここでこれを行いたいので、javscript は目立たないようにします。application.jsファイルで次のようなことを試すことができます。

$(document).ready(function(){
  $("#select_field_id").change(function(){
    var id = $(this).children(":selected").val();
    var params = 'some_id=' + id;
    $.ajax({
      url: "/some_controller/change_folder",
      data: params
    })
});

これが行うことは、匿名関数をchangeid の select フィールドのイベントにアタッチすることselect_field_idです。そのフィールドが変更されるidと、選択されたオプションの が varidに格納され、次に を実行して送信するリクエストのパラメーターを作成しますvar params = 'some_id=' + id;。some_idあなたが変更しているもののIDになります（それfolder_idがあなたの例で使用している場合）。

次に、コントローラーでこのリクエストを処理するメソッドを作成する必要があります。フォルダーの例では、これをフォルダー コントローラーに追加します。

def change_folder
  @folder = Folder.find(params[:some_id])
  respond_to do |format|
    format.js
  end
end

これは、 ajax リクエストによって に送信された ID に基づいてフォルダーを見つけるだけchange_folderです。また、レンダリングする対応するファイルchange_folder.js.erbまたはファイルも探します。change_folder.js

ここで、change_folder.js.erbファイルを作成する必要があります。divページの一部の HTML を取得した新しいフォルダーに置き換える必要があるため、一意の ID を持つ何らかのセクションが必要です。

内部change_folder.js.erbでは、次のように記述できます。

$('#your_div').html("<%= escape_javascript(render(partial: "folder", 
locals: { :folder => @folder })).html_safe %>")

_folder.html.erbこれにより、ファイルと同じディレクトリにある部分呼び出しがレンダリングされchange_folder.js.erbます。パーシャルでは、フィールドを表示するために @folder 変数を使用する必要があるため、次のようなものが必要になります。

<%= @folder.name %>
<%= @folder.last_updated %>

あなたの_folder.html.erbパーシャルの中に。.nameもちろん、.last_updatedFolder モデルのプロパティで構成されています。代わりに、Folder モデルに指定したプロパティを使用する必要があります。

これにより、必要な場所に移動できるはずです。何か明確にする必要がある場合はお知らせください。

于 2012-06-21T16:16:17.897 に答える
2

同じページでフォームをレンダリングし、選択タグの変更時に非表示にして表示してみませんか

<html> 
  <body>

  <!-- Your Select tag -->
  <select id="select_id"> 
    <option value="one" selected> One </option>
    <option value="two"> Two </option>
  </select>

  <!-- Here your a div inside with your form is placed -->
  <div id="myform" style="display:none">
    <form action="/someurl">
      .. ..
    </form> 

   <!-- JQuery code to  show the form -->
  <script type="text/javascript">
    $(document).ready(function() {
       $("select#select_id").bind("change",function() {
         if ($(this).val() == "one") 
          $("div#myform").show(); 
         else
          $("div#myform").hide(); 
       })
   })

  </script>

</html>

私はまだajaxリクエストをしたいです私もかなり簡単です

$(document).ready(function() {
  $("select#select_id").bind("change",function() {
    if ($(this).val() == "one") {
     $.ajax({
        url : "/form_url",
        data : "html", 
        type: "GET",
        success : function(data) {
          $("div#myform").html(data)
        }
     }) 

  })
})

format.jsサーバー側では、レンダリングコマンドを使用して指示されたテンプレートを使用してajaxリクエストに応答してレンダリングするか、.js.erbファイル を定義する必要があります

于 2012-06-21T16:06:57.617 に答える