OnClick button create a dynamic div in Rails (using java script or jQuery)

Question

I want to create a dynamic div by using jquery How to do that? OnClick plus button it should be create same div elements

example:

<%= form_for  @expense_fills, url: view_excess_path, method: :post do |f| %>

<div class="row">
    <div class="col-xs-12">

        <div class="box">
            <div class="box-header">
                <h3 class="box-title text-center"> </h3>
                </div>
            <div class="box-body ">
                <div class="row" style="margin-left: 20%" >
          <div class="col-xs-4 col-sm-4">
            <div class="form-group has-feedback">
              <%= f.collection_select :id, ExpenseCategory.order(:name),:id,:name, { include_blank: false},{ class:' inputsm form-control '} %>
            </div>
          </div>
          <div class="col-xs-4 col-sm-4">
            <div class="form-group has-feedback ">
              <%= f.text_field :amount, class:'inputsm form-control', placeholder: 'Amount' %>
            </div>
          </div>
          <div class="col-xs-4 col-sm-4">
            <div class="form-group has-feedback">
              <%= f.submit "submit",class:'btn btn-default next-btn'  %>
            </div>
          </div>
          <div class="pull-right " style="margin-right: 5%; border-radius: 50%;">
            <%= f.button "+" , class: 'btn btn-default  ' %>
          </div>

        </div>
     </div>
  </div>
<% end %>

Your help saves life, must appreciated.

Thanks lot in advance

can you please mention which div element? Same div element means you want to make a copy of .row element? and please share what have you done till now — Manishh
– Manishh, Commented Apr 20, 2018 at 6:58
Did you tried anything:- $('.pull-right').on('click',function(){$(this).closest('.row').clone().insertAfter($(this).closest('.row'));}); — Death-is-the-real-truth
– Death-is-the-real-truth, Commented Apr 20, 2018 at 6:59
@AlivetoDie You are right, my mistake sorry, It's working nice but that button redirecting to next page i don't want that. (please add that to answer I would like to accept) — Bharat Mane
– Bharat Mane, Commented Apr 20, 2018 at 7:15

Death-is-the-real-truth · Accepted Answer · 2018-04-20 07:47:31Z

2

On click of the button

1.clone the div

2.insert the clone after initial div.

Do like below (hard-coded value example):-

$(document).on('click','.pull-right',function(e){
  e.preventDefault();//stop redirection
  var cont = $(this).closest('.row').clone(); //clone the row
  //first remove button and then add it after initial row
  $(cont).find(".pull-right").remove().end().insertAfter($(this).closest('.row'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="row">
<div class="col-xs-12">

    <div class="box">
        <div class="box-header">
            <h3 class="box-title text-center"> </h3>
            </div>
        <div class="box-body ">
            <div class="row" style="margin-left: 20%" >
      <div class="col-xs-4 col-sm-4">
        <div class="form-group has-feedback">
    1.first
        </div>
      </div>
      <div class="col-xs-4 col-sm-4">
        <div class="form-group has-feedback ">
          2000
        </div>
      </div>
      <div class="col-xs-4 col-sm-4">
        <div class="form-group has-feedback">
          <input type ="submit">
        </div>
      </div>
      <div class="pull-right " style="margin-right: 5%; border-radius: 50%;">
        +
      </div>

    </div>
 </div>
</div>

edited Apr 20, 2018 at 7:47

answered Apr 20, 2018 at 7:03

Death-is-the-real-truth

72.3k10 gold badges59 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Bharat Mane Over a year ago

its working fine but it redirecting to next page. Can you explain little bit more please?

Death-is-the-real-truth Over a year ago

I have edited my code for redirection prevention. Please have a look (i have added e.preventDefault())

Bharat Mane Over a year ago

Perfect dude, but its also copying my plus(+) button. what change should i have to do? (sorry i am newbie to both java script and rails)

Bharat Mane Over a year ago

Great job. Its working perfectly as I am expected. Thanks a lot :)

Death-is-the-real-truth Over a year ago

@BharatMane glad to help you :):).

|

Collectives™ on Stack Overflow

OnClick button create a dynamic div in Rails (using java script or jQuery)

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related