Gaining Reference to the Dialog from Dialog content

Question

Here's my scenario:

1. I've got a div on Page A.
2. When an event happens (whatever I define, a click, whatever), I do a div.Dialog, set its properties and open it
3. The data inside is returned from an async .ajax call that grabs the data from a url and appends it to the div by calling div.html(data) inside the .ajax callback, so it's essentially loading a PageB by getting the data (content) and appending it to the div that's calling the dialog("open")...nothing special here I don't think.

My question: In Page B, how do I reference the dialog so I can do some things to it? For instance in Page B's content that I received back from that .ajax call and added to the div via .html(data), there is a button and when clicked I need to close the dialog.

Right now my buttons are not working inside the dialog because one of them closes out the dialog and the other should redirect to a new page but both do not work now because I have no reference to the dialog that it's in to manipulate it. So I need reference so I can close the dialog via some jQuery that will reside in PageB (data).

Answer 1

This should be done in Page A in the success ajax callback because it is Page A that has reference to the div that needs to be closed.

Page A:

$('div.Dialog').load('/pageB', function(data) {
    $('#closeButtonOnPageB').click(function() {
        // ... close dialog
    });
});

Answer 2

If Page B is loaded by AJAX (as opposed to an <iframe>), any Javascript in it will run in the same context as the rest of Page A.

Therefore, you can use the same code you use in Page A to reference the dialog in Page B.
Note that if Page B is also used elsewhere, you'll need to check that you're actually running inside of Page A first. (Check whether the dialog exists, or some variable set in Page A)

---

EDIT

If it is in an <iframe>, you can interact with the parent frame using the parent property.

Specifically, you can run jQuery code in the context of the parent frame using parent.$.
For example:

parent.$('#someId').dialog(...);

Since this uses the $ function from the parent page, Page B does not need to reference jQuery or jQuery UI. The selectors would be matched within the parent page.

You could (but shouldn't) run the parent page's jQuery code against the child page by writing parent.$('selector', document)