title: Rails: How to add an object through a bootstrap modal?
body: <p>I'm new to rails and I have this web application that allows users to create new print Jobs Using Rails 4</p>
  
  <p>app/models/job.erb</p>
  
  <pre><code>class Job &lt; ActiveRecord::Base
    belongs_to :job_type
  end
  </code></pre>
  
  <p>app/models/job_type.erb</p>
  
  <pre><code>class Job &lt; ActiveRecord::Base
    has_many :jobs
  end
  </code></pre>
  
  <p>In the new job creation form user must choose a job type for his new job from a list, Which I managed to get it throw the following code.</p>
  
  <p>app/views/jobs/_form.html.erb</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="col-md-6 col-md-offset-3"&gt;
      &lt;%= form_for(@job) do |f| %&gt;
  
        .....
  
        &lt;div class="field"&gt;
          &lt;%= f.label :job_type_id %&gt;&lt;br&gt;
          &lt;%= f.collection_select :job_type_id, JobType.all,:id,:name %&gt;
        &lt;/div&gt;
        &lt;!-- Modal --&gt;
        &lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"&gt;
          &lt;div class="modal-dialog" role="document"&gt;
            &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
                &lt;h4 class="modal-title" id="myModalLabel"&gt;Modal title&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                ...
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
  
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
      &lt;% end %&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And through some coffee script I managed to add "Other" Option to the Job Types menu, Which fires the modal #myModal to add a new JobType to the database if its not exist...</p>
  
  <p>app/assets/javascript/jobs.coffee</p>
  
  <pre><code>$('#job_job_type_id').append("&lt;option&gt;Other&lt;/option&gt;")
  $('#job_job_type_id').change -&gt;
    jobType = $('#job_job_type_id :selected').text()
    if jobType == "Other"
      $('#myModal').modal('show')
    else
      $('#myModal').modal('hide')
  </code></pre>
  
  <p>The Code is working good and fires the bootstrap modal. But that's it I don't know what to do next?</p>
  
  <p>I've tried a lot of code and reviewed a lot of questions, but I didn't get to make this modal able to add a new JobType and update the list, I've figured that needs some modification to controllers and fancy AJAX code beyond my knowledge...</p>
  
  <p>I have some questions here</p>
  
  <p>1) What should I put in the modal code to be able to add a new JobType to the database, Then return to the new Job creation form and the newly created JobType selected</p>
  
  <p>2) Which controllers need to be modified? and How? What AJAX Code  need?</p>
  
  <p>3) How to re-factor the Job _form ? Can I put the modal code in a new Partial? If yes how to implement this ?</p>
  
  <p>I hope you can help me, I've been struggling to solve this issue for days.
  Thank you</p>