$(...).modal is not a function in bootstrap with rails

Question

I use bootstrap modals and rails 5 and I want to hide the modal when I clic in the submit button of the form inside. I use the modal as a view.

I've tried with data-dismiss: "modal" but the data are not registred in my DB.

My app is strudctured like this:

application.html.erb:

<!DOCTYPE html>
<html>
  <head>
    <title>ProductBox</title>
    <%= csrf_meta_tags %>
    <%= action_cable_meta_tag %>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <%= stylesheet_link_tag    'application', media: 'all' %>
  </head>
  <body class="<%=params[:controller] %>">
    <%= render 'shared/navbarapp',current_user: @user %>
    <%= yield %>
    <%= javascript_include_tag 'application' %>
    <%= javascript_include_tag 'jquery-3.0.0.min' %>
    <%= javascript_include_tag 'jquery.min' %>
    <%= javascript_include_tag 'material.min' %>
    <%= javascript_include_tag 'nouislider.min' %>
    <!-- the bottom line is to call js on view  -->
    <%= yield(:after_js) %>
    <script>
    if( !window.jQuery ) document.write('<% javascript_include_tag 'application' %>"><\/script>');
    </script>
  </body>
</html>
  
The plomberie/new modal is triggered from here (cf line 54):

<div class="modal fade new_order " id="modal_new_order" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">

  <div class="modal-dialog new_order" role="document">
    <div class="modal-content new_order">
      <div class="modal-body new_order">
        <form>
          <div class="form-group new_order">
            <div class="new_order_header">
              <div class="new_order_header_icone">
                <%= image_tag "logo.png", class:"icon-inside-modal" %>
              </div>
              <div class="new_order_header_text_line">
                <h1>i am the header</h1>
              </div>
            </div>
            <div class="new_order_sentence">
              <h4>test</h4>
            </div>
            <div class="new_order_sentence_clikable">
              <%= link_to "", new_plombery_path,remote: true, class: "form-control", id: "message-text",:"data-dismiss" =>"modal", :"data-toggle" => 'modal', :"data-target" => '#modal_new_service' %>
            </div>
            <div class="new_order_call_to_action">
              <div class="new_order_call_to_action button1">
                <h4>rdv express</h4>
                <p>(intervention sous 4h)</p>
              </div>
              <div class="new_order_call_to_action button2">
                <h4>rdv programmé</h4>
                <p>(prévoir un RDV ultèrieur)</p>
              </div>
             </div>
          </div>
 
        </form>
      </div>
      <div class="modal-footer new_order" data-dismiss="modal">
        <h1>fermer</h1>
      </div>
    </div>
  </div>
</div>


<!-- plomberie modal  -->
<div class="modal fade" id="modal_new_service" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"></div>

the render for the view/plomberie/_newform.html.erb modal:
 
<div class="modal-dialog modal_new_service">
  <div class="modal-content modal_new_service">
  <!-- Be carreful: if you put remote: true after simple_form_for (@plomberie), the controller won't redirect to an html.erb view but a js.erb view  -->
    <%= simple_form_for (@plomberie),remote: true, id: 'default_class' do |f| %>
    <div class="modal-body modal_new_service">
      <%= f.input :comment,  as: :text, label: "Commentaire", placeholder: false, required: false,  input_html: {rows: 4, cols: 4, class: 'modal_new_service' }, error: 'Ce champ est obligatoire'%>
    </div>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <div class="modal-footer modal_new_service">
      <%= f.submit "OK", class: "btn btn-primary center-block", id:"addSubmit", data: {toggle: "modal", target: "#myNewOrderModal"} %>
    </div>
    <% end %>
  </div>
</div>
<div class="modal fade" id="myNewOrderModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>

 
the view in which the modal content is displayed view.plomberie/new.js.erb:
 
$("#modal_new_service").html("<%= escape_javascript(render 'newform') %>");

When I call the following function in view.plomberie/new.js.erb I get $(...).modal is not a function in my console

$('#addSubmit').click(function() {
      $("#modal_new_service").modal('hide');
    });

==> Uncaught TypeError: $(...).modal is not a function

And when I try to insert is in _view/plomberie/_newform.html.erb I do this:

<% content_for :after_js do %>
  <script>
    $(document).ready(function() {
      $('#addSubmit').click(function() {
      $("#modal_new_service").modal('hide');
      });
    });
  </script>
<% end %>


==> Uncaught SyntaxError: Unexpected token <

(The "content_for after" JS is to call my function when all the JS file are called in application.html.erb (see: yield(:after_js))

What can I do ?

score 0 · Answer 1 · edited May 23 '17 at 12:26

0

None of your code is working in snippet, my observation is you have included jQuery twice remove one of them also check TypeError: $(...).modal is not a function with bootstrap Modal

edited May 23 '17 at 12:26

Community

1
1

answered May 02 '17 at 21:34

this.girish

1,296
14
17

To expand on this, I've noticed that when you import jQuery an even number of times it won't work. – octopushugs May 02 '17 at 23:33

score 0 · Answer 2 · answered Jan 18 '18 at 16:36

0

The thing that fixed it for me was adding this to my application.js file:

//= require twitter/bootstrap

as opposed to this:

//= require bootstrap

answered Jan 18 '18 at 16:36

gangelo

3,034
4
29
43

$(...).modal is not a function in bootstrap with rails

2 Answers2