Ruby on Rails：使用Cocoon的Selectize.js

我試圖在Ruby on Rails中選擇一個表單來選擇部分構造。新的字段（部分條目 - 加入表格）由Cocoon gem添加。一切正常，但當試圖編輯已保存的結構時，Selectize無法讀取其當前零件的字段。Ruby on Rails：使用Cocoon的Selectize.js

這裏是我的_part_fields.html.erb：

<li class="control-group nested-fields"> 
    <div class="controls"> 
    <%= f.input :quantity %> 
    <%= f.select :part_id, options_from_collection_for_select(Thing.all, :id, :name), {:prompt => "Select or create a part..."}, {class => "construction_part_select"} %> 

    <%= link_to_remove_association "remove", f %> 
    </div> 
</li>

的application.js：

//= require jquery 
//= require jquery.turbolinks 
//= require jquery_ujs 
//= require selectize 
//= require bootstrap 
//= require bootstrap-sprockets 
//= require cocoon 
//= require_tree . 

jQuery(function() { 
    console.log("jQuery"); 
    $("#construction_part_select").each(function() { 
     console.log("iter1"); 
     $(this).selectize({ 
      create: true, 
      sortField: "text" 
     }); 
    }); 
}); 

var selectizeParts; 
selectizeParts = function() { 
    console.log("selectizeParts"); 
    $("#construction_part_select").each(function() { 
     console.log("iter2"); 
     $(this).selectize({ 
      create: true, 
      sortField: "text" 
     }); 
    }); 
}; 

$(document).ready(function() { 
    selectizeParts(); 

    $('#construction_parts').bind('cocoon:after-insert', 
     function (e, inserted_item) { 
      item = inserted_item.find('.construction_part_id'); 
      item.selectize({ 
       create: true, 
       sortField: "text" 
      }); 
     }) 
}); 
$(document).on("page:load", selectizeParts);

我怎樣才能得到這個工作？

在此先感謝。

來源

2015-10-11 Kaktusiarz

我通過給我的選擇標籤（'to_select'）添加特殊參數來解決這個問題，因爲推薦的'data-data'（https://github.com/brianreavis/selectize.js/issues/231）應該能自動選擇當前值，但對我來說似乎不起作用。

_part_fields.html.erb：

<li class="control-group nested-fields"> 
    <div class="controls"> 
    <%= f.input :quantity %> 
    <%= f.select :part_id, options_from_collection_for_select(Thing.all, :id, :name), {:prompt => "Select or create a part..."}, {:class => "construction_part_select", :to_select => f.object.part.id} %> 

    <%= link_to_remove_association "remove", f %> 
    </div> 
</li>

的application.js：

//= require jquery 
//= require jquery.turbolinks 
//= require jquery_ujs 
//= require selectize 
//= require bootstrap 
//= require bootstrap-sprockets 
//= require cocoon 
//= require_tree . 

jQuery(function() { 
    console.log("jQuery"); 
    $("#construction_part_select").each(function() { 
     console.log("iter1"); 
     var $selectized; 
     $selectized = $(this).selectize({ 
      create: true, 
      sortField: "text" 
     }); 
     // Set currently selected value after page (re)load because 'data-data' param is not working (https://github.com/brianreavis/selectize.js/issues/231) 
     // get(0) returns DOM object on which we can invoke getAttribute() 
     $selectized[0].selectize.setValue($(this).get(0).getAttribute("to_select")); 
    }); 
}); 

var selectizeParts; 
selectizeParts = function() { 
    console.log("selectizeParts"); 
    $("#construction_part_select").each(function() { 
     console.log("iter2"); 
     var $selectized; 
     $selectized = $(this).selectize({ 
      create: true, 
      sortField: "text" 
     }); 
     // Set currently selected value after page (re)load because 'data-data' param is not working (https://github.com/brianreavis/selectize.js/issues/231) 
     // get(0) returns DOM object on which we can invoke getAttribute() 
     $selectized[0].selectize.setValue($(this).get(0).getAttribute("to_select")); 
    }); 
}; 

$(document).ready(function() { 
    selectizeParts(); 

    $('#construction_parts').bind('cocoon:after-insert', 
     function (e, inserted_item) { 
      item = inserted_item.find('.construction_part_id'); 
      item.selectize({ 
       create: true, 
       sortField: "text" 
      }); 
     }) 
}); 
$(document).on("page:load", selectizeParts);

來源

2015-10-22 10:57:40 Kaktusiarz

Ruby on Rails：使用Cocoon的Selectize.js

回答

相關問題