Sending a Javascript Event from an Iframe to its Parent

In this use case, I have a form with an embedded Iframe.  In the Iframe, I have a small webform that is continuously recycling to update the status of a patch staging/download task.

Symantec Workflow Patch Management Staging Status
The small panel cap at the bottom of the right column is an iframe component. The contents are a simple web form project that automatically recycles every few seconds in order to query the staging status.

When I was developing this form for a Patch Management POC, this is where I left it.  However, today I rethought the functionality after some research into this question on Symantec Connect authored by upioneer:

I am trying to leverage panel visibility (or any variable for that matter), using the current state of an Ajax component. Trouble is, there doesn’t seem to be any output variable for the Ajax component.

After way too much research and mucking about in the AjaxLabels, I finally gave up on that and tried to find a way to use an Iframe panel method in a way that would solve his issue.  What I landed on was this post on Stack Exchange, which indicated that prefixing the controlid-grab in javascript with “parent” would shift out to the Iframe‘s parent context and look for the control id there.

After a bit of testing, this is what I came up with as a concept proof for upioneer:

iframecontrolsparent

I haven’t heard back yet on whether that helped him find success and celebration, (turns out it didn’t help him very much) but this discovery led me to epiphany.  My original Patch project involves an external validation model which runs a staging task status check and returns to the form if the staging is incomplete, along with an error message.  These are a lot of unnecessary steps, since we can just keep the button hidden until the Iframe says it’s time to come out.

I added a body “onload” event action to the form that shows the “Patch is staged and ready” message.  The script for that:


parent.document.getElementById('ButtonCommit1').className = 'gcButton1';

where the id “ButtonCommit1” is the “Next” button on the parent form.  The original css class for the button is simply:


.gcHiddenElement {
visibility: hidden;
}

and applying the ‘gcButton1’ class then shows the Button and styles it.

Here’s the result of the updated code:

Symantec Workflow Patch Management Staging Task Status
Notice that the “Next” button (bottom right) which is seen in the original screen capture (above) is no longer visible when the page loads.

So, thanks upioneer for the inspiration.  I hope it helps someone else as well.

Update: It turns out this also affects and works for subdialog virtual windows.


Featured Components

Iframe

Button

AjaxLabel

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s