Solved

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

Posted on 2014-12-27
12
400 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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 83

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
Report: Liquid Web beats Amazon, Rackspace & More

A study by performance analyst firm Cloud Spectator finds that Liquid Web beats rivals Amazon, Rackspace and DigitalOcean when it comes to website and cloud application performance.

 
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
 

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

Industry Leaders: 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!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
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…

737 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