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
$(function () { debugger; $("#closbtn").click(function () { debugger; $('#myModal').modal('hide'); }); //Update event handler. $("#btnattachments").click(function () { 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."); } }); }); });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.
@model Tasks.Models.PurchaseGoodsQCPageDTO @if (ViewBag.Message != null) { <script type="text/javascript"> window.onload = function () { alert("@ViewBag.Message"); var baseUrl="@Url.Action("Index", "PurchasedGoodsQC")"; window.location.href=baseUrl; }; </script> } else if (ViewBag.MessageValid !=null) {<script type="text/javascript"> window.onload = function () { alert("@ViewBag.MessageValid"); }; </script> } <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <style type="text/css"> body { background: #7db1be; font-family: Arial; font-size: 10pt; } .table { border: 1px solid #ccc; border-collapse: collapse; } .table th { background-color: #F7F7F7; color: #333; font-weight: bold; } .table th, .table td { padding: 5px; border: 1px solid #ccc; } </style> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" /> </head> <body style="background: #7db1be;"> @using (Html.BeginForm("Save", "PurchasedGoodsQC", FormMethod.Post)) { <div id='myModal' class='modal' style="text-align:right; "> <div class="modal-dialog" style="width:500px; height:300px; padding:10px;"> <div class="modal-content" style="overflow: auto; padding:10px; background-color:#d2f5f4;"> <button type="button" id="closbtn">x</button> <div style="height:10px;"></div> <div id='myModalContent' style="width:400px; height:200px; padding:10px;"></div> </div> </div> </div> @*<div class="row"> <div class="col-sm-3 col-md-6 col-lg-4" style="background-color:yellow; border: 2px solid black; margin: 0 auto; text-align: center; padding: 3px; display:inline-block;"> <p>Lorem ipsum...</p> </div> <div class="col-sm-9 col-md-6 col-lg-8" style="background-color:pink; border: 2px solid black; margin: 0 auto; text-align: center; padding: 3px; display:inline-block;"> <p>Sed ut perspiciatis...</p> </div> </div>*@ @*<table border="0" cellpadding="5" cellspacing="0"> <tr> <td>PurchaseNo</td> <td>@Html.TextBoxFor(m => m.PurchaseNo,"", new { @disabled = "disabled" })</td> <td>VendorName</td> <td>@Html.TextBoxFor(m => m.VendorName, "", new { @disabled = "disabled" })</td> <td>DeliveryNo</td> <td>@Html.TextBoxFor(m => m.DeliveryNo, "", new { @disabled = "disabled" })</td> <td>OrderNo</td> <td>@Html.TextBoxFor(m => m.OrderNo, "", new { @disabled = "disabled" })</td> <td> </td> </tr> </table>*@ <div class="container" > <div class="row col-lg-12"> <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12" style="display:inline-block;"> PurchaseNo @Html.TextBoxFor(m => m.PurchaseNo, "", new { @disabled = "disabled" }) </div> <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12" style="display:inline-block;"> VendorName @Html.TextBoxFor(m => m.VendorName, "", new { @disabled = "disabled" }) </div> <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12" style="display:inline-block;"> DeliveryNo @Html.TextBoxFor(m => m.DeliveryNo, "", new { @disabled = "disabled" }) </div> <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12" style="display:inline-block;"> OrderNo @Html.TextBoxFor(m => m.OrderNo, "", new { @disabled = "disabled" }) </div> <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12" style="padding: 0px 0px 0px 0px !important;display:inline-block;"> <button type="submit" class="btn btn-dark" style="width:150px;height:22px;">Save</button> </div> <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12" style="padding: 0px 0px 0px 0px !important;display:inline-block;"> <button id="btnattachments" type="button" class="btn btn-dark" style="width:150px;height:22px;">Attachments</button> </div> </div> </div> <div style="overflow-x: auto;"> <div class="container" style="background-color:white;"> <div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <table id="tblCustomers" class="table" cellpadding="0" cellspacing="0"> <tr> <th style="width:100px;display:none;"> TransId</th> <th style="width:150px">InvoiceDate</th> <th style="width:150px;min-width:350px;">ItemDesc</th> <th style="width:150px">OrderQty</th> <th style="width:150px;display:none;">Base RecQty</th> <th style="width:150px">RecQty</th> <th style="width:150px;display:none;">Base AccQty</th> <th style="width:150px">AccQty</th> <th style="width:150px">RejQty</th> <th style="width:150px">Unit</th> <th style="width:150px">AcceptingStatus</th> <th style="width:150px">Make</th> <th style="width:150px">Model</th> <th style="width:150px">Spriority</th> </tr> @foreach (Tasks.Models.PurchaseEntryDetailDTO PEDetail in Model.PurchaseEntryDtlList) { <tr> <td style="display:none" class="TransId"> <span>@PEDetail.TransId</span> </td> <td class="InvoiceDate"> <span>@PEDetail.InvoiceDate.ToString("dd MMM yyyy")</span> </td> <td class="ItemDesc"> <span>@PEDetail.ItemDesc</span> </td> <td class="OrderQty"> <span>@PEDetail.OrderQty</span> </td> <td style="display:none" class="BaseRecQty"> <span>@PEDetail.BaseRecQty</span> </td> <td class="RecQty"> <span>@PEDetail.RecQty</span> </td> <td style="display:none" class="BaseAccQty"> <span>@PEDetail.BaseAccQty</span> </td> <td class="AccQty"> <span>@PEDetail.AccQty</span> </td> <td class="RejQty"> <span>@PEDetail.RejQty</span> <input type="text" value="@PEDetail.RejQty" style="display:none" /> </td> <td class="Unit"> <span>@PEDetail.Unit</span> </td> <td class="AcceptingStatus"> <span>@PEDetail.AcceptingStatus</span> @*<span hidden>@PEDetail.AcceptingStatus</span>*@ @*<input type="text" value="@PEDetail.AcceptingStatus" style="display:none" />*@ <textarea id="txtArea" class="textarea" rows="5" cols="40" style="display:none"></textarea> <input type="hidden" id="texens" name="AcceptingStatus" value="@PEDetail.AcceptingStatus"> </td> <td class="Make"> <span>@PEDetail.Make</span> </td> <td class="Model"> <span>@PEDetail.Model</span> </td> <td class="Spriority"> <span>@PEDetail.Spriority</span> </td> <td> <a class="Edit" href="javascript:;">Edit</a> <a class="Update" href="javascript:;" style="display:none">Update</a> <a class="Cancel" href="javascript:;" style="display:none">Cancel</a> </td> </tr> } </table> </div> </div> </div> </div> <div id="searchResults"> </div> } <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script> <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script> <script type="text/javascript"> $(function () { debugger; $("#closbtn").click(function () { debugger; $('#myModal').modal('hide'); }); }); //Update event handler. $("body").on("click", "#btnattachments", function () { 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."); } }); }); @*//Edit event handler. $("body").on("click", "#tblCustomers .Edit", function () { var row = $(this).closest("tr"); $("td", row).each(function () { if ($(this).find("input").length > 0) { $(this).find("input").show(); $(this).find("span").hide(); debugger; //$(this).find("textarea").show(); } if ($(this).find("textarea").length > 0) { debugger; var span = $(this).find("span"); $(this).find("textarea").val(span.html()); $(this).find("textarea").show(); $(this).find("span").hide(); } }); row.find(".Update").show(); row.find(".Cancel").show(); $(this).hide(); }); //Update event handler. $("body").on("click", "#tblCustomers .Update", function () { var row = $(this).closest("tr"); $("td", row).each(function () { if ($(this).find("input").length > 0) { var span = $(this).find("span"); var input = $(this).find("input"); span.html(input.val()); span.show(); input.hide(); debugger; } if ($(this).find("textarea").length > 0) { debugger; var span = $(this).find("span"); //$("#texens").val($(this).find("textarea").val()); span.html($(this).find("textarea").val()); span.show(); $(this).find("textarea").hide(); } }); row.find(".Edit").show(); row.find(".Cancel").hide(); $(this).hide(); var PEDetail = {}; PEDetail.TransId = row.find(".TransId").find("span").html(); PEDetail.InvoiceDate = row.find(".InvoiceDate").find("span").html(); PEDetail.ItemDesc = row.find(".ItemDesc").find("span").html(); PEDetail.OrderQty = row.find(".OrderQty").find("span").html(); PEDetail.BaseRecQty = row.find(".BaseRecQty").find("span").html(); PEDetail.RecQty = row.find(".RecQty").find("span").html(); PEDetail.BaseAccQty = row.find(".BaseAccQty").find("span").html(); PEDetail.AccQty = row.find(".AccQty").find("span").html(); PEDetail.RejQty = row.find(".RejQty").find("span").html(); PEDetail.Unit = row.find(".Unit").find("span").html(); PEDetail.AcceptingStatus = row.find(".AcceptingStatus").find("span").html(); PEDetail.Make = row.find(".Make").find("span").html(); PEDetail.Model = row.find(".Model").find("span").html(); PEDetail.Spriority = row.find(".Spriority").find("span").html(); $.ajax({ type: "POST", url: "/PurchasedGoodsQC/UpdatePEDetail", data: '{PEDetail:' + JSON.stringify(PEDetail) + '}', contentType: "application/json; charset=utf-8", dataType: "json", success: function (data) { debugger; window.location.href = data; } }); }); //Cancel event handler. $("body").on("click", "#tblCustomers .Cancel", function () { var row = $(this).closest("tr"); $("td", row).each(function () { if ($(this).find("input").length > 0) { var span = $(this).find("span"); var input = $(this).find("input"); input.val(span.html()); span.show(); input.hide(); } if ($(this).find("textarea").length > 0) { debugger; var span = $(this).find("span"); $(this).find("textarea").val(span.html()); span.show(); $(this).find("textarea").hide(); } }); row.find(".Edit").show(); row.find(".Update").hide(); $(this).hide(); }); $('#search').click(function () { var url = '@Url.Action("DisplaySearchResults", "Search")'; //var keyWord = $('#Keyword').val(); $('#searchResults').load(url, { searchText: keyWord }); })*@ </script> </body> </html>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>*@