no

Add a jquery datepicker on jquery dialog box via load method

Recently I've worked on a form that requires a jquery datepicker to be rendered inside jquery's dialog element. Where I encountered ...

Recently I've worked on a form that requires a jquery datepicker to be rendered inside jquery's dialog element. Where I encountered several problems like:
1.) datepicker() should be invoke inside dialog
2.) the dialog created (div) should be remove from the page body


How I load the dialog using jquery's load method:
// Generate a unique id for the dialog div
        var dialogId = 'uniqueName-' + Math.floor(Math.random() * 1000)
        var dialogDiv = "
"; // Load the form into the dialog div $(dialogDiv).load(this.href, function () { $(this).dialog({ modal: true, resizable: false, title: dialogTitle, buttons: { "Save": function () { // Manually submit the form var form = $('form', this); $(form).submit(); }, "Cancel": function () { $(this).dialog('close'); } }, open: function (event, ui) { if ($('input.date-picker').length > 0) { $('input.date-picker').datepicker({ showOn: "button", buttonImage: "/Content/images/calendar.gif", buttonImageOnly: true }); } }, close: function (event, ui) { $('input.hasDatepicker').datepicker("destroy"); $(this).dialog("destroy"); $(this).remove(); } });

Related

web 5598742602971524129

Post a Comment

2 comments

Anonymous said...

I have been looking everywhere for this solution. Thanks.

Damiano Venturin said...

thank you! thank you! thank you! I was looking forward for a solution for this problem since hours.

In my tests though,

$('input.hasDatepicker').datepicker("destroy");
$(this).dialog("destroy");

are not necessary.

$(this).remove();

is enough but I don't understand what it does and why it works.

Do you have any idea?

item