unable to hide the model [Answered]RSS

4 replies

Last post Apr 07, 2020 05:38 AM by shijostephen

‹ Previous Thread|Next Thread ›

Shortcuts

Related Links

shijostephen

Member

40 Points

155 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

- Reply
mgebhard
All-Star

47661 Points

20886 Posts

Re: unable to hide the model

Apr 06, 2020 11:16 AM|mgebhard|LINK

shijostephen
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.

Yongqing Yu

Contributor

3660 Points

1042 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">&times;</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.

MSDN Community Support

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.