• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 530
  • Last Modified:

Why jquery datepicker won't work in asp.net?

Hi, I'm using vs2012.
I have a project made from asp.ent web form project template.  I put a textbox in the the derault.aspx. I would like to have a datepicker, jquery plugin, to pop up when the textbox is clicked. But nothing happens when I click on it.  Also, it's expecting a parameters when calling datepicker and intellisence shows lots of selection.  Can I leave it blank?  Will the value selected from the datepicker automatically be put in the textbox?  
Attached is the site.master and default.aspx and default.cs.
Site.Master
Default.aspx
Default.aspx.cs
0
lapucca
Asked:
lapucca
1 Solution
 
Dao NguyenCommented:
1. you can use default datepicker
$("#textboxid").datepicker()

2. you can use datepicker with more option
$( "#textboxid" ).datepicker({
  beforeShowDay: $.datepicker.noWeekends
   ...
});
0
 
Dave BaldwinFixer of ProblemsCommented:
Jquery doesn't runat="server".  You need to look at the "View Source" in your browser to see what the jquery code sees.  You should not see runat="server" anywhere in the "View Source" in your browser.
0
 
lapuccaAuthor Commented:
I use just the default and it still won't work.  
    $(function () {
        $("#<%= TextBox1.ClientID %>").datepicker();
    });
I don't see the runat=server in source, which I'm attaching here.  I used jQuery before with asp.net but never had this much problem getting it to work.  Thank you.
datepicker-Source.html
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
GaryCommented:
Your code as is works fine - click into the textbox and you get the datepicker calendar popup
But you have multiple jquery libraries on the page which can cause problems
jquery-1.8.2.js
and
https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js

Ditto for the jQuery UI

Remove the jQuery v1.8.2 version and the jQuery UI v1.8.24.js from your code.

Also you have other Js scripts included which may be breaking it

The best thing to do is create an online demo of the page where all the extra scripts are included.
0
 
lapuccaAuthor Commented:
I moved the jQuery ref back to site.master head section.  I also removed the jQuery ref generated by asp.net web form template, these 2 lines of code were in the site.master file under the script manager.
           <asp:ScriptReference Name="jquery" />
            <asp:ScriptReference Name="jquery.ui.combined" />
But still  nothing happens when I click on the textbox.
I'm attaching the new source code page, site.master and the default.aspx
datepicker-Source-2.html
Site.Master
Default.aspx
0
 
lapuccaAuthor Commented:
I also tried the other way around. I removed the 3 lines of jQuery ref in the head section and just used the asp.net built-in jQuery ref but that doesn't work either.  Nothing happens when I click on the textbox.  This is pretty crazy stuff with VS2012 trying to add in all these jQuery and other jscript ref that is breaking the code.
If you look at the site.master file, there are a bunch of script ref under the Scriptmanager tag.  I don't know what exactly I can remove.  This came with asp.net web form project template.
0
 
lapuccaAuthor Commented:
Gary,
You're correct.  I just created an empty asp.net project and the calendar easily come up.  In my project I only have a gridview control on my page.  What can I remove under the scriptmanager on the master file?   I see there is a gridview js in there.  Also, should I just use the built-in jQuery or ref my own?
Thank you.
0
 
GaryCommented:
So if you remove the gridview from your test project it works but when you add it then it stops working?
Sometimes just changing the order of the script loading can fix things
So try putting your jquery stuff after your asp:ScriptManager block
0
 
lapuccaAuthor Commented:
In my project there is a gridview control  In the test projects, there is no gridview control, just text box for testing.  
The test project that works is creating using the Empty asp.net application and it has no scripting bundle created for it.  

I can only put my jquery script in the aspx page after the page content tag because having to ref the textbox control ClientID and it won't work in the site.master page where Script manager tag is.
0
 
GaryCommented:
You can move the jQuery js files though, that doesn't affect anything else, so they are after all your other js scripts.
0
 
lapuccaAuthor Commented:
Okay, got it to work in both Chrome and IE, however, getting the following error in Firebug when I run it in Firefox.
uncaught exception: Missing instance data for this datepicker
The Web Console logging API (console.log, console.info, console.warn, console.error) has been disabled by a script on this page.

What I did is remove the jQuery ref in the Script Manager and put the jQuery ref in the Head section of the site.master file.  How to get rid of this problem in Firefox?
Site.Master
Default.aspx
0
 
lapuccaAuthor Commented:
Thank you.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now