如何使用平變化觸發選擇用不顯眼的jQuery

Question

假設我有一個包含選擇列表中的香草形式和一個提交按鈕：

<%= form_for(@report :url => report_path) do |f| %> 
    <%= f.select(:sort_by, options_for_select(Report.SORT_OPTIONS, @report.sort_by)) %> 
    <%= f.submit 'sort' %> 
<% end %> 

工作正常，但用戶必須首先做一個選擇，然後點擊'排序'。我真正喜歡的是在用戶進行選擇並將「排序」按鈕完全丟棄時觸發該動作。這對於不引人注意的jQuery來說就像是一個完美的用例。所以[基於從@Dennis反應和下面@ethan]

，在此之前我form_for說：

<%= javascript_include_tag(:defaults) %> 

<script type="text/javascript"> 
$(document).ready(function() { 
    var $select = $('#report_sort_by'), 
     $form = $select.closest('form'); 
    // $('[type="submit"]', $form).attr('type', 'hidden'); // gives error 
    $('[type="submit"]', $form).hide();     // works 
    $select.change(function() { $form.submit(); }); 
}); 
</script> 

因此，它是正確的考慮一擲的JavaScript右轉入.html.erb文件？還是把它放在一個單獨的.js文件中更好？如果是這樣，那麼用於參數化和命名.js文件的約定是什麼？

對於一些聲望點，有人可以告訴我和所有其他tyros如何做到這一點？

Answer 1

Rails會字符串化您使用的對象&屬性，所以在選擇菜單會有id="report_sort_by"。這意味着你可以使用：

var $select = $('#report_sort_by'), 
    $form = $select.closest('form'); 

// preserve the button's name/value attributes, if Rails has assigned them 
$('[type="submit"]', $form).hide(); 

$select.change(function() { 
    $form.submit(); 
}); 

如果你想在一個健壯的，不顯眼的方式這個代碼，你可以做一個叫做也許MyProject.Report.js文件，並把這個代碼在它：

if (!MyProject) var MyProject = {}; 

MyProject.Report = { 
    init: function() { 
    var $select = $('#report_sort_by'), 
     $form = $select.closest('form'); 

    // preserve the button's name/value attributes, if Rails has assigned them 
    $('[type="submit"]', $form).hide(); 

    $select.change(function() { 
     $form.submit(); 
    }); 
    } 
} 

然後在您的.erb文件中（在底部，表格後），您可以添加<script type="text/javascript">MyProject.Report.init();</script>，然後添加javascript_include_tag以包含JS文件本身。

有很多不同的方法可以做你的命名空間&封裝。我上面描述的這個對象具有令人難以置信的直接的主要優勢。當你的代碼的增長，你只是MyProject.Report的物體，像裏面添加新的功能：

MyProject.Report = { 
    init: function(options) { 
    // some event handlers, maybe 
    this.complication(null, null, options.data); 
    this.reusable(options.bgcolor); 
    }, 

    complication: function(a, b, c) { 
    // stuff that's tough to look at 
    this.reusable(b); 
    }, 

    reusable: function(q) { 
    // code that's used multiple places 
    } 
} 

然後你基本上在那個謬以千里，直到你足夠的知識來決定是否需要像Backbone.js的一個框架給定的項目:)

Answer 2

我不熟悉的Ruby-on-Rails的，所以你可能不得不改變選擇，但總體思路是：

$("#formId input[type='submit']").hide(); //Make the submit button invisible 

$("#formId select.selectClass").change(function() { 
    $(this).closest("form").submit(); //Trigger the submit event on the parent form. 
}); 

---

看起來你可以這樣設置ID：

:html => {:id => 'formId', :method => :put }