i'd appreciate your help with this one. I've been searching for a fix for hours now and I just can't get it to work.
I have two files "editor.php" and "functions.php".
So I got this Jquery UI datepicker, which I am initializing and giving the holding textfield an unique ID in the editor.php
$(function() {
$('input[name=Date]').attr('id', 'Date' + '_' + $("#Id").val());
$("#Date_" + $('#Id').val()).datepicker({
dateFormat: "dd.mm.yy",
changeMonth: true,
showWeek: true
});
}
My Dialog opening function is in the functions.php
function openDialog()
{
var customDialog = $('#customDialog').dialog( {
open: function () {
$('body').addClass('stop-scrolling');
$('.ui-widget-overlay').addClass('custom-overlay');
},
beforeClose: function () {
$('body').removeClass('stop-scrolling');
$('.ui-widget-overlay').removeClass('custom-overlay');
},
autoOpen: false,
modal: true,
show: {
effect: "fade",
duration: 400
},
hide: {
effect: "fade",
duration: 400
},
} );
customDialog.load('editor.php');
customDialog.dialog("open");
}
And also in that functions.php i got the div which is holding the Dialog
<div id="customDialog" title="Editor"></div>
My Dialog has a form in it which I am building in the editor.php. The Dialog and my form data Shows up properly. Now I have a datepicker on one of my textfields in that form which works fine within that Dialog.
Now i have a link in that Dialog, which opens another Dialog and Closes the old one, which works fine aswell. My Problem now is, that the datepicker will no longer Show up, but I am sure it is there, because i can click in it and press enter and the current date will Show up on that textfield.
I found out that my old dialogs aren't being closed properly and my datepicker is always bound to the date-textfield in my first Dialog (even if i can't see the Dialog anymore).
$("#customDialog").dialog('close');
this did not work : "cannot call methods on dialog prior to initialization; attempted to call method 'close'" shows up. So i used following code which kinda worked (but I am sure it isn't being closed properly and is still somewhere hidden)
$('.ui-dialog-titlebar-close').click()
Changing z-index of datepicker-ui to something very high did not help
My question is: What is the proper way to Close a Dialog. I can't get $("#customDialog").dialog('close');
to work
Please ask if anything is unclear. Thank you in advance!
EDIT:
added missing apostrophe in customDialog.load('editor.php'); and edited question to make it more clear
Ok i found the solution to this. I hope it helps someone in need. I am using Jquery 1.11.1 and it seems that there is a line of code missing in the jquery-ui.js file. You need to add this one line to your jquery-ui.js in that specific place. It will re-initialize your datepicker even if you don't refresh your page.
/* Initialise the date picker. */
if (!$.datepicker.initialized) {
$(document).mousedown($.datepicker._checkExternalClick)
.find(document.body).append($.datepicker.dpDiv); // added line
$.datepicker.initialized = true;
}