I am unable to close the modal. It says "Uncaught TypeError: $(...).modal is not a function".
This error is very very common and happens when JavaScript code is loaded before dependent JavaScript libraries like jQuery or bootstrap. The community cannot see all the relevant code so you'll need to review your code.
Member
40 Points
158 Posts
unable to hide the model
Apr 06, 2020 10:35 AM|shijostephen|LINK
Hi,
Please refer to the below javascript code
I am unable to close the modal. It says "Uncaught TypeError: $(...).modal is not a function".
Thanks & Regards
Shijo
All-Star
53051 Points
23634 Posts
Re: unable to hide the model
Apr 06, 2020 11:16 AM|mgebhard|LINK
This error is very very common and happens when JavaScript code is loaded before dependent JavaScript libraries like jQuery or bootstrap. The community cannot see all the relevant code so you'll need to review your code.
Contributor
3710 Points
1043 Posts
Re: unable to hide the model
Apr 07, 2020 03:05 AM|Yongqing Yu|LINK
Hi, shijostephen ,
The main reason why you get this error after using the modal is that the bootstrap.min.js is not referenced or the js reference order error.
Note: I temporarily commented your ajax request during the test.
More details, you could refer to below code:
<h2>Index</h2> @section scripts { <script src="~/Scripts/jquery-3.4.1.min.js"></script> <script src="~/Scripts/bootstrap.min.js"></script> <script> $(function () { debugger; $("#closbtn").click(function () { debugger; $('#myModal').modal('hide'); }); //Update event handler. $("#btnattachments").click(function () { $('#myModal').modal('show'); debugger; var $buttonClicked = $(this); var options = { "backdrop": "static", keyboard: true }; var row = $(this).closest("tr"); //$.ajax({ // type: "POST", // url: "/PurchasedGoodsQC/_EmpPartial", // data: null, // contentType: "application/json; charset=utf-8", // dataType: "html", // success: function (data) { // debugger; // $('#myModalContent').html(data); // $('#myModal').modal(options); // $('#myModal').modal('show'); // }, // error: function () { // alert("Content load failed."); // } //}); }); }); </script> } <button id="btnattachments">attachments</button> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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="MerchantProductsEditModalLabel">Products Edit</h4> </div> <div class="modal-body"> This is modal-body </div> <div class="modal-footer"> <button type="button" id="closbtn" class="btn btn-default">close</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal --> </div>
Best Regards,
YongQing.
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Member
40 Points
158 Posts
Re: unable to hide the model
Apr 07, 2020 04:57 AM|shijostephen|LINK
Hi,
I am posting all the view code below.
Thanks & Regards
Shijo
Member
40 Points
158 Posts
Re: unable to hide the model
Apr 07, 2020 05:38 AM|shijostephen|LINK
The error gone when i commented following jquery reference in the popup view page
@*<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>*@