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
– Alphabetus, Commented Aug 16, 2020 at 18:44
You either haven't loaded bootstrap.js or have loaded jQuery.js more than once — charlietfl
– charlietfl, Commented Aug 16, 2020 at 18:44
Does this answer your question? Bootstrap modal: is not a function — JSEvgeny
– JSEvgeny, Commented Aug 16, 2020 at 18:46
@charlietfl I've updated question with my import scripts, Am I missing something? — L Lawliet
– L Lawliet, Commented Aug 16, 2020 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
– charlietfl, Commented Aug 16, 2020 at 18:53

Vishal Upadhyay · Accepted Answer · 2020-08-16 19:13:04Z

1

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/[email protected]/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.

edited Aug 16, 2020 at 19:13

answered Aug 16, 2020 at 19:02

Vishal Upadhyay

8191 gold badge7 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

charlietfl Over a year ago

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

Collectives™ on Stack Overflow

JavaScript: How to call Bootstrap Modal from inside function?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related