I'm trying to get my modal to close once a new location is added to it and the user presses the submit button, but I can't seem to get it to work. I don't know if what I'm doing with the .js is wrong or if it's something else. I am fairly new to rails as a whole and this is really my first website so any help is appreciated! Thanks!

Ideally, it will close the modal and refresh the current page so that the new location is shown when the submit button is clicked. Currently, it submits the location to the DB but I have to manually close the modal and refresh the page to show the new location.

Here is my location index.html

<%= javascript_include_tag "form.js" %>
<%= link_to 'New Location', '#new_location_modal', 'data-toggle' => 'modal' %>

<div class="modal fade" id="new_location_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Create new location</h4>
      </div>
      <div class="modal-body">
        <%= render 'form', modal: true %>
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>

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

_form.html.erb:

<% modal ||= false %>
<% remote = modal ? true : false %>
<%= form_for(@location, multipart: true, remote: remote, html: {role: :form, 'data-model' => 'location', id: 'new_loc_form'}) do |f| %>
  <% if @location.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@location.errors.count, "error") %> prohibited this location from being saved:</h2>

      <ul>
      <% @location.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

<%# Added Bootstrap classes, and help-block container for error messages %>
  <div class="field">
    <%= f.label :name %>
    <%= f.text_field :name %>
  </div>
  <div class="actions">
    <%= f.submit 'Submit' %>
  </div> 
<% end %>

form.js:

$('#new_loc_form').on('submit', function() {
  $('#new_location_modal').modal('hide');
}):

I'm trying to get my modal to close once a new location is added to it and the user presses the submit button, but I can't seem to get it to work. I don't know if what I'm doing with the .js is wrong or if it's something else. I am fairly new to rails as a whole and this is really my first website so any help is appreciated! Thanks!

Ideally, it will close the modal and refresh the current page so that the new location is shown when the submit button is clicked. Currently, it submits the location to the DB but I have to manually close the modal and refresh the page to show the new location.

Here is my location index.html

<%= javascript_include_tag "form.js" %>
<%= link_to 'New Location', '#new_location_modal', 'data-toggle' => 'modal' %>

<div class="modal fade" id="new_location_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Create new location</h4>
      </div>
      <div class="modal-body">
        <%= render 'form', modal: true %>
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>

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

_form.html.erb:

<% modal ||= false %>
<% remote = modal ? true : false %>
<%= form_for(@location, multipart: true, remote: remote, html: {role: :form, 'data-model' => 'location', id: 'new_loc_form'}) do |f| %>
  <% if @location.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@location.errors.count, "error") %> prohibited this location from being saved:</h2>

      <ul>
      <% @location.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

<%# Added Bootstrap classes, and help-block container for error messages %>
  <div class="field">
    <%= f.label :name %>
    <%= f.text_field :name %>
  </div>
  <div class="actions">
    <%= f.submit 'Submit' %>
  </div> 
<% end %>

form.js:

$('#new_loc_form').on('submit', function() {
  $('#new_location_modal').modal('hide');
}):

• javascript
• ruby-on-rails
• forms
• modal-dialog

Share Improve this question Follow asked Jul 6, 2015 at 17:04 seanscalseanscal 56822 gold badges99 silver badges3535 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

If your aim is to refresh the page, then don't set the remote: true in your form. When the form is submitted, the controller will call a redirect, the page will be refreshed and the modal will be hidden as well.

If you need to handle a remote form submission, your controller should be able to respond_to a js request.

In your controller:

def create
  @location = Location.new(location_params)

  #your logic here

  respond_to do |format|
    format.html { redirect_to locations_path } #or wherever you want to redirect
    format.js {} #this will render create.js.erb
end

Now in your create.js.erb you will have access to the newly created @location where you can append it to the list of locations and then close the modal. Have a look here for a demo (most relevant to you starts just after 4 minutes into the video).