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

Datepicker not working

I am looking help again.
I am trying to use JQuery datepicker and as far as I can see I following all examples word for word but nothing is happening.
Here are the scripts I am using (I also have a jstree)
 <link href="/Content/Site.css" rel="stylesheet" type="text/css" /> 

    <script src="../../Scripts/Dialog/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="../../Scripts/Dialog/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>    
    <script src="../../Scripts/jsTree/_lib/jquery.js" type="text/javascript"></script>   
    <script src="../../Scripts/jsTree/_lib/jquery.jstree.js" type="text/javascript"></script>
    <script src="../../Scripts/jsTree/_lib/jquery.cookie.js" type="text/javascript"></script>    
    
    <link href="../../Scripts/jsTree/jstree.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/blitzer/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" />

Open in new window

and then in my Master page I have
$(document).ready(function() {
       $(".date").datepicker();
            });

Open in new window

and in my partialView which is loaded through Ajax, I have
<%= Html.TextBoxFor(model => model.Date, new { id = "datepicker", @class = "date" })%>

Open in new window

When I go into the textbox nothing happens but when I search firebug it gives the error
TypeError: $(...).datepicker is not a function

Open in new window


I also tried using $("#datepicker").datepicker();
but get the same error
0
Niall292
Asked:
Niall292
  • 6
2 Solutions
 
Rainer JeschorCommented:
Hi,
how do you load your partial view through ajax?
In the success/complete event you have to run
$(".date").datepicker();

Open in new window

again - as the DOM was not there when you run the initial document.ready.

HTH
Rainer
0
 
Niall292Author Commented:
Yes,
I load my partial view by Ajax.

I will try this first thing in the morning and let you know how I get on

Thanks
0
 
Niall292Author Commented:
I couldn't wait until tomorrow.

I put the line into the function like
  function getAddDeviation() {          
            $.ajax({            
                type:"GET",
                url:"/Deviations/Create/" + TreeId,
                success: function(content) {  
//                    $("#hdnfld").val(TreeId);
                    $(".date").datepicker(); 
                    $("#tableVW").empty();
                    $("#dinput").html(content);  

Open in new window

but now when I try to open the partialview nothing happens but I get the same error in Firebug.
0
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!

 
Niall292Author Commented:
Something that might make a difference, (I'm not sure)

I open the a partial view in the  but then the Input fields are loaded as a partial view in that partial view.
I'm not sure if that might cause an issue but it was the only way I could think of doing what I was trying to accomplish
0
 
Hiran DesaiSolution ArchitectCommented:
What I can say is,
1) Open chrome -> load your page
2) press F12 (which will open inspector window) / you can also use firebug
3) Check Resources tab
4) Are you having two jQuery.js files? (doesn't matter versions)
 in Your code folllowing line
<script src="../../Scripts/Dialog/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="../../Scripts/Dialog/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>    
    <script src="../../Scripts/jsTree/_lib/jquery.js" type="text/javascript"></script>

Open in new window


First line references to jQuery file and third file also references to the same(Correct me if I'm not wrong).

jquery-1.9.1.js file has declaration of $ function
jquery-ui-1.10.3.custom.min.js extends $ function
jquery.js again declares $ function which will overwrite the extended functionality and hence UI functions won't be available.
0
 
Niall292Author Commented:
Thanks for the response but I have now removed Jquery.js and it seems to make no difference

In Chrome Resources > scripts it shows

jquery-1.9.1.js
jquery-ui-1.10.3.custom
jquery.cookie.js
jquery.jstree.js

and put $(".date").datepicker(); in my ajax call but still nothing
0
 
Niall292Author Commented:
I rearranged the scripts and it started working, so thank you all for your help and I will divide the points out.

Thank you again
0
 
Niall292Author Commented:
I think it was a combination of the 2 answers. Putting the $(".date").datepicker(); in my ajax call and removing the extra js file. Then also putting the files in the right order and it worked
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

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