CODEWITHSUNDEEP
javascriptjqueryasp.netasp.net-mvctwitter-bootstrap
07_05_GuyT
07_05_GuyT

Reputation: 2887

Modal error - Uncaught TypeError: undefined is not a function modal

Im using the following code and I got error in delete in the JS($("#deleteModal").modal("show");),any idea what can be wrong here ? Im using MVC5 project

the error is

Uncaught TypeError: undefined is not a function 

<!-- Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="deleteModalLabel">Delete Item</h4>
            </div>
            <div id="deleteModalBody" class="modal-body"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
        $("#deleteModal").modal("hide");  // initially hides the modal pop-up until needed

        $(".deleteLink").on("click", function () {

            $.get('@Url.Action("GetDeletePartial")', { id: $(this).prop("id") }, function (data) {
                $("#deleteModalBody").html(data);

                $("#deleteModal").modal("show");  // shows the modal pop-up now that we have our partial view
            });

        });
    });
</script>

when I try it like following it fail in the begging of the script with the same error 

@section scripts
{
    <script src="~/Scripts/jquery-2.1.1.min.js"></script>   

    <script>
        $(function () {
            $("#deleteModal").modal("hide");  // initially hides the modal pop-up until needed

            $(".deleteLink").on("click", function () {

                $.get('@Url.Action("GetDeletePartial")', { id: $(this).prop("id") }, function (data) {
                    $("#deleteModalBody").html(data);

                    $("#deleteModal").modal("show");  // shows the modal pop-up now that we have our partial view
                });

            });
        });
    </script>
}

Upvotes: 0

Views: 14771

Answers (2)

Bruno
Bruno

Reputation: 189

Had the same error on standalone plain old HTML+Javascript page.

Apparently caused by socket.io.js which script tag was initially placed after jquery and bootstrap.js script tags.

Moving socket.io.js script tag before jquery and bootstrap resolved the issue for me.

Upvotes: 0

Jijie Chen
Jijie Chen

Reputation: 449

It seems that you are attempting to make a model dialog using some third-party jQuery plugin, but you foget to make a reference to that plugin's javascript file.

To confirm this, i wonder which line does the exception occurs on? Is it on the line of first line of your ready callback?

$("#deleteModal").modal("hide");

If so, please check your script reference. Just add a <script> tag with a src to that file before your script block.

Update:

As you comments, the exception does not occurs on that line. So you may use a debugger(such as Chrome developer tools) to find out which function-call fails. You can set the debugger to pause the excution on exceptions. In chrome developer tools, you can switch to Source tab and click the last icon on right-top of the side-bar on the right to enable this feature. Here's an awesome answer with snapshots: https://stackoverflow.com/a/17324511/1817042

Upvotes: 1

Related Questions