• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3675
  • 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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

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