Receiving error 0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'modal', when using Bootstrap 3 modal

▲
1
▼

I have created a simple MVC 5 project to demonstrate the issue I had using Visual Studio 2013 (New > Project > ASP.NET Web Application (4.5) > Empty (MVC)).

I then created the a basic controller and action for a simple view:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }
}

With the following View (Index.cshtml)

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div>
        <button type="button" class="btn btn-primary" id="new">New</button>
    </div>

    <!-- Modal -->
    <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="myModalLabel">Modal title</h4>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>

    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            //$('#myModal').modal();

            $('#new').click(function () {
                $('#myModal').modal();
            });
        });
    </script> 
</body>
</html>

The problem I have is: when the page is first loaded and I click on the button to display the modal, I receive the following error:

JavaScript error

However, if I refresh the page and click the button again it works fine.

Also if I uncomment the line //$('#myModal').modal(); and restart the project, the modal is immediately opened as expected, but clicking the button still causes the error above.

I'm sure this is probably something simple and a school boy error on my side but for the life of me I can't figure out what is going on or how to diagnose the issue.

Anyway any help is much appreciated and I would be interested to know if anyone else can replicate the issue.

Edit: Strangely enough this seems to only happen in Internet Explorer (11), and seems to work fine in Chrome and Firefox.

jquery
asp.net-mvc
twitter-bootstrap
modal-dialog
asked on Stack Overflow Mar 23, 2014 by teatime • edited May 8, 2015 by amphetamachine

3 Answers

▲
2
▼

Your button misses the data-toggle and data-target attributes, it should look like this:

 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" id="new">New</button>

Source: JavaScript Bootstrap

answered on Stack Overflow Mar 23, 2014 by benomatis
▲
1
▼

OK, after much messing about, I had a eureka moment when adding my last comment. It works in other browsers and not Internet Explorer. So I started looking at what was different about Internet Explorer and it turns out I hadn't removed the Avast On-line Security Extension.

So disabling this caused my JavaScript to load as expected and its all fine now (I had already removed from Chrome before starting this development).

Anyway hopefully this will help someone else before they bang their head against the wall as I did.

answered on Stack Overflow Mar 23, 2014 by teatime
▲
1
▼

When I had the same problem it turned out to be an unneccessary reference to a jquery bundle in my .cshtml page.

answered on Stack Overflow Nov 14, 2016 by soobow

User contributions licensed under CC BY-SA 3.0