Modal not opening [Bootstrap]

After updating meteor, the modal’s I have set up stopped working completely. I’m not entirely sure if the cause if an update but I can’t seem to figure out what the problem is.

Here’s what I have:

<span class="pull-right"><button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal"><i class="fa fa-info"></i> Click for more</button></span>
<div class="modal" id="myModal" role="dialog">
  <div class="modal-dialog modal-lg">
    
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Query</h4>
      </div>
      <div class="modal-body">
        Test Modal Content
      </div>
      
    </div>
    
  </div>
</div>

Your code pasted into my site works. Do you get any error messages in the browser console?

I’m getting Uncaught Error: Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but lower than version 3 in the console.

I installed shrinkwrap and it says that I’m using version 3.1.1 of JQuery. I changed the version to 2.2.4 in npm-shrinkwrap.json but I’m not sure what command to use to enforce that update because it didn’t take effect yet.

I found the solution. So, I changed the version to 2.2.4 in npm-shrinkwrap.json and the “from” and “resolved” to “https://registry.npmjs.org/jquery/-/jquery-2.2.4.tgz”. Then ran meteor npm i and now everything works good!

2 Likes