JavaScript: How to call Bootstrap Modal from inside function?

Question

I want to call a function on click of a link which will display modal.

Imported Scripts in head tag

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

Modal:

<div class="modal fade" id="modFileUpload" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Upload Plans</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
         <form id="myform">
            <div class="custom-file">
              <input type="file" class="custom-file-input" id="myfile">
              <label class="custom-file-label" for="customFile">Choose file</label>
            </div>
          </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal" id="closeUploadPlansModal">Close</button>
      </div>
    </div>
  </div>
</div>

Link:

<a class="nav-link text-left"  role="button" onclick="uploadFiles()" >
                  <i class="fa fa-upload"></i><span class="nav-text">Upload Plans</span>
                  </a>

uploadFiles function:

function uploadFiles(){
    $('#modFileUpload').modal('show'); //getting error here
}

I am getting error as:

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

Is there any way to show modal onclick of link?

Can you post your code where you are importing bootstrap.js and etc? — Alphabetus, Aug 16 '20 at 18:44
You either haven't loaded bootstrap.js or have loaded jQuery.js more than once — charlietfl, Aug 16 '20 at 18:44
Does this answer your question? [Bootstrap modal: is not a function](https://stackoverflow.com/questions/25757968/bootstrap-modal-is-not-a-function) — JSEvgeny, Aug 16 '20 at 18:46
@charlietfl I've updated question with my import scripts, Am I missing something? — L Lawliet, Aug 16 '20 at 18:50
Make sure there isn't some other version of jQuery.js loading further down the page. Another issue could be some other library using `$()` and it is no longer jQuery object — charlietfl, Aug 16 '20 at 18:53
You could alternatively add `data-toggle="modal" data-target="#modFileUpload"` to the anchor element that calls `uploadFiles()` — Jordan Stubblefield, Aug 16 '20 at 18:57
Also, consider using the template from the [bootstrap website](https://getbootstrap.com/docs/4.5/getting-started/introduction/) — Jordan Stubblefield, Aug 16 '20 at 19:01

Vishal Upadhyay · Accepted Answer · 2020-08-16T19:13:04.210

I was having the same issue because I had imported the cdn scripts in my head tag as well as before body tag.

And in my case all were of different version.

Your head tag imports should look like this:

<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<!-- JS, Popper.js, and jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

And make sure there shouldn't be any other bootstrap, jquery scripts in your code.

Be careful with slim version of jQuery if wanting to use ajax or any of the other api's that it does not include that the full version does — charlietfl, Aug 16 '20 at 19:08

JavaScript: How to call Bootstrap Modal from inside function?

1 Answers1