Response title
This is preview!
jQuery UI: model dialog 'close'
in Using jQuery UI
•
3 months ago
Hi, I have 2 Razor Views where one is loading the other in a jQuary UI Dialog.
In the view that get loaded in the Dialog; I'am opening another jQuary UI Dialog to display a message.
The objective is to close both the dialogs when message dialog Cancel button is clicked.
Razor code is as follows:
1. Main View
- <button id="openModel" onclick="openModel()">
- <div id="mainDialog" />
- <script type="text/javascript">
- function openModel() {
- $('#mainDialog').dialog({
- open: function () {
- // loading "the secondary view in the model dialog"
- // url: controller-action url to load the second view
- $(this).load('[url]');
- }
- });
- }
- </script>
2. Dialog View
- <button id="messageOpener">Verify</button>
- <div id="messageDialog" />
- <script type="text/javascript">
- $(document).ready(function () {
- $("#messageOpener").click(function () {
- $("#messageDialog").dialog("open");
- return false;
- });
- $("#messageDialog").dialog({
- buttons: {
- Retry: function () {
- $(this).dialog("close");
- },
- Cancel: function () {
- // **** ?? must close both dialogs. ****
- }
- },
- autoOpen: false,
- });
- });
- </script>
I have tried following approaches to close the dialogs:
Approach 01:
- $(".ui-dialog-content").dialog("close");
Approach 02:
- $(this).dialog("close");
- $("#mainDialog").dialog("close");
Approach 03:
- $(".ui-dialog:visible").find(".dialog").dialog("close");
But all above does not close the dialogs as expected instead produces the following JS-error:
Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'
v.extend.error
(anonymous function)
v.extend.each
v.fn.v.each
e.fn.(anonymous function)
$.dialog.buttons.Cancel
r.click
v.event.dispatch
o.handle.u
Can you please help.
Thanks.
1
