Why calling a javascript from code behind always throw error?

Question

I am calling a javascript function from code behind, to show a bootstrap modal upon click and it works for alert() etc but now for

$('#myModal').modal('show');

Error:

Uncaught ReferenceError: $ is not defined at show (officeLogin.aspx:157) at HTMLInputElement.onclick (officeLogin.aspx:1)

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta charset="utf-8">
    <title>Employee Login</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta content="" name="description" />
    <meta content="themes-lab" name="author" />
    <link rel="shortcut icon" href="assets/global/images/favicon.png" />
    <link href="../../assets/css/bootstrap.min.css" rel="stylesheet" />
    <link href="/assets/css/custom.css" rel="stylesheet" />
    <link href="../../assets/css/login.css" rel="stylesheet" />
</head>
<body class="account2" data-page="login">

    <form id="form1" runat="server">
        <ajax:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </ajax:ToolkitScriptManager>
        <div>
            <asp:UpdatePanel ID="UP_Message" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <div id="Div_UPMessage" runat="server">
                    </div>
                </ContentTemplate>
            </asp:UpdatePanel>
            <asp:UpdatePanel ID="UPanel" runat="server" UpdateMode="Always">
                <ContentTemplate>
                    <asp:UpdateProgress ID="UpdateProgress2" runat="server">
                        <ProgressTemplate>
                            <div class="ajax-loading">
                                <div>
                                </div>
                            </div>
                        </ProgressTemplate>
                    </asp:UpdateProgress>
                    <div class="container col-md-4 col-md-offset-4" id="login-block">
                        <div class="login-bg">
                            <i class="user-img icons-faces-users-03"></i>
                            <div class="login-logo">
                                <!-- <a href="" class="logo"></a> -->
                                <img src="/assets/img/logo.png" class="img-responsive" />

                            </div>
                            <div class="account-form">
                                <h3><strong>Login</strong> to your account</h3>
                                <div class="append-icon">
                                    <ajax:ListSearchExtender ID="leo" runat="server" TargetControlID="ddlOffice" PromptCssClass="ddlFilter"></ajax:ListSearchExtender>
                                    <asp:DropDownList runat="server" ID="ddlOffice" AutoPostBack="true" OnSelectedIndexChanged="ddlOffice_SelectedIndexChanged" CssClass="form-control" Style="margin-bottom: 8px;">
                                        <asp:ListItem Text="-Select Office-" Value="0"></asp:ListItem>
                                    </asp:DropDownList>
                                    <i class="icon-user"></i>
                                </div>
                                <div class="append-icon">
                                    <ajax:ListSearchExtender ID="lsso" runat="server" TargetControlID="ddlSubOffice" PromptCssClass="ddlFilter"></ajax:ListSearchExtender>
                                    <asp:DropDownList runat="server" ID="ddlSubOffice" CssClass="form-control" AutoPostBack="true" OnSelectedIndexChanged="ddlSubOffice_SelectedIndexChanged" Style="margin-bottom: 8px;">
                                        <asp:ListItem Text="-Select Sub Office" Value="0" />
                                    </asp:DropDownList>
                                    <i class="icon-user"></i>
                                </div>
                                <div class="append-icon">
                                    <ajax:ListSearchExtender ID="lse" runat="server" TargetControlID="ddlUsers" PromptCssClass="ddlFilter"></ajax:ListSearchExtender>
                                    <asp:DropDownList runat="server" ID="ddlUsers" CssClass="form-control" Style="margin-bottom: 8px;">
                                        <asp:ListItem Text="-Select Sub Office" Value="0" />
                                    </asp:DropDownList>
                                    <i class="icon-user"></i>
                                </div>
                                <div class="append-icon m-b-20">
                                    <asp:TextBox runat="server" TextMode="Password" ID="TextBoxPassword" placeholder="Password"
                                        CssClass="form-control form-white password pass" Style="margin-bottom: 8px;" />
                                    <i class="icon-lock"></i>
                                </div>
                                <asp:Button runat="server" ID="btnSign" OnClick="btnSign_Click"  CssClass="btn btn-lg btn-dark btn-rounded ladda-button btn-block" Text="Login" />
                            </div>

                            <!-- Modal -->

                            <div id="myModal" class="modal fade" role="dialog">
                                <div class="modal-dialog">

                                    <!-- Modal content-->
                                    <div class="modal-content" style="opacity: 0.8 !important; margin-top: 240px">
                                        <div class="modal-body">
                                        </div>
                                    </div>

                                </div>

                            <!--Modal Ends-->

                            </div>
                        </div>
                    </div>

                </ContentTemplate>
            </asp:UpdatePanel>

        </div>

        <!-- BEGIN LOGIN BOX -->
        <!-- END LOCKSCREEN BOX -->
        <p class="account-copyright">
            <%-- <span>Copyright © 2016 - NSDevelopers</span>--%>
        </p>
        <script src="../assets/global/plugins/jquery/jquery-1.11.1.min.js"></script>
        <script src="../assets/global/plugins/bootstrap/js/bootstrap.min.js"></script>


        <script type="text/javascript">
            function show() {
                //alert("Show");
               $('#myModal').modal('show');
            }
        </script>
    </form>

</body>

</html>

.cs file:

 if (!IsPostBack)
 {
     btnSign.Attributes.Add("onClick", "show()");
 }

Why does it throw error ? Please help in fixing it.

Check in console. You may see 404 error for jquery.min and bootstrap.js files, I doubt the path would be wrong. — Himanshu Upadhyay, Sep 20 '17 at 06:28
You have four different paths to assets: `assets/`, `../../assets/`, `/assets/` and `../assets/`. Figure out which one is correct, and that will probably solve your problems. — Peter Abolins, Sep 20 '17 at 06:30
Use on Clientclick and check if jquery library is loaded properly. — Vinod kumar G, Sep 20 '17 at 06:50
Something else to consider is that both jQuery and bootstrap use the $ symbol. You have a conflict in your libraries. jQuery has a noConflict option or you can simply use jQuery('#myModal').modal('show'); — , Sep 20 '17 at 06:56
@jeff Boostrap extends jquery, which is why is appears to use the $ symbol - there's no need for noConflict with jquery+bootstrap — freedomn-m, Sep 20 '17 at 07:10

score 1 · Accepted Answer · answered Sep 20 '17 at 06:40

1

check the below two lines if they are correct. its clear that the path is wrong.

<script src="../assets/global/plugins/jquery/jquery-1.11.1.min.js"></script>
<script src="../assets/global/plugins/bootstrap/js/bootstrap.min.js"></script>

also a suggestion, when your referring to library javascript files, please place them in the head and you place your custom javascript file in the bottom of the body.

answered Sep 20 '17 at 06:40

lpradhap

623
6
17

For the suggestion: There's no clear guidance, so it's best not to state this as if it's fact. See https://stackoverflow.com/questions/10994335/javascript-head-body-or-jquery (both body) and https://stackoverflow.com/questions/30488298/where-in-the-html-file-should-jquery-and-bootstrap-be-placed (2 answers: 1 head, 1 body) and numerous other SO questions on this subject. – freedomn-m Sep 20 '17 at 07:14
as per critical rendering path, the earlier we allow JavaScripts which are render blocking to read and requested to be download could reduce the render blocking time. On the other hand, we can async download the custom JS files, since they are not essential on rendering. – lpradhap Sep 20 '17 at 07:26

Why calling a javascript from code behind always throw error?

1 Answers1