I want to create a mechanism that allows Ajax to add one more textarea when you click the button.

If I want to install a button with a link to ajax in form_for, how should I describe it?
Normally,

<%=form_for@ranking do|f|%>
        <%=f.text_area:title%>
        <%=button_to '500 points consumed and ranking added', add_ranking_path, class: 'btn btn-primary center-block', remote:true%>
<%=end%>

I would like to, but then the link will be disabled and the form will be submitted.
If you press the button, I would like to increase the textarea by one more on Ajax.
Thank you for your cooperation.

==Additional
This is the erb of the form that edits ranking articles in the site.

<%=form_for(@ranking,html:{class:'col-sm-12col-xs-12')do|f|%>
    <div class="edit-rankingtop row">
      <div class="field col-sm-2col-xs-12">
        <strong id="top_image_label">top image</strong><br/>
        <%[email protected]%>
            <%[email protected], size: '65', id: 'top_image_thumb'%>
        <%end%>
        <div class="field">
          <%=f.file_field: image%>
          <br>
          <%=f.hidden_field: image_cache%>
        </div>
      </div>
      <div class="field col-sm-10 col-xs-12">
        <%=f.label: title%>
        <br>
        <%=f.text_area: title, class: 'form-control', placeholder: 'Stuff up to 150 characters' %>
      </div>
      <br of >

      <div class="field">
        <%=f.hidden_field:user_id, :value=>current_user.id%>
      </div>
      <div class="clearfix"></div>
    </div>
    <br of >
    <%=link_to '500 points consumed and ranking added', add_ranking_path(@ranking), class: 'btn btn-primary center-block', remote:true%>
    <div class="col-sm-10col-xs-12row">
      <div class="field col-sm-12">
    <%[email protected]_sum%>
       #--------------------------------
       # If you press the link above, Ajax will set the value of @ranking.ranking_posts to +1.
       # At the same time, you can edit the ranking that was originally only editable to i+1,
       I would like to add a new editing area within the #form.
       #--------------------------------
        <%=f.fields_for —ranking_posts, @ranking.ranking_posts do | p | %>
            <br of >
            <h4>%=i%>Location</h4>

            <%=p.hidden_field:rank, :value=>i%>

            <div class="field">
              <%=p.label: title%>
              <%=p.text_field: title, class: 'form-control'%>
            </div>

            <div class="field">
              <%=p.label:description%>
              <%=p.text_area:description, class: 'form-control', id: 'edit'%>
            </div>

            <%i=i-1%>
        <%end%>
      </div>

      <div class="actions col-sm-8col-xs-12">
        <%=f.submit 'post',:class=>'btn btn-success btn-block'%>
      </div>
      <%[email protected]%>
          <div class="col-sm-4col-xs-12">
            <%=f.submit "delete", data: {confirm:'Do you want to delete this ranking?'}, —class=>'btn btn-danger btn-block'%>
          </div>
      <%end%>
    </div>
<%end%>

Ranking Model

class Ranking <ActiveRecord::Base
  belongs_to —user
  has_many:ranking_posts,dependent::destroy
  accepts_nested_attributes_for —ranking_posts
end

RankingPost Model

class RankingPost<ActiveRecord::Base
  belongs_to —Ranking
end

By clicking on the button, I would like to add the ranking to 4th and 5th places, and add an area where I can edit accordingly.

ruby-on-rails html5

2022-09-30 10:48

2 Answers

I thought it would be better to use link_to to make it look like a button on the style sheet.
In fact, the code above also has a bootstrap-like class name.
Please let me know in detail if there are any special circumstances that you would like to use the button tag.

Also, it is difficult to imagine that textarea will increase, so please tell me what you want to do and other source codes in detail.

Add

By clicking on the button, I would like to add the ranking to 4th and 5th places, and add an area where I can edit accordingly.

Roughly speaking,

I think it means that

However, even if you can add textarea, it may be difficult to register the ranking data successfully when you click the post button.

Another approach is to use nested_form, which may be difficult to use in conjunction with Ajax.

For the time being, I will do my best and say, "I can do xx now, but I can't do xx.Here's the current code." I think it would be easier to get answers if you narrow down the issues you want to solve.

2022-09-30 10:48

Isn't #197 of Railscast something you want to do?

Add and remove nested model fields dynamically through JavaScript using etherPrototype or jQuery.

This is a continuation from #196, so I will also post that link.

#196 Nested Model Form Part 1
#197 Nested Model Form Part 2

2022-09-30 10:48

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656