Solved

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

Posted on 2014-12-27
12
305 Views
Last Modified: 2015-01-05
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
Comment
Question by:lapucca
12 Comments
 

Expert Comment

by:Dao Nguyen
ID: 40520003
1. you can use default datepicker
$("#textboxid").datepicker()

2. you can use datepicker with more option
$( "#textboxid" ).datepicker({
  beforeShowDay: $.datepicker.noWeekends
   ...
});
0
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 40520014
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
 

Author Comment

by:lapucca
ID: 40520096
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
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 40520102
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
 

Author Comment

by:lapucca
ID: 40520115
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
 

Author Comment

by:lapucca
ID: 40520125
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:lapucca
ID: 40520131
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
 
LVL 58

Expert Comment

by:Gary
ID: 40520467
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
 

Author Comment

by:lapucca
ID: 40520910
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
 
LVL 58

Expert Comment

by:Gary
ID: 40520916
You can move the jQuery js files though, that doesn't affect anything else, so they are after all your other js scripts.
0
 

Author Comment

by:lapucca
ID: 40520955
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
 

Author Closing Comment

by:lapucca
ID: 40531923
Thank you.
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now