javascript - How can I dynamically add new nested field to form via JS in Rails? -



javascript - How can I dynamically add new nested field to form via JS in Rails? -

i have model post has_many :relics , relic belongs_to :post. have new post form, can create post's relics (multiple) (it works):

from new action in posts_controller.rb:

@post_relics = [@post.relics.build]*2

from _form.html.haml:

= f.fields_for :relics, @post_relics |r| .more.group .photo = link_to 'insert photo', '#', data: {toggle: 'upload'} = r.file_field :photo, accept: 'image/*' .fileds = r.label :title = r.text_field :title = r.label :description = r.text_field :description

my goal add together 'add more' button provide re-create of .more div valid input names , ids, how can that?

the above code renders in:

<div class='more group'> <div class='photo'> <a data-toggle="upload" href="#">insert photo</a> <input accept="image/*" id="post_relics_attributes_0_photo" name="post[relics_attributes][0][photo]" type="file" /> </div> <div class='fileds'> <label for="post_relics_attributes_0_title">title</label> <input id="post_relics_attributes_0_title" name="post[relics_attributes][0][title]" type="text" value="" /> <label for="post_relics_attributes_0_description">description</label> <input id="post_relics_attributes_0_description" name="post[relics_attributes][0][description]" type="text" value="" /> </div> </div> <input id="post_relics_attributes_0_id" name="post[relics_attributes][0][id]" type="hidden" value="6" /> <div class='more group'> <div class='photo'> <a data-toggle="upload" href="#">insert photo</a> <input accept="image/*" id="post_relics_attributes_1_photo" name="post[relics_attributes][1][photo]" type="file" /> </div> <div class='fileds'> <label for="post_relics_attributes_1_title">title</label> <input id="post_relics_attributes_1_title" name="post[relics_attributes][1][title]" type="text" /> <label for="post_relics_attributes_1_description">description</label> <input id="post_relics_attributes_1_description" name="post[relics_attributes][1][description]" type="text" /> </div> </div>

here's quick solution using jquery: http://jsfiddle.net/m4b9d/9/

function addmore() { var newdiv = $(".more_group:last").clone(); var newid = number(newdiv.attr('id').replace(/post_relics_attributes_(\d+)/, "$1")) + 1; newdiv.attr('id', "post_relics_attributes_" + newid) $.each(newdiv.find(":input"), function() { var thisname = $(this).attr('id'); thisname = thisname.replace(/\d+/, newid); $(this).attr('name', thisname); $(this).attr('id', thisname); $(this).val(''); }); $("#groups").append(newdiv); }

basically, creates re-create of lastly div within grouping of divs, , updates ids/names/values of each input within div. played bit way elements named create writing bit easier, added grouping div there'd append new div to.

javascript jquery ruby-on-rails

Comments

Post a Comment

Popular posts from this blog

model view controller - MVC Rails Planning -

model view controller - MVC Rails Planning - i'm starting rails , i'm building app stores films info, user can watch film , give grade on web application. i have coded cinema model, controller , views. now, have 2 questions: should need create model , controller grading? in case, should create or should wait , create first users model , controller? yes, on model , controller grades. that'd feasible way maintain track of who's graded what. it's create first, i'd start users, since grades depend on both films , users. ruby-on-rails model-view-controller
Read more

ruby on rails - Devise Logout Error in RoR -

ruby on rails - Devise Logout Error in RoR - while using devise in ror, encountering unusual error when trying log out url different root url. displays me : actioncontroller::invalidauthenticitytoken in devise::sessionscontroller#destroy" for illustration if rooting path after log in '/structure', , seek log out '/general' error, while logging out '/structure' fine. any help highly appreciated. ruby-on-rails ruby devise
Read more

html - Submenu setup with jquery and effect 'fold' -

html - Submenu setup with jquery and effect 'fold' - i want open submenu jquery effect fold, problem if user "hover effect" fast menu remain open, how can avoid this, jquery code is: $('ul.mainmenu li').hover( function() { $(this).children('ul').show('fold', 570); }, function() { $(this).children('ul').hide('fold', 500); } ); my jsfiddle link is: http://jsfiddle.net/9wkbf/ updated fiddle the reason behind problem is, first event $(this).children('ul').show('fold', 570); queued , until completes, sec animation not start. the next snippet can workaround $('ul.mainmenu > li').hover( function() { $(this).children('ul').show('fold', 570); }, function() { $('ul:not(.mainmenu)').hide('fold', 500); } ); *important note : work current scenario. jquery html css
Read more