I want to distribute a separate id to each form generated by the dynamic form.(I want to display each image that I pulled from the database)
I'd like to introduce a dynamic form using coffeescript into the rails application, but I'm having a hard time.
The increase or decrease of the form such as adding or deleting is working properly, and I would like to be able to display the image selected by file_field there.(When you get stuck in validation or edit)
The id in <%@[email protected][0]%> in the code of the form below,
I know that I can sort out the appropriate id for each form, preferably to solve the problem.
Please let me know if you have any ideas to distribute this id well for each form.
Also, I would appreciate it if you could let me know if there is an easier way.
How to create a form for multiple models layered with Rails
How to create a form for multiple models layered with Rails [Add Dynamic Processing with JavaScript/CoffeeScript]
When an image is uploaded to the iPrevew --- input file, the image is previewed.
carrierwave --- Gem to upload the image.They also display thumbnail images suitable for each input file when you get stuck in validation or when editing.
I added i to the id so that jquery counts from 0 to 1, but only 0 was applied to all forms.
<%@[email protected][i]%>← Count by one each time the add button is pressed
<div class="fieldwork_field">
<div class="file">
<%=f.file_field:work_image, accept: 'image/*'%>
<%@gallery.works.find do | work | %>
<%@[email protected][0]%>** I want this number to be 0 for the first form, 1 for the second form, and 2 for the third form.**
<%[email protected][email protected]_image?%>** Preview here**
<%end%>
<%=f.hidden_field:work_image_cache%>
</div><br>
<%=f.text_field:work_title, class: 'text_field', placeholder: "Picture Title" %><br>
<%=f.hidden_field: id%>
<%=link_to_remove_field("Delete", f, {class:'remove_field'})%>
<script>
$('input[type=file]').iPreview();
</script>
#coffeescript
$(document).on 'ready page:load', ->
# When the Add button is pressed
$('form') .on 'click', '.add_field', (event)->
# Get current time in milliseconds
time = new Date().getTime()
# Replace helper-generated index values with ↑
regexp = newRegExp($(this).data('id'), 'g')
# Insert fields (HTML) passed from helper
$(this).before($(this).data('fields').replace(regexp,time))
event.preventDefault()
# When the Delete button is pressed
$('form') .on 'click', '.remove_field', (event)->
# Set the field to _destroy=true when you press the delete button.
$(this).prev('input[name*=_destroy]').val('true')
# hide a field with a delete button pressed
$(this).close('div').empty()
event.preventDefault()
Form to be Added
<%@gallery.works.find do|work|%>
Regarding the above, I think the find method can only get the first 1 record of works.
@ Assuming gallery has more than one works model
<%@gallery.works.each do|work|%>
<%@work=work%>
I think it would be better to write it like this.
Also, in this case, the work is treated as a single record of the work in the block, so
<%@gallery.works.each do|work|%>
<%=image_tagwork.work_image.thumb.url if work.work_image?%>
<%end%>
I wonder if there is any problem with the above.
If you want to add a subscript,
<%@gallery.works.each_with_index do|work,index|%>
You can also give the index in the block a number of 0,1,2...
by writing as shown in .
© 2024 OneMinuteCode. All rights reserved.