选择选项提交更改 Rails4

Question

我正在制作一个在选择选项后自动提交表单的代码。提交按钮隐藏在表单上。我在表单中使用 ajax，因此更新将在同一页面中重新出现。任何帮助将不胜感激。

view.html.erb

<tbody>
    <% @complaints.each do |complaint| %>
       <tr>
        <td id="priority">
          <%= bootstrap_form_for complaint do |p| %>
            <%= p.select(:priority,[['Selecione Nivel'],['Nivel Alto', {:class=>'btn-danger'}],['Nivel Mediano', {:class=>'btn-warning'}],['Nivel Bajo', {:class=>'btn-primary'}]])%>
            <%= p.submit 'Update', :class => "btn" %>
           <% end %>
        </td>
        <td><%= complaint.id %>

    </tr>
    <% end %>
  </tbody>

HTML 输出

<form accept-charset="UTF-8" action="/complaints/4" class="edit_complaint" id="edit_complaint_4" method="post"><div style="display:none"><input name="utf8" type="hidden" value="✓" class="form-control input-sm" placeholder="Buscar"><input name="_method" type="hidden" value="patch" class="form-control input-sm" placeholder="Buscar"><input name="authenticity_token" type="hidden" value="E8gNdFLaMhswXNo3rUk/j875u5rk8j2Gx+NM9zGWrTA=" class="form-control input-sm" placeholder="Buscar"></div>
            <div class="form-group"><label class="control-label" for="complaint_priority">Priority</label><div class="select2-container form-control" id="s2id_complaint_priority"><a href="javascript:void(0)" class="select2-choice" tabindex="-1">   <span class="select2-chosen" id="select2-chosen-3">Selecione Nivel</span><abbr class="select2-search-choice-close"></abbr>   <span class="select2-arrow" role="presentation"><b role="presentation"></b></span></a><label for="s2id_autogen3" class="select2-offscreen">PriorityPriorityPriority</label><input class="select2-focusser select2-offscreen" type="text" aria-haspopup="true" role="button" aria-labelledby="select2-chosen-3" id="s2id_autogen3"><div class="select2-drop select2-display-none">   <div class="select2-search select2-search-hidden select2-offscreen">       <label for="s2id_autogen3_search" class="select2-offscreen">PriorityPriorityPriority</label>       <input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="select2-input" role="combobox" aria-expanded="true" aria-autocomplete="list" aria-owns="select2-results-3" id="s2id_autogen3_search" placeholder="">   </div>   <ul class="select2-results" role="listbox" id="select2-results-3">   </ul></div></div><select class="form-control select2-offscreen" id="complaint_priority" name="complaint[priority]" tabindex="-1" title="PriorityPriorityPriority"><option value="Selecione Nivel">Selecione Nivel</option>
<option class="btn-danger" value="Nivel Alto">Nivel Alto</option>
<option class="btn-warning" value="Nivel Mediano">Nivel Mediano</option>
<option class="btn-primary" value="Nivel Bajo">Nivel Bajo</option></select></div>
            <input class="btn form-control input-sm" name="commit" type="submit" value="Update" placeholder="Buscar">
</form>

我的 jquery 代码

$(document).ready(function($) {
jQuery.fn.submitOnChange = function() {
  this.find('input[type=submit]').remove();
  this.find('input[type=select]').change(function() {
  $(this).parents('form').submit();
  });
  return this;
}

$(function() {
  $('.edit_complaint').submitOnChange();
    });
});

This code hide the but dont submit.

Answer 1

以下代码应在select 更改时提交表单。由于我不知道您关于更新投诉优先级状态的逻​​辑，因此您必须调整成功处理程序中的语句 $('.status-selector').html( data ); 以满足您的需求：

$(function() {
    $('form.edit_complaint').on('submit',function() {
        var url = this.action,
            data = $(this).serialize(),
            method = this.method.toUpperCase();
        $.ajax({
            url: url,
            type: method,
            data: data,
            success: function( data ) {
                $('.status-selector').html( data );
            }
        });
    });
    $('form.edit_complaint').find('select').on('change',function() {
        $('form.edit_complaint').triggerHandler( 'submit' );
    });
});