jQuery datepicker only works once and is not shown the second time

Question

ASP.NET MVC3 / jQuery 1.9.1 / jQuery UI 1.10.2

I've got a page on which I open a modal dialog after clicking on an Ajax.ActionLink. Inside this dialog I have an input field and a datepicker associated with it. When I open the dialog for the first time, I can click on the datepicker button (or inside the associated input field so it receives focus, showOn is set to both), and the datepicker shows as expected. I can, while the modal dialog is open, do it as often as I want to, the datepicker shows every time. When I close the modal dialog (via an attached $("ui-widget-overlay").click(function(){...}); and then open it again, the datepicker no longer works, no matter whether I try to click on the button or into the associated input field.

I tried to debug the jQuery code, and both times the lines of code being run are the same (and even though the datepicker doesn't show up the second time the dialog is opened, the jQuery methods are triggered) from what I can see in the debugger. I'm completely stumped, and the methods described in this post only helped in terms of being to show the datepicker the first time the dialog opens. Another post only seems to be related to a misunderstanding how the showOn setting works.

I also tried to destroy the datepicker via $("#datepicker").datepicker("destroy"); when closing the dialog - to no avail. Any ideas?

Update

On the "calling page":

$(document).ready(function () {
    $("#popupDialog").dialog(
    {
        autoOpen: false,
        modal: true,
        open: function()
        {
            $("ui-widget-overlay").click(function()
            {
                $("#popupDialog").dialog("close");
            }
        }
    });
});
[...]
@Ajax.ActionLink( "Some text", "Action", "Controller", new AjaxOptions {
    HttpMethod = "GET",
    UpdateTargetId = "popupDialog",
    InsertionMode = InsertionMode.Replace,
    OnSuccess = "openPopup()"
})
[...]
function openPopup()
{
    $("popupDialog").dialog("open");
}
[...]
<div id="popupDialog" style="display: none;"></div>

The controller action is very simple and as follows:

public ActionResult Action()
{
    MyActionModel myActionModel = new MyActionModel();
    return PartialView( myActionModel );
}

Answer 1

After more debugging and attempts to trace jQuery events, I tested whether the problem existed with jQuery UI 1.9.2, which it didn't. Then I compared the relevant datepicker code lines which did not involved too many actual changes.

To put a long story short, the problem described in my question above could be fixed by changing a single line of code back from 1.10.2 to what it was in 1.9.2:

1.10.2 causing problems

/* Initialise the date picker */
if (!$.datepicker.initialized) {
    $(document).mousedown($.datepicker._checkExternalClick);
    $.datepicker.initialized = true;
}

1.9.2. version, working as expected

/* Initialise the date picker */
if (!$.datepicker.initialized) {
    $(document).mousedown($.datepicker._checkExternalClick)
        // !!!!!!!!!!
        // The next code line has to be added again so that the date picker
        // shows up when the popup is opened more than once without reloading
        // the "base" page.
        // !!!!!!!!!!
        .find(document.body).append($.datepicker.dpDiv);
    $.datepicker.initialized = true;
}

I'm still not sure why this behaviour exists, but it seems to be a relatively rare constellation. As a note: I didn't "reinitialize" the datepicker after opening the popup dialog (or requesting the PartialView via AJAX), so having a single script source as part of the _Layout.cshtml is sufficient. Hope this helps someone else.

Answer 2

I had the same problem, and I solved with

$("#ui-datepicker-div").remove();

after closing and destroying the popup.

Answer 3

What worked for me was -

Inside the dialog, if I have multiple inputs with class datepicker , then

$(".datepicker").removeClass('hasDatepicker').datepicker();  

Basically, to remove the class hasDatepicker before initializing datepicker again.

I was on version 1.8.18 of jquery.ui.datepicker

Answer 4

It is opened via an Ajax.ActionLink which updates a target id (div) via the UpdateTargetId property. The controller action returning the contents for the modal dialog queries a web service and then returns a partial view with a populated model.

then you need to call the datepciker function again after the partial view is populated... inside callback function of ajax(if you are using that)...

 $.ajax({
    success:function(){
        //your stuff
       $("#datepicker").datepicker();
     }
 });

datepikcker won't be able to call a function for dynamically added element... since your target div is not present at the time when the datepicker is first called... you need to call the datepicker function again for if to work for added target DIV

updated

  OnSuccess = "openPopup()"
  .....

 function openPopup(){
   //your codes
    $("#datepicker").datepicker(); //call date picker function to the added element again
}

Answer 5

I had a similar problem, but what happened to me was that the second time the dialog was loaded, the datapicker didn´t take the value.

The problem was that I was loading a second time the dialog and these cause problems. The solution was to remove the dialog after close it, something like:

  $("#popupDialog").dialog("close");    
  $("#popupDialog").remove();

I hope this helps anyone!

Answer 6

You can do this by adding a new function to div onclick="focusBlur()"

<script>
    function focusBlur() {
        $('input').blur();
    }
</script>

Answer 7

I wanted to re-inititalise the date picker after modal close as the values selected during the first trial for setting of the dates were still there. So i dont know why but the following code doesnt work for me.

$(selector).datepicker("refresh") 

The above line mentioned in the documentation didnt help!.

Following is something which i tried, i.e to destroy and reinititalise the date picker objects.

$('#addPromoModal').on('hide.bs.modal', function(event) {
$("#startDate").datepicker("destroy");
$("endDate").datepicker("destroy");
initialiseDataPicker(); }

Here is my initialise function :

function initialiseDataPicker(){

 $( "#startDate" ).datepicker({
    defaultDate: "+1w",
    showWeek: true,
    firstDay: 1,
    changeMonth: true,
  //  numberOfMonths: 3,
   onClose: function( selectedDate ) {
     $( "#endDate" ).datepicker( "option", "minDate", selectedDate );
   }
 });
 $( "#endDate" ).datepicker({
     defaultDate: "+1w",
    showWeek: true,
    firstDay: 1,
    changeMonth: true,
  //  numberOfMonths: 3,
   onClose: function( selectedDate ) {
     $( "#startDate" ).datepicker( "option", "maxDate", selectedDate );
   }
 });
 }

Hope That helps! RA

Answer 8

btw i will try to explain the way i solved it, cause i think is easier this way.

im not an expert in this matters, so forgive me if I do not use the correct terms to explain it.

if u have 2 places in the same page u want to load datepicker, u got to duplicate the function:

$(function() {
    $( "#datepicker" ).datepicker({
      showOn: "button",
      buttonImage: "images/calendar.png",
      buttonImageOnly: true,
      buttonText: "Select date",
      addClass:".ccCFcalV2"
    });    
});       

$(function() {
    $( "#datepicker2" ).datepicker({
      showOn: "button",
      buttonImage: "images/calendar.png",
      buttonImageOnly: true,
      buttonText: "Select date",
      addClass:".ccCFcalV2"
    });
});

and add the class "datepicker2" to the second place u want to call the datepicker. it works, almost for me

Hope it helps someone, if u consider this a dumb solution, let me know and i'll remove it

have a nice day!

Answer 9

If you need to show more than one time in the same view the calender and it only show's one time try this:

document.getElementById("div_Validade").onclick = function () { SetZIndex() };

function SetZIndex() {
    document.getElementById("ui-datepicker-div").style.zIndex = "999999";
}

div_Validade corresponds to the div id where the input is placed,

ui-datepicker-div is infragistics element that is not shown.

Answer 10

initialize the datepicker on ajax success method.