How do bootstrap forms bind to rails models?

Question

How does data bind between a bootstrap form and a rails model?

I have a rails app with a form using the `bootstrap-form' gem, along with the recommended datepicker gem. I've included the correct files in application.scss and application.js (see below) and a view js file to pick up the event, and my generated html looks okay. But somewhere it's not happening for me. I want to be able to understand how this hangs together properly, so I can debug it myself, so the I've come to the fundamental bit I don't think I understand - how does rails bind data to the html form?

My code -

gem file.rb

gem 'bootstrap_form'
gem 'momentjs-rails'
gem 'bootstrap3-datetimepicker-rails'

application.scss

 @import "bootstrap-sprockets";
 @import "bootstrap";
 @import 'bootstrap-datetimepicker';

application.js

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require moment
//= require bootstrap-datetimepicker
//= require_tree .

projects/_form.html.erb

<%= bootstrap_form_for(@project) do |f| %>

...

  <div class="field">
    <%= f.text_field :target, id: 'project_target' %>
    <script type="text/javascript">
      $(function () {
          $('#project_target').datetimepicker({
              inline: true,
              sideBySide: true
              });
      });
    </script>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

... this generates the following html -

<div class="field">
<div class="form-group"><label class="control-label" for="project_target">Target</label><input id="project_target" class="form-control" type="text" name="project[target]" /></div>
<script type="text/javascript">
    $(function () {
        $('#project_target').datetimepicker({
            inline: true,
            sideBySide: true
        });
    });
</script>

... which looks okay, but the date is not being stored to the database.

Is my understanding correct that the submit button returns the page to the server, with the data attached to the name tag?

When the form is returned to the server I can see that target is included in the params, but it is not part of the insert - I suspect that this is due to the way date time is formatted in Rails as opposed to Jquery, but I'm not sure if this is true.

Started POST "/projects" for ::1 at 2015-12-09 00:01:02 +0000
Processing by ProjectsController#create as HTML
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"9Mewj5CDmQoDycjdJgpazYdXqqZBHYB6CC2gnJOtizZGqUUcJr9gEwfOOR9Pb/ndSWCq7b1zVihGN+EmVJbA0g==", "project"=>{"name"=>"RC1", "stream_id"=>"1", "target"=>"12/24/2015 12:00 AM"}, "commit"=>"Create Project"}
  User Load (0.2ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = $1  ORDER BY "users"."id" ASC LIMIT 1  [["id", 1]]
   (0.1ms)  BEGIN
  SQL (0.4ms)  INSERT INTO "projects" ("name", "stream_id", "user_id", "created_at", "updated_at") VALUES ($1, $2, $3, $4, $5) RETURNING "id"  [["name", "RC1"], ["stream_id", 1], ["user_id", 1], ["created_at", "2015-12-09 00:01:02.569495"], ["updated_at", "2015-12-09 00:01:02.569495"]]
   (1.0ms)  COMMIT
Redirected to http://localhost:3000/whatisnext?object_id=1&object_type=project
Completed 302 Found in 7ms (ActiveRecord: 1.7ms)

Answer 1

The following bit doesn't look very good

projects/_form.html.js

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

You can leave it inline with html or put it into

app/assets/javascripts/new-file.js

    <div class="field">
      <%= f.text_field :target, id: 'project_target' %>
      <script type="text/javascript">
        $(function () {
          $('#project_target').datetimepicker({
            format: 'YYYY-MM-DD HH:mm',
            inline: true,
            sideBySide: true
           });
         });
      </script>

The 'format:' attribute ensures that the time is past in a suitable format for ActiveRecord.

And yes, you are correct about the 2nd question.