Hello,
I have one modal dialog in my application that works very nice. I do setup and open of the dialog with the following functions
$(document).ready(function () {
$("#__gsl_DialogPanel").dialog({
autoOpen: false,
resizable: false,
position: 'center',
stack: true,
height: 'auto',
width: 'auto',
modal: true
});
});
function loadDialog(action, id, title, onCloseHandler) {
$("#__gsl_DialogPanel").dialog("option", "title", title);
var url = action;
if (id != "") url = url + "/" + id;
$.ajax({
type: "get",
dataType: "html",
url: url,
data: {},
success: function(response) {
$("#__gsl_DialogPanel").html('').html(response).dialog('open');
}
});
}
Now I have the requirement to open another dialog from a button that's inside the previous dialog. I have created another div ("__gsl_DialogPanel_2L") and cloned the setup and open function referring to the new dialog as in the following code
$("__gsl_DialogPanel_2L").dialog({
autoOpen: false,
resizable: false,
position: 'center',
stack: true,
height: 'auto',
width: 'auto',
modal: true
});
function loadDialog2L(action, id, title, onCloseHandler) {
$("#__gsl_DialogPanel_2L").dialog("option", "title", title);
var url = action;
if (id != "") url = url + "/" + id;
$.ajax({
type: "get",
dataType: "html",
url: url,
data: {},
success: function (response) {
$("#__gsl_DialogPanel_2L").html('').html(response).dialog('open');
}
});
}
The problem is that the second dialog does not open at all. I have checked with Chrome Developer tools and I can see that the div contains the right HTML that has been received from the ajax call but still has "display: none" in its style property.
Where I am doing wrong?
Update:
These are the div's used. They are in the master page immediately after the BODY tag.
<!-- Generic Dialog Panel -->
<div id="__gsl_DialogPanel" style="display:none" title=""></div>
<!-- 2 Level Dialog Panel -->
<div id="__gsl_DialogPanel_2L" style="display:none" title=""></div>
2nd Update:
I have created a simplified sample on JSBin. You can find it here. Any help?