I can't get datepicker to work

Question

Hi, I need a field that displays the datepicker. I followed the example given by the JQuery UI documentation and haven't managed to get it to work. My html where I have my text field is:

<div class="editor-field">
                <input type = "text" name = "DatePublished" id = "Published" />
                <%= Html.ValidationMessage("DatePublished" ,"*") %>
            </div>

This HTML is in a partial view, lets call it pv.ascx, and it is called in the main page as a modal box:

<div id = "ModalBox">
                <% Html.RenderAction("pv", "Example"); %>
            </div>

The thing is, that I try to call the datepicker creation anytime I enter the main page, and I do it in my javascript file app.js:

 $().ready(function() {

    var place = window.location.pathname;
    var placesplit = place.split("/");
    //Depending on the location we are on, we execute different subroutines
    $('#Published').datepicker();

});

But nothing happens when I focus on the text field. What is wrong? Could it be that being called from a partial view it doesn't work?

Thank you everyone, vikitor

EDIT: I have updated the js, so it shows what I've added right now. It's very strange but $('#Published').datepicker(); doesn't generate an error on firebug even though in the other pages there is not such text field. How could this happen? I tried also with chrome debugger and also no errors, it looks as it is ignoring the method straight away. Then it only comes into my mind a stupid question, do I have to reference in my site.master some kind of datepicker.js library? Because I tried what you have told me and the method is there, it is only that it doesn't do anything about it. Strange isn't it?

EDIT2: I have been looking around and found that there is a problem using datepickers with modal dialogs....I've found that with:

1. Add this to the stylesheet

#ui-datepicker_div, .ui-datepicker { z-index: 1000; /* must be > than
popup editor (950) */ }

2. Modify the attribute of the dialog zIndex to 1:

$('#myDialog').dialog({
                        title: 'Datepicker on Dialog',
                        zIndex: 1
                }); 

But still it doesn't work for me....

Answer 1

jQuery will work fine whether it is called from a partial view or normal view - it's all rendered out as text in the end.

Running through a list of troubleshooting ideas:

1) Is jQuery referenced properly on the page that will be displaying this text box?

2) Is your app.js file referenced properly?

3) Is jQuery UI's javascript file properly referenced on the page? You can test this by alerting the function: alert($.fn.datepicker)

4) Are all of jQuery UI's CSS and Images in the appropriate locations, or do you need to update the CSS file with the proper urls to find the images?

5) Do you have any Javascript errors being reported by the browser?

6) Is the call to datepicker happening inside the .ready() event, or somewhere else?

Answer 2

Please check

1. if the jQuery library and jQuery ui are referenced correctly

2. make sure that $('#Published').datepicker(); is inside

   jQuery(document).ready(function () { });

3. Is your app.js file referenced properly?