Button to open Jquery Dialog is not working

Question

I am playing with Jquery UI

I create a dialog on the fly from a DIV, i gave this DIV and ID and a button to call a closeDialog Function

It works fine as shown on this example

http://jsbin.com/ubovej

The problem I am having, is that if I d load a page THAT contains the BUTTON. The button will not work

as in:

$("<div id='mydialog1'>").dialog({ 
 autoOpen: false, 
 modal: false,
 width: 740, 
 height: 840,
 title: 'Dialog1 = dynamic',
 open: function(e, ui){ 
 $(this).load(myUrl); 
 } 
}); 

• Manual5355: Can you post the code for the button?

Answer 1

If this is the button Click Event code then

autoOpen: false,

should be

autoOpen: true,

EDIT: If you don't want it opened til you click the button then:

Do this when you want the dialog created.

var $dialog = $("<div id='mydialog1'>").dialog({ 
 autoOpen: false, 
 modal: false,
 width: 740, 
 height: 840,
 title: 'Dialog1 = dynamic',
 open: function(e, ui){ 
 $(this).load(myUrl); 
 } 
 });

and do this after they click the button (only after the dialog is created)

$("button_selector").click(function () {
 $dialog.dialog("open");
});

EDIT: Try changing

function closeDialog1(){ 
 alert('closing Dialog1'); 
 window.parent.$('#mydialog1').dialog('close'); 
 return false; 
}

to

function closeDialog1(){ 
 alert('closing Dialog1'); 
 $('#mydialog1').dialog('close'); 
 return false; 
} 

Or a better way to do this might be

$("<div id='mydialog1'>").dialog({ 
 autoOpen: false, 
 modal: false,
 width: 740, 
 height: 840,
 title: 'Dialog1 = dynamic',
 open: function(e, ui){ 
 $(this).load('dialogtest1a.html'); 
 },
 buttons: {
 "Close" : function () {
 $(this).dialog("close");
 } 
 } 
}); 

Does the button that closes the dialog HAVE TO be in the page you are loading?

• rudy: I don't want it opened till the click on link/button function showDialog1(){ $('#mydialog1').dialog('open'); return false; }
• Manual5355: Could you post the actual code that you are having problems with, not an example you worked off of?
• rudy: this is the actual code on my testarea. i uploaded it to server. tanela.com/testbin/dialogtest1.html. The close button on the dialog is not working
• rudy: and yes, i did want to have the close button(onclick) in the page that was being loaded.. :(
• rudy: on my SECOND example here is the link : tanela.com/testbin/dialogtest2.html Here I DO NOT create the dialog on the fly, and I use an Iframe. the close button WORKS on this example. But the Dialog is much SLOWER to load all my content