Search code examples
jqueryasp.netuser-interfacemaster-pages

JQuery UI not working with Master Pages


I've successfully made JQuery work with Master Pages, but not JQuery UI.My header in the master page looks like this:

<head runat="server">
<title>Analytics</title>
<link href="~/css/PageElements.css" rel="stylesheet" type="text/css" runat="server"/>
<link href="~/css/FormElements.css" rel="stylesheet" type="text/css" runat="server"/>
<link href="~/css/Buttons.css" rel="stylesheet" type="text/css" runat="server"/>
<link href="<%# ResolveUrl("~/css/smoothness/jquery-ui-1.8.9.custom.css") %>" rel="Stylesheet" type="text/css" />
<script type="text/javascript" src="<%# ResolveUrl("~/Scripts/jquery-1.4.4.min.js") %>" />
<script type="text/javascript" src="<%# ResolveUrl("~/Scripts/jquery-ui-1.8.9.custom.min.js") %>" />

<script type="text/javascript">
    jQuery.noConflict();  <%--This should avoid conflicts Ajax Control Toolkit--%>
</script>

<asp:ContentPlaceHolder ID="HeaderPlaceHolder" runat="server" />
</head>

And in the content page, I created a VERY simple script to load the Date Picker, as per JQuery UI demo page. I always get a 'Microsoft JScript runtime error: Object doesn't support this property or method'. Here's my content page:

<asp:Content ID="MainContent" ContentPlaceHolderID="MainPlaceHolder" runat="server">
<script type="text/javascript">
jQuery(document).ready(function () {
    jQuery('#<%=btnSubmit.ClientID %>').click(function () {
        alert("Hello world!");
    });

});
</script>

<script type="text/javascript">
    jQuery(function () {
        jQuery('#<%=datepicker.ClientID %>').datepicker();
    });
</script>

<div class="demo">

<p>Date: <asp:TextBox runat="server" ID="datepicker" /></p>

</div>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" />
</asp:Content>

The CSS folder is in place, and pure JQuery calls work. This simple datepicker is not working with this master page / content setup. I've tried many combinations for the datepicker ID, using ClientID (as is), UniqueID, [id$=datepicker], etc.

Can someone shed a light on this? What am I missing?


Solution

  • Don't use self closing tags for <script> Why don't self-closing script tags work?