1

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?

hcabral
  • 343
  • 1
  • 3
  • 8
  • I don't know but two suggestions: (1) why use ResolveUrl for the jquery-related css and js, but use static strings for the others? Why not just use static strings for the jquery-related resources also? Make sure to put the jquery resources in the physical path. (2) If you want to to diagnose, do "View Source" in the browser after it is loaded and you can see what `ResolveUrl` is resolving to. This may give you a hint to what you need to use for the path. – Cheeso Feb 08 '11 at 21:39
  • Not sure if this is really going to be too much help...but you can aim that jQuery using something other than id. If you set it with a class of "datepicker" you won't have to fight with the ClientID. instead, use $(.datepicker).datepicker(); – guildsbounty Feb 08 '11 at 21:40
  • you could also try `jQuery("[id$='datepicker']").datepicker();` and move the code to `jQuery(document).ready(function(){ /*date picker code here*/ });` – Aivan Monceller Feb 08 '11 at 22:20
  • The ResolveUrl is because I have modules under the root of the app, i.e., WM/ and PM/, both hosting different sets of files. The static links to CSS have a runat="server" attribute that will make IIS resolve the folder name accordingly. I will try using CSS instead of the textbox ID, though that's been tried before. – hcabral Feb 09 '11 at 03:22

2 Answers2

5

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

Community
  • 1
  • 1
Vadim
  • 17,897
  • 4
  • 38
  • 62
  • Thanks a lot. Incredible I couldn't find this solution before, now the plugins are working like a charm. – hcabral Feb 09 '11 at 03:28
0

The only way I found to get round this problem is to just add the script reference in the content page. I tried adding jqueryui the same way I add jquery, during pre-render. It just won't work.

cvanniekerk
  • 137
  • 1
  • 1
  • 7