0

これをビューページとして持っています

<html>
    <head>
        <script>
            function submit_form() 
            {
                    $('#my_form').submit();
            }
        </script>
    </head>
    <body>
        <div class="container">

            <%= form_tag({:action => 'submit_form'}, :remote => true,:method=>:post,:id => 'my_form',:class => 'my_form_class') do %>
                <%= select(:grade,:id,@distinct_grade_list,{},:onchange => "submit_form()")%>
                <%= select(:period,:id,@distinct_period_list)%>
            <% end %>
            <br/>
            <div id="farzi2" style="border: 3px solid blue;margin-top: 20px">
                <%= select(:student_name,:id,{},{},{ :multiple => true, :size => 4 }) %>
            </div>
    </body>
</html>

最初の選択ボックスの内容を変更すると、JavaScript関数はajax経由でフォームを送信し、フォームに記載されているようにコントローラーアクションに送り返します

私が持っているコントローラーアクションで

def submit_form
    puts "in submit_form action"
    @hussi = "submit_form"
    @student_name_list = Student.pluck(:student_name)


    respond_to do |format|
      format.html { redirect_to 'roles' }
      format.json { head :no_content }
      format.js   { render :json => @student_name_list }
    end
  end

今私の質問は、関連するjsでこれらの@hussiおよび@student_name_listデータをどのように使用できるかです。ビューページに表示する内容を設定するerbファイル

私のsubmit_form.js.erbファイルには今まで何もありません

alert("in submit_form js");
$('.my_form_class').on('ajax:success', function()
{
alert(<%=@student_name_list%>")
})

私が望むのは、アクション(submit_form)と呼ばれるajaxから渡されたこのリスト(@student_name_list)を使用して、ajaxリクエストが成功して戻ってきた後に選択オプションボックスのビューページで使用することだけです。

4

3 に答える 3

2

Abhi が少し前にこれに答えたことは知っていますが、彼らが書いた内容が有用であることがわかりました (私は「ありがとう」として賛成しました。コードにいくつかの間違いがあったので、次のバージョンで更新することにしました。うまくいけば、これは将来誰かに役立つでしょう：

$('.my_form_class').on('submit', function() {
    $.ajax({
        type: "POST",
        url: "/",
        data: "your_data",
        dataType: "html",
        success: function(data) {
            // response is like : [{text:"A",value:1},{text:"B",value:2}]
            var option="";
            $.each(data,function(index,value) {
                option += "<option value='"+index+"'>"+value+"</option>";
            });
            $("#your_html_placeholderid").html(option);
        }
   });
});
于 2013-11-08T16:09:59.810 に答える
1

json 形式でデータを取得しているとします。

$('.my_form_class').on('submit', function()
{
     $.ajax({
    type: "POST",
    url: "/",
    data: "your_data",
    dataType: "html",
       success: function(data) {
              // response is like :   [{text:"A",value:1},{text:"B",value:2}]
             var opt="";
             $.each(data,function(ind,val){
                 option+="<option value='"+val.value+"'>"+val.text+"</option>"
             });
      $("#your_html_placeholderid").html(data);
    }

});

});

成功のコールバックでデータを取得するときは、どの select/html 要素を変更する必要があるかを知る必要があります。したがって、 by $("#yourid").html("your result format") は、割り当てられたデータで要素を更新するのに役立ちます。

于 2013-06-27T07:46:29.317 に答える
0

render :json => @student_name_listformat.js から削除して、何を参照してください。

@student_name_list は、js ファイルで自動的に使用可能になります。

于 2013-06-28T15:12:26.540 に答える