在编辑表单中填充Select2字段

时间:2017-04-21 00:56:24

标签: ruby-on-rails

我是一个业余爱好者。我在新的/编辑Rails表单中使用基本的Select2 ajax,我无法弄清楚如何在编辑表单中重新填充它。 song_creditor_1是一个字符串,但它是作为Fan模型的id输入的。

形式:

<%= f.input :song_creditor_1, label: 'Song Creditor 1', as: :select, input_html:  { id: "song_creditor_1", include_hidden: false } %>

脚本

function templateDropDownFormat (item) {
    return item.text;
  }

  function templateSelectionFormat (item) {
    return item.text;
  }

  $("#song_creditor_1").select2({ 
    placeholder: "Search",
    ajax: {
      url: "/songs",
      dataType: 'json',
      delay: 250,
      data: function (params) {
        return {
          q: params.term, // search term
          page: params.page
        };
      },

      processResults: function (data, params) { 
        // parse the results into the format expected by Select2
        // since we are using custom formatting functions we do not need to
        // alter the remote JSON data, except to indicate that infinite
        // scrolling can be used
        params.page = params.page || 1;
        return {
          results: $.map(data, function(cnut) { 
              return { 
                text: cnut.name + ", " + cnut.city + ", " + cnut.country + " (" + cnut.account_type + ")",
                id: cnut.id, 
              }; 
          }),
          pagination: {
            more: (params.page * 30) < data.total_count
          }
        }; 
      }, 
      cache: true
    }, 
    escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
    minimumInputLength: 1,
    templateResult: templateDropDownFormat, // omitted for brevity, see the source of this page
    templateSelection: templateSelectionFormat// omitted for brevity, see the source of this page
  });

1 个答案:

答案 0 :(得分:0)

嗯,我只是一个业余爱好者,这是我的第一个网站,所以这个答案并不漂亮,但这就是我解决它的方式。如果表单上有错误,则问题是必须重新填充字段中的数据,因此我只是在'create'期间将该特定属性拉出来并将其称为@ creditor1。

var $select1 = $('#song_creditor_1');

  function templateDropDownFormat (item) {
    return item.text;
  }

  function templateSelectionFormat (item) {
    return item.text;
  }

  $select1.select2({ 
    ajax: {
      url: "/songs",
      dataType: 'json',
      delay: 250,
      data: function (params) {
        return {
          q: params.term, // search term
          page: params.page
        };
      },

      processResults: function (data, params) { 
        // parse the results into the format expected by Select2
        // since we are using custom formatting functions we do not need to
        // alter the remote JSON data, except to indicate that infinite
        // scrolling can be used
        params.page = params.page || 1;
        return {
          results: $.map(data, function(cnut) { 
              return { 
                text: cnut.name + ", " + cnut.city + ", " + cnut.country + " (" + cnut.account_type + ")",
                id: cnut.id, 
              }; 
          }),
          pagination: {
            more: (params.page * 30) < data.total_count
          }
        }; 
      }, 
      cache: true
    }, 
    escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
    minimumInputLength: 1,
    templateResult: templateDropDownFormat, // omitted for brevity, see the source of this page
    templateSelection: templateSelectionFormat// omitted for brevity, see the source of this page
  });


<% if params[:action] === "edit" && @creditor1_real || params[:action] === "update" && @creditor1_real %>
  var $option1 = $('<option selected><%= @creditor1_real.name %>, <%= @creditor1_real.city %>, <%= @creditor1_real.country %></option>').val("<%= @creditor1_real.id %>");

  $select1.append($option1).trigger('change'); 

<% elsif params[:action] === "create" && @creditor1 || params[:action] === "new" && @creditor1 %>
  var $option1 = $('<option selected><%= @creditor1.name %>, <%= @creditor1.city %>, <%= @creditor1.country %></option>').val("<%= @creditor1.id %>");

  $select1.append($option1).trigger('change'); 

<% else %>
  var $option1 = $('<option selected>Search</option>');

  $select1.append($option1).trigger('change'); 
<% end %>