A dialog buttons inside a dialog not working

[Alfred]

I open a new dialog which contains a script to open another dialog which has cancel and ok button.

Code:

function openDialog(){
   $('#perDialog').dialog({
        title: 'All Students',
        width: 900,
        height: 650,
        closed: false,
        maximizable:true,
        cache: false,
        href: 'Students/All'
}

Inside Students/All.php, I have the following script:

Code:

function Note(){
   $('#note').dialog({
        title: ' Write A Note',
        width: 500,
        height: 250,
        closed: false,
        maximizable:true,
        cache: false,
        href: 'Students/Form',
        buttons: [{
            text:'Save',
            iconCls:'icon-ok',
            handler:function(){
                saveNote();
            }
        },{
            text:'Cancel',
            iconCls:'icon-undo',
            handler:function(){
                $('#note').dialog('close');
            }
        }]
   });
}

When I run openDialog() to open  $('#perDialog') for the first time and run Note() to open $('#note') dialog, the Save and Cancel buttons are working fine. But If I close $('#perDialog') dialog and run openDialog() to open it, and open the  $('#note') dialog, the Save Button and Cancel Button in  $('#note') dialog are no longer working. What could be the problem? Please help.

[jarry]

When call 'openDialog' function, the 'Students/All' page is loaded and the '#note' dialog is created. When the 'perDialog' dialog is closed and opened, the 'Students/All' page is loaded again and the '#note' dialog is created again. The page exists multiple '#note' dialog components. To solve this issue, release the '#note' dialog when the 'perDialog' is closed. Please try this code.

Code:

$('#perDialog').dialog({
  title: 'All Students',
  closed: false,
  href: ...
  onLoad: function(){
    Note()
  },
  onClose: function(){
    $('#note').dialog('destroy')
  }
})

[Alfred]

This solves the problem. Before your solution arrived, I did this way:

   

Code:

 var dgContainer= document.getElementById('idcontain');
    h = document.createElement('div');
    h.setAttribute("id", 'dgid');
    dgContainer.appendChild(h);

Now I want a way to do the same with Easyui Desktop dialog. Please can you give me the code.

Thanks and regards.
Alfred

[jarry]

The 'onLoad' and 'onClose' still can be used to create or release the loaded dialog component.

Code:

$('body').desktop('openApp', {
	icon: 'images/win.png',
	name: 'About',
	width: 400,
	height: 200,
	href: ...,
	onLoad: function(){
		//...
	},
	onClose: function(){
		//...
	}
})

[Alfred]

I already tested this, It does not simply work.  For example

$('body').desktop('openApp', {
        id:'did',
   icon: 'images/win.png',
   name: 'About',
   width: 400,
   height: 200,
   href: ...,
   onLoad: function(){
      //...
   },
   onClose: function(){
       $('#did').dialog('destroy');
            //$(this).dialog('destroy');
   }
});

If we close the '#did' dialog, we completely destroy the dialog. there is no way we can run the dialog now. But if I want to run the dialog again, how can I recreate the dialog? In my application, I sometimes want to recreate the dialog rather than depending on the existing dialog. Thank you very much.

Regards,

Alfred

[jarry]

If the dialog exists, set the 'href' to null when calling the 'openApp' method. This will prevent from creating dialog more than once.

[Alfred]

Thanks for the quick reply. Please can you show me an example code. If I run an OnClose:function(){ $(this).dialog('destroy')}, I could no longer create the desktop dialog.

Thanks and regards,
Alfred

[jarry]

Please look at this code. When the window.Note function exists, prevent from loading the dialog content again.

Code:

$('body').desktop('openApp', {
	icon: 'images/win.png',
	name: 'About',
	width: 400,
	height: 200,
	href: window.Note?null:'Students/All',
	onLoad: function(){
		window.Note();
	},
	onOpen: function(){
		if (window.Note){
			window.Note()
		}
	}
})

[Alfred]

Thanks for your help. One thing I could not understand is: how do I recreate the desktop app? If I run the code pasted down here and close it, the dialog is completely destroyed. How can I recreate the same dialog (desktop app) again?

$('body').desktop('openApp', {
        id:'winid',
   icon: 'images/win.png',
   name: 'About',
   width: 400,
   height: 200,
   href: ...,
   onLoad: function(){
      //.....
   },
   onClose: function(){
      $(this).dialog('destroy');
   }
});

How do I recreate it programmatically?


Thanks for your patience and help.

Alfred

[jarry]

Calling 'openApp' method will create a desktop window and display it. Closing action will destroy it. Call 'openApp' again to recreate and display it. If you want to custom the 'onClose' event handler, try this code:

Code:

	onClose: function(){
		var app = $(this).dialog('options').app;
		$('#'+app.taskId).remove();
		app.win = null;
		$(this).dialog('destroy');
	}

[Alfred]

This solve the problem.

Thanks very much.

Alfred