I am having some difficulty getting the Jquery UI dialog widget to play nicely within a web part. I have the following code:
function initiateModalDialog(selector) {
//Initiates the dialog widget
$('#' + selector).dialog({
autoOpen: false,
bgiframe: true,
draggable: false,
width: 600,
resizable: false,
modal: true,
overlay: { opacity: 0.2, background: "black" }
});
}
This initiates my dialog and then I use two simple functions to show and hide the dialog.
//Opens the selected div as a modal dialog
function openModalDialog(selector) {
//Opens the dialog
$('#' + selector).dialog('open');
//Appends the dialog to the ASP.Net form to allow postbacks
$('#' + selector).parent().appendTo($("form:first"));
}
//Closes the selected div dialog
function closeModalDialog(selector) {
$('#' + selector).dialog('close');
}
As you can see I append the dialog to the asp.net form after it is opened, so that I can handle the controsl within it during postbacks.
The problem is that when the initiate code runs it appears to be breaking the DOM somewhere as if I try to edit the web part using the drop down menu I get the following javascript error:
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Trident/4.0; SLCC1; .NET CLR 2.0.50727; InfoPath.2; .NET CLR 3.5.21022; .NET CLR 3.5.30729; OfficeLiveConnector.1.3; OfficeLivePatch.0.0; .NET CLR 3.0.30618)
Timestamp: Tue, 16 Jun 2009 11:51:38 UTC
Message: 'MSOMenu_WebPartMenu' is undefined
Line: 401
Char: 1
Code: 0
URI: XXXXXXXX
Any ideas on how I can effectively initiate the dialog without causing the web part framework to break?
Thanks
Charlie