locked
JavaScript runtime error: Object doesn't support property or method 'modal' RRS feed

  • Question

  • User527076549 posted

    getting error while using

    $('#mymodal').modal('show')

    referred both scripts mentioned below.Can anyone tell what could be the problem.

    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
        <script src="~/Scripts/bootstrap.min.js"></script>
    
    Thursday, January 3, 2019 5:13 PM

Answers

  • User527076549 posted

    Refering <script> inside <head> tag resolved the issue.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, January 4, 2019 6:03 AM

All replies

  • User475983607 posted

    We can't provide an accurate solution because we cannot see all the relevant code.

    This error generally means the code is invoking the .modal() function before the file reference is loaded (order matters) or the reference is throwing a 404.   Please press F12 to debug your code.

    Thursday, January 3, 2019 6:01 PM
  • User-893317190 posted

    Hi amithashenoy,

    I couldn't reproduce you problem, but if you only want to show a bootstrap modal using modal method, you could refer to the code below.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    </head>
    <body>
        <form id="form1" runat="server">
        <div id="myModal" class="modal" tabindex="-1" role="dialog">
         <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <p>Modal body text goes here.</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
            <input type="button" id="btn" value="show" />
    
        </form>
    </body>
          <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
        
        
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
    
        <script>
            $(function () {
                $("#btn").click(function () {
                    $('#myModal').modal("show");
                })
            })
        </script>
    </html>

    Best regards,

    Ackerly Xu

    Friday, January 4, 2019 2:48 AM
  • User527076549 posted

    Refering <script> inside <head> tag resolved the issue.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, January 4, 2019 6:03 AM