CODEWITHSUNDEEP
asp.netjquery-ui
Michael
Michael

Reputation: 4090

ASP.NET jQuery Datepicker Issue - What am I missing?

This was working on Friday, and now isn't. I've got this at the beginning of a UserControl:

<link type="text/css" href="/App_Themes/css/ui-lightness/jquery-ui-1.8.11.custom.css" rel="stylesheet" />
<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-1.8.11.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#MainContent_ucSearchControl_dpPickupStart").datepicker();
        $("#MainContent_ucSearchControl_dpPickupEnd").datepicker();
});
</script>

And further down, this:

 <td><asp:TextBox id="dpPickupStart" runat="server"  style="width: 65px"/></td>
 <td><asp:TextBox id="dpPickupEnd" runat="server" style="width: 65px"/></td>

Which results in (in the rendered page) input controls with:

name="ctl00$ctl00$MainContent$ucSearchControl$dpPickupStart" id="MainContent_ucSearchControl_dpPickupStart"
name="ctl00$ctl00$MainContent$ucSearchControl$dpPickupEnd" id="MainContent_ucSearchControl_dpPickupEnd"

And yet, every time the page loads, I get an Object Expected javascript error which points to the $(document).ready location.

What am I missing?

EDIT: Firebug is reporting that: $ is not defined [Break On This Error] $(document).ready(function () {

Upvotes: 1

Views: 1625

Answers (2)

Swaff
Swaff

Reputation: 13621

Being a user control you cannot guarantee that the relative path to your JS files will always be correct depending on the location of the parent page in the file system hierarchy.

Therefore change you JS script tags as follows to use the Control.ResolveUrl method which converts a URL into one that is usable on the requesting client.

<script src='<%=ResolveUrl("~/Scripts/jquery-1.5.1.min.js")%>' type="text/javascript"></script>
<script src='<%=ResolveUrl("~/Scripts/jquery-ui-1.8.11.custom.min.js")%>' type="text/javascript"></script>

Or reference from a CDN for added performace bonus of caching.

jQuery hosted on google
jQuery UI hosted on google

Upvotes: 2

Raja
Raja

Reputation: 3618

That error is caused due to Jquery not available. I think Swaff's solution should work(+1). Check if you have the Jquery-1.5.1.min.js file is available in Scripts folder of your solution. Or it could also be that your Scripts folder is renamed.

HTH.

Upvotes: 0

Related Questions