Workflow and ServiceDesk Community

 View Only

Sending a JavaScript Event from an Iframe to its Parent 

Oct 01, 2015 04:36 PM

Original article is posted here.

In this use case, I have a form with an embedded Iframe (this applies to subdialog windows as well, as they relate to their parent window).  In the Iframe, I have a small webform that is continuously recycling to update the status of a patch staging/download task.

180px_2014-09-12_10-39-39.png

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 onSymantec 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:

180px_2014-09-12_10-39-39.png

Well, it turns out it didn’t help him very much after all, 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:

180px_2014-09-12_10-39-39.png

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.

Statistics
0 Favorited
0 Views
0 Files
0 Shares
0 Downloads

Tags and Keywords

Related Entries and Links

No Related Resource entered.