Rails形式：當在另一個字段中選擇特定選項時，如何模糊一個字段

Question

這將是我第一次嘗試使用javascript。 當某人在選擇列表中選擇一個特定選項時，我希望表單中的另一個字段變暗，因為它不再適用。 我想我必須編寫一個onchange事件處理程序，並讓它執行一個JavaScript腳本，該腳本檢測選定的選項，如果選擇了該選項，則呈現帶有相關字段變暗的表單；如果選擇了另一個選項，則呈現不同的表單...任何人可以給我一個開始〜謝謝

Answer 1

您可以嘗試如下操作：

$(document).on('blur', "selector", function (e) { 
  // do what you want to do, change background, color, etc...
});

您無需更改元素的類，id或其他選擇器中的selector類型。

您可以將此代碼段添加到app/assets/javascripts/application.js包含的任何javascript文件中。 您可以創建一個新的文件，然后在現有文件不適合您的情況下添加它

如果application.js以//= require_tree .結尾//= require_tree . 這意味着它將需要該目錄中的所有文件，而您無需手動要求它們。

順便說一句，關於術語，單擊元素會使其具有焦點。 當元素失去焦點時（例如，單擊某些其他元素或按下選項卡），它會變得模糊。 那是當on（'blur'）被調用時。

這是您可以在select上寫on（'change'）的方法：

$(document).on('change', 'select', function (e) {
  // do something
});

您需要輸入正確的選擇器，而不是“選擇”，否則每次選擇更改時都會觸發該選擇器。

我僅在選擇列表中的特定值時才需要觸發操作

沒問題，試試這個：

$(document).on('change', 'select', function (e) {
  if ($(this).val() == 'specific_value'){
    // do something
  }
});

---

更新

我想從我的視圖中調用jquery，並用jquery filename.js.erb文件的輸出替換視圖中的元素

jQuery和所有其他JavaScript正在客戶端（Web瀏覽器）中執行，並且文件filename.js.erb位於服務器上，並且需要用rails處理。

這是可以做到的：

1. ajax請求發送到服務器
2. 它被導軌拾取，並被路由到控制器
3. 它由控制器動作處理
4. 呈現javascript視圖並作為響應發布

有兩種方法可以實現此目的。 首先，我將解釋兩種方法共有的步驟。

您將需要在routes.rb中添加新路由， routes.rb其用作ajax調用的端點。 在這里，您可以閱讀有關將路線添加到rails的更多信息，但是出於此答案的目的，我將使用以下簡單路線（使用愚蠢的名稱，請務必更改此名稱）：

resource :my_ajax, only: :create

這是路線的樣子：

rake routes|grep my_ajax
# my_ajax POST    /my_ajax(.:format)   my_ajaxes#create

它期望您擁有MyAjaxesController ，並在其中create動作。 您還應該通過將其添加到控制器中，使控制器能夠響應javascript請求：

class MyAjaxesController < AdminController
  # ...
  respond_to :js
  # ...

  def create
    # ...
  end
end

您還需要查看該操作的視圖： create.js.erb 。 您可以將javascript添加到該視圖，但是在這里您還可以利用rails控制器為您提供的所有功能。 因此，您可以使用任何實例變量，也可以呈現局部變量。

這是局部渲染的方式：

$('#element').html('<%= j(render partial: "_my_partial", locals: { my_var: @my_var }) %>');

當瀏覽器收到對ajax請求的響應時，它只是用該部分呈現的html替換#element的內容。

好的，現在來看方法的差異。

您可以發送ajax請求（通過jQuery），該請求針對您創建的端點（注意方法，我創建的路由需要POST）。 在這種情況下，您需要手動管理收到的任何回復。

但是，有一種方法可以做到。 您可以創建一個隱藏所有字段的表單（視圖中不需要它，只需要它作為發送請求的一種方式）。 您需要為表單，方法指定操作，還需要設置remote: true ，以確保它是異步提交的。

這是一個例子：

<%= form_tag(my_ajax_path, remote: true, method: :post) do %>
  <%= hidden_field_tag :some_field %>
<% end %>

您需要做的就是隨時隨地提交此表單（例如，通過查找ID並調用$('#my_form').submit(); ： $('#my_form').submit();剩下的事情就會完成。您還可以動態更改提交之前表單的任何隱藏輸入。

$(document).on('change', 'select', function (e) {
  if ($(this).val() == 'specific_value'){
    $('#my_form').submit();
  }
});

至於通過rspec測試控制器動作，為了使其正常工作，請不要忘記控制器期望並呈現的是javascript請求，因此您需要指定格式：

it 'my test' do
  # expectations
  response = post :my_ajax, format: :js
  # assertions
end

Answer 2

您可以通過使用jquery的change事件來執行此操作。 例如，您的選項選擇如下：

<%= f.select :state, [['NSW'], ['VIC'], ['SA'], ['WA'], ['QLD']] %>

然后，您必須創建jquery事件以執行下一步操作。 例如：

<script>
  $(document).ready(function(){ 
   // hidding form
   $("#form_1").hide();
   $("#form_2").hide();
   // showing form after user changes the select option
    $("#user_state").change(function(){
      var selected = $(this).val();
      if(selected == "VIC") {
        $("#form_1").show();
      } else {
        $("#form_2").show();
      }
    });
  });
</script>

我希望這可以幫助您嘗試嘗試jquery的初體驗。 祝好運！