Home/ Questions/Q 6225709
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T08:53:30+00:00

I’m using the jquery libs in my ASP.NET MVC application in the head of

  • 0

I’m using the jquery libs in my ASP.NET MVC application in the head of the master page like follows:

<head runat="server">
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="contene-style-tyle" content="text/css" />
    <meta http-equiv="contene-script-tyle" content="text/javascript" />

    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
    <link rel="stylesheet" type="text/css" href="/Content/css/black.css" media="screen, projection, tv" />    
    <!--[if lte IE 7.0]><link rel="stylesheet" type="text/css" href="css/ie.css" media="screen, projection, tv" /><![endif]-->
    <!--[if IE 8.0]>
        <style type="text/css">
            form.fields fieldset {margin-top: -10px;}
        </style>
    <![endif]-->
    <style type="text/css"> @import url(/Content/css/jquery-ui-1.8.15.custom.css); </style>
    <style type="text/css"> @import url(/Content/css/jquery.message.css); </style>
    <%--<script type="text/javascript" src="/content/js/jquery-1.4.2.min.js"></script>--%>
    <script type="text/javascript" src="/content/js/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="/content/js/jquery-ui-1.8.15.custom.min.js"></script>
    <script type="text/javascript" src="/content/js/jquery.message.min.js"></script>
    <script type="text/javascript" src="/content/js/jquery.ui.datepicker.js"></script>
    <!-- Adding support for transparent PNGs in IE6: -->
    <!--[if lte IE 6]>
        <script type="text/javascript" src="content/js/ddpng.js"></script>
        <script type="text/javascript">
            DD_belatedPNG.fix('h3 img');
        </script>
    <![endif]-->

    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            // Switch categories
            $('#h-wrap').hover(function () {
                $(this).toggleClass('active');
                $("#h-wrap ul").css('display', 'block');
            }, function () {
                $(this).toggleClass('active');
                $("#h-wrap ul").css('display', 'none');
            });
        });
    </script>
    <asp:ContentPlaceHolder ID="headContent" runat="server"></asp:ContentPlaceHolder>
</head>

Then in my aspx page I call the datepicker widget as follows:

$(".Datepicker").each(function () {
            $(this).datepicker();
        });

That piece of jquery is inside the document.ready() function.
I checked both firefox and chrome’s console to see if there was any error with my javascript and no problems were visible.
Whenever I click the textboxes which gained the “hasDatepicker” class due to that function, nothing happens and I get no message from the console at all.

Does anyone know why this happens?

EDIT:

This is how it looks in the DOM –

enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your call won’t have any problems. You can further shorten the call like this.

    $(document).ready(function() {
    $(".Datepicker").datepicker();
});

    And the presence of hasDatepicker shows that jquery ui is indeed loaded.

    Check these things.

    1. Why should you call this? /content/js/jquery.ui.datepicker.js This is not needed at all. It might be overriding the datepicker function inside the /content/js/jquery-ui-1.8.15.custom.min.js. Please remove it.

    2. Also check if the css is loading correctly in the firebug console’s NET Tab

    3. Comment /content/js/jquery.message.min.js and check if this file is the culprit.

    One of these checks would do it.

    • 0