CODEWITHSUNDEEP
javascriptc#jqueryasp.net
mohsen
mohsen

Reputation: 1806

Loading jQuery before trying to use jQuery functions in .Net masterpages

I want to trigger an alert by clicking on one div inside the toolbar, but I couldn't run jQuery function.

jQuery installed correctly and intellisense works, but the jQuery code does not work.

This is my MasterPage aspx code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<link href="../Styles/Style.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="head" runat="server">
    <script type="text/javascript">
        jQuery(document).ready(function () { alert('My alert'); });/// or
        $('#DivMessage').click(function () { alert('My alert'); });
    </script>
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Path="~/Scripts/jquery-2.1.1.min.js" />
        </Scripts>
    </asp:ScriptManager>
    <div id="Safhe">
        <div id="header"></div>
        <div id="ToolBar">
            <div id="Messages" class="GorooheIcon">
                <div id="DivMessage" class="Icon" title="پیام های عمومی"></div>
            </div>
            <div id="Content">
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                </asp:ContentPlaceHolder>
            </div>
        </div>
        <div id="footer"></div>
    </div>
</form>
</body>
</html>

Upvotes: 0

Views: 92

Answers (1)

nanndoj
nanndoj

Reputation: 6770

You are trying to run a jQuery function on header

<script type="text/javascript">
    jQuery(document).ready(function () { alert('My alert'); });/// or
    $('#DivMessage').click(function () { alert('My alert'); });
</script>

but you only import jquery script at body

<Scripts>
        <asp:ScriptReference Path="~/Scripts/jquery-2.1.1.min.js" />
</Scripts>

solution:

Move your script declaration above to header or move your function to the end of the page.

...
  </form>
  <script type="text/javascript">
      jQuery(document).ready(function () { alert('My alert'); });/// or
      $('#DivMessage').click(function () { alert('My alert'); });
  </script>
</body>
</html>

Upvotes: 4

Related Questions