Wsrtjtyk

I have a nested form _form.html.erb within my homepage and I added another nested form _invsession_fields.html.erb that is appended to the first form using cocoon gem. _invsession_fields.html.erb has only two fields which are datetime type. I am trying to get the datetimepicker to work dynamically when the user add time slots.

_form.html.erb :

    <div id="theform" class="col-md-12 homepage_box_top_dashboard">

      <h3 class="section_title"> Schedule event with IR </h3>

      <%= simple_form_for invitation, id: "invitation_form", :remote => true do |f| %>

        <div class="col-md-12">

          <%= f.error_notification %>

          <%= f.error_notification message: f.object.errors[:base].to_sentence if f.object.errors[:base].present? %>

          <%= f.collection_select(:guest_id, User.all, :id, :full_name, {}, class: "selectpicker", title: "Choose recipient", multiple: true) %>

        </div>

        <div class="col-md-12">

          <%= f.collection_select(:type_of_event, @type_evenement, :id, :type_name, {:include_blank => true}, class: "selectpicker", title: "Type", multiple: false) %>

        </div>

        <div class="col-md-12">

          <%= f.collection_select(:event_id, @events_list, :id, :title, {:include_blank => true}, class: "selectpicker", title: "Related event (Optional)", multiple: false) %>

          <%= f.input :title, placeholder: "Title", label: false %>

          <%= f.text_area :memo, placeholder: "Start writing", class: "form form-control", rows: 10 %>

          <div id="invsessions">

            <%= f.simple_fields_for :invsessions do |builder| %>

              <%= render 'invitations/invsession_fields', f: builder %>

            <% end %>

          </div>

          <div class="form-actions">

            <br>

            <%= f.button :submit, class: "btn btn-primary" %>

            <br>

            <%= link_to_add_association 'Add time slots', f, :invsessions, class: 'btn btn-primary', partial: 'invitations/invsession_fields' %>

          </div>

        </div>

      <% end %>

    </div>

 <script type="text/javascript">

        $(document).ready(function () {

            $('#invitation_type_of_event').select2({

                placeholder: "Select event type",

                allowClear: true

            });

        });

 $(document).ready(function () {

        $('#invitation_event_id').select2({

            placeholder: "Related event (Optional)",

            allowClear: true



        });

    });

        $(document).on('ready page:change', function() {

            $('.invsessions').on('cocoon:after-insert', function() {

                $('#datetimepicker').datetimepicker();

            })

        })

    </script>

_invsession_fields.html.erb :

<div class="nested-fields">

  <tr>

    <%= f.input_field :_destroy, as: :hidden %>

      <%= link_to_remove_association "Remove slot", f, class: 'btn btn-primary btn-xs' %>

  </tr>

  <tr>

    <div class='input-group date' id='datetimepicker'>

      <%= f.text_field :start, :class => "form-control" %>

      <span class="input-group-addon">

              <span class="glyphicon glyphicon-calendar"></span>

          </span><br>

    </div>

  </tr>

  <tr>

    <div class='input-group date' id='datetimepicker'>

      <%= f.text_field :end, :class => "form-control" %>

      <span class="input-group-addon">

              <span class="glyphicon glyphicon-calendar"></span>

          </span>

    </div>

  </tr>

</div>

Does anybody knows how I could automatically regenerate the datetimepicker formating when the nested form is appended please ?

I tried multiple solutions that i found on search engines, but none of them work. I know i should be adding a few lines within my SCRIPT, but not sure which one, and where. Can someone help pls ?

I added :

$(document).on('ready page:change', function() {

    $('#invsessions').on('cocoon:after-insert', function() {

       $('.datetimepicker').datetimepicker();

    })

})

Within the <SCRIPT> in the _form.html.erb but no luck