2016-02-26 99 views
1

我不能讓selectize-railscocoon一起工作。 (當增加+1考勤選擇不活躍時)。我看到了this的問題,但它給我帶來了無處不在。寶石用法:蠶繭+選號軌

我有什麼:

- Attendance model 
- Event model 
- Event has_many :attendances 

我的JS:

$(document).ready(function(){ 
    if ($('.selectize')){ 
     $('.selectize').selectize({ 
      sortField: 'text' 
     }); 
    } 
}); 

活動/ _form:

= simple_form_for @event do |f| 
    = f.button :submit, class: "btn btn-success add-button" 
    = f.input :starts_at, :minute_step => 15 
    #tasks 
    = f.simple_fields_for :attendances do |attendance| 
     = render 'attendance_fields', f: attendance 
    .links 
     %p 
     = link_to_add_association 'Add attendance', f, :attendances 

_Attendance_fields:

.nested-fields 
    = f.select :guest_id, Guest.all.map{|c| [c, c.id]}, {},class: 'selectize' 
    = link_to_remove_association "Remove attendance", f 

有什麼建議嗎?請幫助

+0

您需要使用回調,如鏈接的答案中所示。你嘗試過嗎? – nathanvda

+0

我對編程真的很陌生,也不太瞭解.js,但是,請給我一個關於怎麼做/看什麼的暗示? –

回答

2

因此,您的代碼在頁面上選擇類.selectize的項目,然後調用其上的selectize函數。但是,此調用僅在頁面初始加載時運行。當新項目動態添加到頁面時,您將不得不再次執行此操作。 Cocoon引發事件,你可以聽,當它發生時,你會得到插入的HTML片段。

所以,你可以這樣做:

$('form').on('cocoon:after-insert', function(e, addedItem) { 
    $(addedItem).find('.selectize').selectize({ 
    sortField: 'text' 
    }) 
}); 

這意味着:在繭事件引發的形式每次的地方,我們將應用.selectize代碼。

更多的例子和信息可以在documentation找到。

+0

工程很棒。謝謝,Nathan! –