JQuery Datepicker Pops Up On Dialog Open

The following issue is observed in UI 1.7.2, jquery v1.3.2

I have a text input on the dialog as the first tabbable control, and it is also a date input field, so there is a datepicker attached to it, the issue is whenever the dialog opens, the datepicker will be activated, we would like the datepicker to be opened when the date field actually gets the cursor focus rather than the dialog focus.

I have tried to hide the datepicker after the dialog open, using following piece of code


  $("#datefield").datepicker("hide");

This does not work due to some timing issues, and it can leave your datepicker detached from the underline input control, and becoming orphaned, so be very careful to use the hide function, I would recommend you to wrap a condition around hide like this


      if ($.datepicker._datepickerShowing) {
                    $("#datefield").datepicker("hide");
      }

As the datepicker control is implemented using singleton, it is a very difficult task to manage status for various different instances. So the detached datepicker screen is a big issue for this version.

The timing issue is you have to hide the box only after it is displayed, and there is no safe way to tell if the datepicker box is already shown. I tried to add a bit of delay


      setTimeout("$('#datefield').datepicker('hide');", 500);
      }

Then I ended up with not knowing how long it should actually wait, if you wait long enough, the datepicker will be closed, but user will notice the whole cycle of box open then close.

So hiding the datepicker window looks a dead end to me.

I also tried to change the focus to other controls on the dialog, the datepicker box keeps coming up.

As usual the answers of these questions are buried in the source code.

Here is the function of jquery dialog open:

open: function() {
   //....
  // set focus to the first tabbable element in the content area or the first button
  // if there are no tabbable elements, set focus on the dialog itself
  $([])
	.add(uiDialog.find('.ui-dialog-content :tabbable:first'))
	.add(uiDialog.find('.ui-dialog-buttonpane :tabbable:first'))
	.add(uiDialog)
	.filter(':first')
	.focus();

	this._trigger('open');
}

So you can see that the first tabbable control which is our datepicker is always focused before the open event is handled. That explained why the shifting focus to another control in the open event is not working, it is because the datepicker has already got the focus before you change focus to another control.

But it prompted a perfect solution to me of this problem, that is before the dialog open, to disable the datepicker , and in the open event handling, to enable it again, the datepicker will just miss the part of tabbable setfocus brought on by dialog open.

Here is the code that sums up my solution:
1.Instantiate the datepicker


 $("#datefield").datepicker({ showOn: 'both' });
// to avoid the datepicker hiding behind the dialog	
 $(".ui-datepicker").css({ 'z-index': 1003 });

 

2. Declare the dialog

  $("#dialog1").dialog({
                bgiframe: true,
                modal: true,
                autoOpen: false,
                width: 880,
                open: function () {
  		    // to re-enable the disabled datefield
                    $('#datefield ').removeAttr("disabled");

                },
                close: function () {
                    if ($.datepicker._datepickerShowing) {
                        $('#datefield').datepicker('hide');

                    }
                }

            });

A note about the close event handling, in some case, the datepicker box will be detached from the input, it ends up a sticking calendar on your screen, and only way to get away with it is to refresh the page. To replicate this, you can open a dialog with datepicker, then activate the datepicker box, if you go straight to close the dialog, the datepicker will stay open and detached.
The close event in above code will prevent that to happen, and it ensures that when the parent dialog is closed, the calendar will be closed as well.

3. To open the dialog without activating the datepicker

// to disable it to avoid getting focus    
$('#datefield').attr("disabled", true);

 var dialogedit = $("#dialog1").dialog('open');

 // this is to enable asp button to post back
  dialogedit.parent().appendTo(jQuery('form:first'));
 

A note about the appendto handling, as default, jquery dialog is created outside of any form, if you want to trigger the asp.net web form postback from this dialog, this line will do it.

Tags:

This entry was posted on Monday, August 30th, 2010 at 10:55 pm and is filed under Javascript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

9 Responses to “JQuery Datepicker Pops Up On Dialog Open”

  1. Lucas says:

    Thx dude, this helped a lot!!!

  2. Rekha says:

    Thank you very much it helped alot

  3. Finnoid says:

    It’s all good for Kiwis.

  4. Anonymous says:

    JQuery sets the autofocus on the first input that is found.
    So play it sneaky by creating a “fake” input at the first line of your dialog like that:

    So your input will be out of the window and have the focus. Problem solved for me ;p

  5. Pawan says:

    Hi,

    I have created a pop up form in which I have used date option and when I called the same, the background of the same gives a trasparent look. Please let me know any resolution

  6. Kitty says:

    Heya i am for the primary time here. I found this board and I find It truly helpful & it helped me out
    much. I’m hoping to offer one thing back and help others such as you aided me.

  7. Everardo says:

    Thanks a lot, it was really helpful.

Leave a Reply

*