CODEWITHSUNDEEP
javascript
L Lawliet
L Lawliet

Reputation: 459

JavaScript: How to call Bootstrap Modal from inside function?

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?

Upvotes: 0

Views: 1447

Answers (1)

Vishal Upadhyay
Vishal Upadhyay

Reputation: 811

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.

Upvotes: 1

Related Questions