How to hide Bootstrap modal with javascript

0 votes

I have a Bootstrap modal that I open from a link_to helper like this:

<%= link_to "New Contact", new_contact_path, {remote: true, 'data-toggle' => 'modal', 'data-target' => "#myModal",  class: "btn btn-primary"} %>

In my ContactsController.create action, I have code that creates Contact then passes off to create.js.erb. In create.js.erb, I have some error handling code (a mix of ruby and javascript). If everything goes well, I want to close the modal.

This is where I'm having trouble. I can't seem to dismiss the modal when all goes well.

I've tried $('#myModal').modal('hide'); and this has no effect. I've also tried $('#myModal').hide(); which causes the modal to dismiss but leaves the backdrop.

Any guidance on how to close the modal and/or dismiss the backdrop from within create.js.erb?

Here's the markup for myModal:

<div class="modal hide" id="myModal" >
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Add Contact</h3>
    <div id="errors_notification">
    </div>
  </div>
  <div class="modal-body">
    <%= form_for :contact, url: contacts_path, remote: true do |f| %>  
      <%= f.text_field :first_name, placeholder: "first name" %>
      <%= f.text_field :last_name, placeholder: "last name" %>
      <br>
      <%= f.submit "Save", name: 'save', class: "btn btn-primary" %>
      <a class="close btn" data-dismiss="modal">Cancel</a>
    <% end %>
  </div>
  <div class="modal-footer">
  </div>
</div>
Sep 3, 2020 in Java-Script by kartik
• 37,520 points
1,376 views

1 answer to this question.

0 votes

Hello @kartik,

With the modal open in the browser window, use the browser's console to try

$('#myModal').modal('hide');

If it works (and the modal closes) then you know that your close Javascript is not being sent from the server to the browser correctly.

If it doesn't work then you need to investigate further on the client what is happening. Eg make sure that there aren't two elements with the same id. Eg does it work the first time after page load but not the second time?

Browser's console: firebug for firefox, the debugging console for Chrome or Safari, etc

Hope it helps!!

Thank you!!

answered Sep 3, 2020 by Niroj
• 82,760 points

Related Questions In Java-Script

0 votes
1 answer

How to add a custom HTTP header to ajax request with javascript?

Hello @kartik, There is different way based on ...READ MORE

answered Aug 25, 2020 in Java-Script by Niroj
• 82,760 points
11,251 views
0 votes
1 answer

How to get the current URL with JavaScript?

Hello @kartik, Use: window.location.href As noted in the comments, ...READ MORE

answered Aug 28, 2020 in Java-Script by Niroj
• 82,760 points
314 views
0 votes
0 answers

How to create a <style> tag with Javascript?

I'm looking for a way to insert ...READ MORE

Sep 20, 2020 in Java-Script by kartik
• 37,520 points
65 views
0 votes
1 answer

How to clone a JavaScript object?

Hello, You can clone an object and remove ...READ MORE

answered Apr 2, 2020 in Java-Script by Niroj
• 82,760 points
105 views
+1 vote
1 answer

How to make anchor tag with routing using Laravel?

Hey @kartik, First you have to go to ...READ MORE

answered Mar 18, 2020 in Laravel by Niroj
• 82,760 points
7,740 views
0 votes
1 answer

What is redirection in Laravel?

Named route is used to give specific ...READ MORE

answered Mar 18, 2020 in Laravel by Niroj
• 82,760 points
869 views
0 votes
1 answer

How to install Laravel via composer?

Hello, This is simple you just need to ...READ MORE

answered Mar 23, 2020 in Laravel by Niroj
• 82,760 points
703 views
+1 vote
1 answer

What are named routes in Laravel and How can specify route names for controller actions?

Hey @kartik, Named routing is another amazing feature of ...READ MORE

answered Mar 23, 2020 in Laravel by Niroj
• 82,760 points
8,202 views
0 votes
1 answer

How to Store PHP variable with HTML in JavaScript in Laravel Blade Template?

Hello @kartik, The double curly brackets {{ }} will always ...READ MORE

answered Jun 11, 2020 in Java-Script by Niroj
• 82,760 points
7,911 views
+2 votes
1 answer

How to get Session with javascript while loading?

Hello @kartik, Use AJAX to update the view: $(document).ready(function() { ...READ MORE

answered Jun 11, 2020 in Java-Script by Niroj
• 82,760 points
2,036 views