Bootstrap3 modal js undefined function

Question

I have a regular bootstrap-modal in HTML. I am trying to show / hide it using javascript and I get an undefined function.

I do as the download documentation says, yet I get the undefined function on this line:

$("#registermodal").modal('show'); 

This is my mod:

 <div class="modal fade" id="registermodal" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="registerDevice">Klargjøring</h4> </div> <div class="modal-body"> <div id="registerContent" class="form-group"> <form class="form-horizontal"> <div class="form-group"> <label for="Enhetsnavn" class="col-lg-4 control-label">UUID</label> <div class="col-lg-8"> <input type="text" class="form-control" id="uuid" placeholder=""> </div> </div> <div class="form-group"> <label for="AppleID1" class="col-lg-4 control-label">Apple-ID #1</label> <div class="col-lg-8"> <input type="text" class="form-control" id="AppleID1" placeholder=""> </div> </div> <div class="form-group"> <label for="AppleIDPassword1" class="col-lg-4 control-label">Apple-ID Password #1</label> <div class="col-lg-8"> <input type="text" class="form-control" id="AppleIDPassword1" placeholder=""> </div> </div> <div class="form-group"> <label for="AppleID2" class="col-lg-4 control-label">Apple-ID #2</label> <div class="col-lg-8"> <input type="text" class="form-control" id="AppleID2" placeholder=""> </div> </div> <div class="form-group"> <label for="AppleIDPassword2" class="col-lg-4 control-label">Apple-ID Password #2</label> <div class="col-lg-8"> <input type="text" class="form-control" id="AppleIDPassword2" placeholder=""> </div> </div> <div class="form-group"> <label for="SIMpin" class="col-lg-4 control-label">SIM-PIN</label> <div class="col-lg-8"> <input type="text" class="form-control" id="SIMpin" placeholder=""> </div> </div> <div class="form-group"> <label for="losekod" class="col-lg-4 control-label">Låsekod</label> <div class="col-lg-8"> <input type="text" class="form-control" id="losekod" placeholder=""> </div> </div> <div class="form-group"> <label for="select" class="col-lg-2 control-label">Lokation</label> <div class="col-lg-10"> <select size="6" class="form-control" id="lokationSelect"> <option value="Phone">Phone</option> <option value="PDA">PDA</option> <option value="Phone">Phone</option> <option value="PDA">PDA</option> <option value="Phone">Phone</option> <option value="PDA">PDA</option> <option value="Phone">Phone</option> <option value="PDA">PDA</option> </select> </div> </div> </form> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-success" data-dismiss="modal" onclick="performKlargjoring()">Klargjøring</button> </div> </div> </div> </div> 

Answer 1

One of the reasons you can get the undefined function may be if you defined the jquery library more than once.

 <script src="/Scripts/jquery-1.10.2.min.js"></script> <script src="/Scripts/bootstrap.min.js"></script> <div class="modal fade" id="registermodal" aria-hidden="true"> ... ... </div> <script src="/Scripts/jquery-1.10.2.min.js"></script> 

The bootstrap library is applied to the first jquery library, but when you reload the jquery library, the bootstrap load is lost (the modal function is in bootstrap).

One of the common causes of this problem is the inclusion of partial blocks of code in a web application, since the same link to a javascript file can appear in several places in the full page release. This is especially dangerous when your js definitions are scattered throughout your page, i.e. in the head, in the upper body and in the lower body (in a partial template).

Answer 2

I decided to change my problem

 $(id).modal("show") 

to

 jQuery(id).modal("show"). 

Answer 3

Add the following script tag before declaring your own js file. This will solve the error.

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 

Answer 4

EDIT: I added on click to hide: DEMO2

Demo

It does not give an undefined function, as you say. I suggest wrapping your $("#registermodal").modal('show');

in a $(document).ready(function(){});

If this does not work (or if you have already done this), I suggest adding a js script (or link) right in front of your </body>

In the latter case, make sure that your HTML page has bootstrap.min.js and jquery.

Answer 5

Just adding the id to the close button and triggering a click on it using jquery worked fine ..

Answer 6

Try:

 $("#registermodal").modal(); 

Answer 7

Just stop using the js modal function! (I think some problems with the library continue)

You can open modal by adding data switching elements, data elements to your modal button. Thus, a simple click on the button will automatically open the modal mode without having to run js.

If you want to programmatically open modal mode, simply click on the modal button using jQuery, which it will open. (not verified)

To close modal, simply add the identifier of the existing close button and click on it using jQuery when you want to close. It works! (Tested)