Rails-從表單選擇下拉列表中向控制器傳遞參數

Question

我有2個模型： Team和Quest 。 創建新團隊時，我會下拉所有任務。 選擇任務后，我要顯示有關任務的信息。

我的理解是，表單中的所有內容都在客戶端，並且需要AJAX才能將選定的任務傳遞到服務器端。 我的代碼基於此 Stack Overflow答案。

這是我構造表單的方式：

app / views / teams_form.html.erb

<%= form_for(@team) do |f| %>
  <fieldset>
    <ol>
      <li>
        <%= f.label :name %>
        <%= f.text_field :name %>
      </li>
      <li>
        <%= f.label :quest_id %>
        <%= f.select :quest_id, 
                     options_from_collection_for_select(@quests, :id, :name), 
                     {}, {remote: true, url: '/teams/new', method: 'get'} %>
      </li>
      <% if @x != nil && @x.id != nil %>
        <li><%= @x.id %></li>
      <% end %>
    </ol>
    <p>
      <%= f.submit %>
    </p>
  </fieldset>
<% end %>

app / controllers / team_controller.rb

def new
  @team = Team.new
  @quests = Quest.all
  respond_to do |format|
    if params[:quest_id] != nil
      @x = Quest.find(params[:quest_id])
    end
    format.html #new.html.erb
    format.json
    format.js
  end
end

我的目標是通過:quest_id從表單參數的@x變量和使用形式。

這什么也沒產生。 我沒有在控制器中獲取參數，也不確定要丟失什么。

Answer 1

按照共享的描述，您似乎無法從下拉列表中獲取所選項目的值。

下面提到的代碼用於從下拉列表中選擇值，您也可以使用瀏覽器的開發人員工具進行檢查。

quest = $("#quest_id").val();

注意：假設選擇器ID為quest_id，請根據您的表單進行更改。

現在，您可以使用下面提到的代碼來調用ajax。

$.ajax({
  type: "GET",
  url: "/teams/new",
  data:{ quest_id: quest },
  dataType: "json",
  success:function(data){
    # logic for using ajax result
  }

希望能幫助到你！！

Answer 2

終於解決了這個問題，如果有人看到並遇到相同的問題，我想發表一下：

我提出了一個單獨的AJAX請求，因為有人建議

app / views / teams_form.html.erb

<script>
   $(document).ready(function() {
    $('#team_quest_id').change(function() {
       $.ajax({
         url: "/teams/new",
         data: {quest_id: $("#team_quest_id option:selected").val()},
         dataType: "script",
         method: "get",
         success: function(r){}
       });
     });
   });
</script>

我移動了參數分配的位置

app / controllers / team_controller.rb

def new
  @team = Team.new
  @quests = Quest.all
  if params[:quest_id] != nil
    @x = Quest.find(params[:quest_id])
  end
  respond_to do |format|
    format.html #new.html.erb
    format.json
    format.js
  end
end

最重要的是-我創建了一個js文件來呈現表單

app / views / new.js.erb

$('#new_team').html("<%= j (render 'form') %>");

這部影片非常有幫助

Answer 3

您問題中的代碼幾乎是正確的，您忘記了將屬性嵌套在data中 。

<% # app/views/teams_form.html.erb %>

<%= f.select :quest_id, 
                     options_from_collection_for_select(@quests, :id, :name), 
                     {}, {remote: true, url: '/teams/new', method: 'get'} %>
<% # should be: %>
<%= f.select :quest_id, 
                     options_from_collection_for_select(@quests, :id, :name), 
                     {}, {data: {remote: true, url: '/teams/new', method: 'get'}} %>
<% # or even better, use the path helper instead of the hard coded path %>
<%= f.select :quest_id, 
                     options_from_collection_for_select(@quests, :id, :name), 
                     {}, {data: {remote: true, url: new_team_path, method: :get}} %>

正確設置屬性后，我們仍然需要進一步修復表單。 在頁面請求中，瀏覽器將請求該表單，但是將永遠不會設置@x 。 由於不會將ERB發送給客戶端，因此我們需要添加一個句柄以找到我們的任務容器元素。

<% # app/views/teams_form.html.erb %>

<% if @x != nil && @x.id != nil %>
  <li><%= @x.id %></li>
<% end %>
<% # should be something like %>
<li id="quest-info-container"></li>

現在，在控制器中，將HTML請求與JS請求分開。

# app/controllers/teams_controller.rb

def new
  respond_to do |format|
    format.html do
      @team = Team.new
      @quests = Quest.all
    end
    format.js do
      @quest = Quest.find(params.dig(:team, :quest_id))
    end
  end
end

通過將選擇數據路徑發送到另一個用於處理任務預覽的URL，可以簡化上述操作。

現在我們需要在容器中渲染預覽，為此我們需要2個文件，首先是結果結構的外觀。 請記住，這將在容器內部呈現。

<% # app/views/teams/_quest_preview.html.erb %>

<% # Here comes what you want to display about the quest. You can give this %>
<% # file another name if you like. You have @quest to your disposal here. %>
<%= @quest.id %> <strong><%= @quest.name %></strong>

現在，我們只需要一個JavaScript文件即可將上述結構加載到我們創建的句柄中。

<% # app/views/teams/new.js.erb %>

handle = document.getElementById('quest-info-container');
handle.innerHTML = '<%= j render('quest_preview') %>';

j是escape_javascript的別名。 如果局部文件不在同一目錄中，請使用<%= j render('other_dir/some_partial') %> 。