Question

From what I have played around with JQuery Dialog, I made an observation that the elements inside the dialog have some hard time trying to ‘load’ properly.

Scenario:

1) I clicked a button to load a dialog.

2) The dialog has a save button, a close button, and 2 textboxes, 1 which is linked to Jquery’s datepicker. Another is a textbox that is [Required].

From the save button, I have the behavior of:

$.validator.unobtrusive.parse("#EventManage");

It seems that:

1) The datepicker doesn’t work instantly. Instead I have to close the dialog, and open it a few times in order to make it work.

2) If I click save, and the validation sometimes doesn’t work at all. It takes a close of the dialog a few times to make it work as well, sometimes.

3) If that validation works by showing an error, the datepicker no longer works.

4) on the first run, the dialog seems to take a pretty long time to load.

Any ideas why is the behavior so strange?

EDIT

Firebug showing me stuff:-

DateTime:-
i is undefined function(f){f=a(f.target).closest(“but…d(“a”).removeClass(“ui-state-hover”);

Button not able to pass through any validation nor submit form:-
$.validator.unobtrusive $.validator.unobtrusive.parse(“#EventManage”);

Clicking any textbox and then clicking elsewhere:-
c.validator.methods[e] is undefined [Break On This Error] prepareElement:function(a){this.reset(…tion occured when checking element “+

EDIT

Seems like the cause is due to dual referencing of the js files.

The features seem to working properly. However, I am encountering the datepicker showing but unable to pick any date at all. Any ideas? 🙂

EDIT 3

I think I found the issue. I have a datepicker setDefaults that sets the date to maxdate:0 in my main layout. Now i am setting the datepicker within the dialog’s partial cshtml to be minDate: 1. how do i override the layout’s datepicker?

SOLVED: just need to set maxDate: null. phew!

Answer 1

Everytime you update the DOM and replace the corresponding input field of the datepicker, the same way you are reattaching the unobtrusive client side validation, you should re-attach the datepicker: $('.datepicker').datepicker();.