Question

Right now I have a jQuery UI dialog with an <iframe> inside of the dialog. When the user pushes a button, the dialog pops up with a form-editing screen in the iframe.

Well, I want to have two buttons in the inner form-editing screen, “cancel” and “ok”. Cancel doesn’t save changes and closes the dialog, ok saves changes and closes the dialog. Pretty simple..

So how do I attach an event to the cancel button inside of the iframe from the parent page? I would also assume that you would somehow need to attach an event to the iframe’s DOM-ready or else the button would not yet exist.

How do you do this?

Also, the iframe is on the same-domain and such so there is no cross-domain worries

A simple example is here at jsbin with the iframe source

Answer 1

Ok so here is what I did to accomplish this. I added this code to the iframe page:

$(document).ready(
  function()
  {
    $("#cancelbutton").click(
      function()
      {
        parent.CloseDialog();
      });
  });

Then in the opening page I put this:

function CloseDialog()
{
  $('#diag').dialog('close');
}

So rather than try to close the dialog from the frame I just call a method in the parent page that will take care of closing it. Same effect but a lot easier. Couldn’t seem to get the frame to let me use the dialog method. But this worked.