CODEWITHSUNDEEP
ruby-on-railsruby
flenning12
flenning12

Reputation: 41

rails bootstrap modal not closing

I want my feedback partial to be displayed in a modal. Got that, so far so good. But whenever I submit the data the modal stays open. Chrome looks like it is refreshing the page but it isn't i guess since the only request that I get when submitting the form is the following:

Started POST "/feedback" for 127.0.0.1 at 2018-10-13 23:01:03 +0200
Processing by FeedbackController#create as HTML
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"bEe0K7O3n+g5KVaSi7Hs78A/avMltZh0C9M4no1DbsRBBwc73o32igxkGNjR+oKVuh7rMHFDyWOQMgTCfATcew==", "name"=>"[FILTERED]", "topic"=>"plolololplololol", "message"=>"plolololplolololplolololplololol", "commit"=>"Submit"}
  User Load (0.4ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = $1 ORDER BY "users"."id" ASC LIMIT $2  [["id", 1], ["LIMIT", 1]]
   (0.3ms)  BEGIN
  SQL (0.3ms)  INSERT INTO "feedbacks" ("message", "topic", "name", "created_at", "updated_at") VALUES ($1, $2, $3, $4, $5) RETURNING "id"  [["message", "plolololplololol"], ["topic", "plolololplololol"], ["name", "plolololplololol"], ["created_at", "2018-10-13 21:01:03.883684"], ["updated_at", "2018-10-13 21:01:03.883684"]]
   (0.9ms)  COMMIT
No template found for FeedbackController#create, rendering head :no_content
Completed 204 No Content in 521ms (ActiveRecord: 6.1ms)

feedback view

  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#feedbackModalCenter">
    Feedback
  </button>

  <div class="modal fade" id="feedbackModalCenter" tabindex="-1" role="dialog" aria-labelledby="feedbackModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="feedbackModalLongTitle">Feedback</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <%= render partial: 'layouts/feedback' %>
        </div>
      </div>
    </div>
  </div>

feedback partial

<%= form_tag('/feedback', method: 'post') do %>
  Name: <%= text_field_tag :name, "", class: 'form-control' %>
  Topic: <%= text_field_tag :topic, "", class: 'form-control' %>
  Message: <%= text_area_tag :message, "", class: 'form-control', rows: 3 %>
  <hr>
  <%= submit_tag 'Submit', id: 'submit-feedback', class: 'btn btn-outline-success center' %>
<% end %>

<script>
    (function(){
        document
            .getElementById('submit-feedback')
            .addEventListener('submit', function() {
                $('#feedbackModalCenter').modal('hide');
            });
    })()
</script>

routes 

get '/feedback', to: 'feedback#index'
post '/feedback', to: 'feedback#create'

Why is that and HOW is that happening?

Upvotes: 0

Views: 439

Answers (1)

Saqib Shahzad
Saqib Shahzad

Reputation: 1002

This happened with me once and I got it working by removing class fade from the modal. So the opening div of your modal will look like: 

<div class="modal" id="feedbackModalCenter" tabindex="-1" role="dialog" aria-labelledby="feedbackModalCenterTitle" aria-hidden="true">

Upvotes: 2

Related Questions