Question

I have 2 pages, say page1.html and page2.html.

page1.html has this code:

$(document).ready(function() {
                   $('#mydialog').dialog({autoOpen : false, modal : true});
                   $('#myopenlink').click(function() {
                                             $('#mydialog').load('page2.html');
                                             $('#mydialog').dialog('open');
                                             return false;
                                           });                                 
                   });

The relevant HTML elements in page1.html:

<a href="#" id="myopenlink"> Open </a>
<div id="mydialog"> </div>

when I click “myopenlink”, I’ll get a modal dialog displaying page2.html.

Now, in page2.html, I have another link (or a submit button etc..). I want to close the dialog once it’s clicked (i.e. close the dialog from within the page it loaded).

Is this possible?

EDIT:

After some digging I guess my question isn’t about dialog box specifically. This is what I’m trying to do:

page2.html content:

<a href="#" id="mycloselink"> close </a>

page1.html content:

function closeLinkClicked(event) {
    event.preventDefault();
    alert('Please Reach this point so I replace this with close dialog');
}

function doneLoading(data) {
    $('#mydiv').on('click', '#mycloselink', closeLinkClicked);
}

$(document).ready(function() {
                             $('#mydiv').load('page2.html', doneLoading);
                            });

page1.html also has this of course:

<div id="mydiv"> </div>

When I click the link which was loaded from page2 into the mydiv, nothing happens (I expect the alert to show).

What am I doing wrong?

Thanks
Thanks

Answer 1

Hiya like this demo http://jsfiddle.net/mhLc5/6/ OR Updated Answer => this http://jsfiddle.net/Pb2eR/ or http://jsfiddle.net/Pb2eR/1/

Dynamic Append Demo: http://jsfiddle.net/Pb2eR/13/

SO to close the dialog you just need to call .dialog('close') rest a demo will give you a good place to play around.

APIs reside here: http://jqueryui.com/demos/dialog/

good read: http://forum.jquery.com/topic/close-a-jquery-ui-dialog-from-the-inside

Hope this helps!

code

 buttons: {

            'Submit': function() {
                $Dialog_div.dialog('close');
            }

Rest of the sample code

var $Dialog_div;

function fnOpenDialog() {
    $Dialog_div = $('<div id=\'ThisDialog\'>Hello Page 2</div>').prependTo('body');

    $Dialog_div = $('#ThisDialog').dialog({
        autoOpen: true,
        draggable: true,
        resizable: true,
        title: 'Dialog stack overflow HULK',
        modal: true,
        stack: true,
        height: ($(window).height() * 0.95),
        width: ($(window).width() * 0.9),

        buttons: {

            'Submit': function() {
                $Dialog_div.dialog('close');
            }

        }

    });

}

$('#ClickMe').click(fnOpenDialog);​