[英]Datepicker issue when using cocoon Gem with Materialise Css and simple form in ruby on rails 5 app
I am using Cocoon gem for nested forms in my Rails app. 我在我的Rails应用程序中将Cocoon gem用于嵌套表单。 I'm using it alongside materialize-form gem which allows me to use materialize css alongside simple form.
我将其与物化形式的gem一起使用,这使我可以将物化css与简单形式一起使用。
In the materialize-form gem notes it gives a solution to using nested form using the nested forms gem (Which only work in Rails 3). 在物化形式的gem注释中,它提供了使用嵌套形式的gem使用嵌套形式的解决方案(仅在Rails 3中有效)。 I am using cocooon gem instead.
我改用cocooon gem。 I am having this problem where "you have a date input in a nested field and you want to use jQuery datepicker for it. This is a bit tricky, because you have to activate datepicker after field was inserted."
我遇到的问题是“您在嵌套字段中输入了日期,并且您想为其使用jQuery datepicker。这有点棘手,因为插入字段后必须激活datepicker。”
The full description is under the Javascript events section here. 完整描述在此处的Javascript事件部分下。 https://github.com/ryanb/nested_form
https://github.com/ryanb/nested_form
I believe the solution is to use this code. 我相信解决方案是使用此代码。
$(document).on('nested:fieldAdded', function(event){
window.materializeForm.init()
})
It listens for the nested:fieldAdded event from the nested_form gem code. 它侦听nested_form gem代码中的nested:fieldAdded事件。 Does anyone know how I can find the event I need to listen for when using the cocoon gem?
有谁知道我如何找到使用茧形宝石时需要听的事件? In order to reload the materializeForm when I created a new nested field so it picks up the date picker.
为了在我创建一个新的嵌套字段时重新加载materializeForm,以便它选择日期选择器。
I can set up an example app in heroku if need be and the example is not clear but it's basically not rerunning materialise form when a new nested field is added by cocoon gem. 如果需要,我可以在heroku中设置一个示例应用程序,并且该示例尚不清楚,但是当茧形宝石添加新的嵌套字段时,它基本上不会重新运行物化形式。
Any help will be much appreciated. 任何帮助都感激不尽。 Thanks.
谢谢。
Adding in my Html code >>> 添加我的HTML代码>>>
// _form.html.erb file // _form.html.erb文件
<h3>Dates</h3>
<div id="schedules">
<%= f.simple_fields_for :schedules do |schedule| %>
<%= render 'schedule_fields', f: schedule %>
<% end %>
<div class="links">
<%= link_to_add_association 'Add Schedule', f, :schedules %>
</div>
</div>
// _schedule_fields.html.erb file // _schedule_fields.html.erb文件
<div class="nested-fields">
<%= f.input :event_schedule, label_html: { class: "active"}, wrapper_html: { class: 'col m12 s12 ' }, class: "datepicker" %>
<%= link_to_remove_association "Remove Schedule", f %>
</div>
* Solution code to make nested field work with callback * *使嵌套字段与回调一起使用的解决方案代码*
$(document).on('cocoon:after-insert', (function(event) {
window.materializeForm.init()
}));
If you're referring to the event that's called on the insertion/removal of items then the below may help. 如果您引用的是在插入/删除项目时调用的事件,则以下内容可能会有所帮助。 Take a look at the official Github repo for Cocoon (Search for Callbacks) for more info.
有关更多信息,请查看Github的Cocoon官方仓库(搜索回调)。 https://github.com/nathanvda/cocoon
https://github.com/nathanvda/cocoon
// A callback for cocoon so whenever a new association is made; the below will be executed.
$(document).on('cocoon:after-insert', (function(event) {
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.