jsp function works in IE but not chrome or firefox

Question

The following code is a dialog box that comes up when processing a command that the user can dismiss. It works in IE but Chrome and Firefox do not allow it to be dismissed once running.

<a4j:status id="statusWaitInt" forceId="true"
            onstart="javascript:Richfaces.showModalPanel('waitModalPanel2');"
            onstop="javascript:Richfaces.hideModalPanel('waitModalPanel2');">
    </a4j:status>
    <rich:modalPanel id="waitModalPanel2" autosized="true" width="200" height="50" resizeable="false">
            <f:facet name="header">
                <h:panelGrid columns="2" width="100%">
                    <h:outputText value="IWS Processing..." styleClass="textLabel"/>            
                    <h:graphicImage value="/images/close.jpg" style="cursor:pointer;float:right;" onclick="Richfaces.hideModalPanel('waitModalPanel2')" />
                </h:panelGrid>
            </f:facet>
             <h:panelGrid style="margin:auto">
                <rich:spacer height="5px"/>
               <h:graphicImage  value="/images/ajax-loader1.gif"/>
            </h:panelGrid>
    </rich:modalPanel>

Here is the html that is being produced from it:

    </head><span id="waitStatus"><span id="waitStatus.start" style="display: none"></span><script type="text/javascript">
    window.document.getElementById('waitStatus.start').onstart=function(){javascript:Richfaces.showModalPanel('waitModalPanel');;};
</script><span id="waitStatus.stop"></span><script type="text/javascript">
    window.document.getElementById('waitStatus.stop').onstop=function(){javascript:Richfaces.hideModalPanel('waitModalPanel');;};
</script></span><div id="pbG182563ee_2d855a_2d4d65_2d8443_2d55f7fefd57c7:_viewRoot:j_id0:waitModalPanel" style="display: none;"><input autocomplete="off" id="pbG182563ee_2d855a_2d4d65_2d8443_2d55f7fefd57c7:_viewRoot:j_id0:waitModalPanelOpenedState" name="pbG182563ee_2d855a_2d4d65_2d8443_2d55f7fefd57c7:_viewRoot:j_id0:waitModalPanelOpenedState" type="hidden" /><div class="rich-modalpanel " id="pbG182563ee_2d855a_2d4d65_2d8443_2d55f7fefd57c7:_viewRoot:j_id0:waitModalPanelContainer" style="position: absolute; display: none; z-index: 100; background-color: inherit;"><div class="rich-mpnl-mask-div-opaque rich-mpnl-mask-div" id="pbG182563ee_2d855a_2d4d65_2d8443_2d55f7fefd57c7:_viewRoot:j_id0:waitModalPanelDiv" style="z-index: -1;"><button class="rich-mpnl-button" id="pbG182563ee_2d855a_2d4d65_2d8443_2d55f7fefd57c7:_viewRoot:j_id0:waitModalPanelFirstHref"></button></div><div class="rich-mpnl-panel"><div class="rich-mp-container" id="pbG182563ee_2d855a_2d4d65_2d8443_2d55f7fefd57c7:_viewRoot:j_id0:waitModalPanelCDiv" style="position: absolute; left: 0px; top: 0px; z-index: 9;"><div class="rich-mpnl-shadow" id="pbG182563ee_2d855a_2d4d65_2d8443_2d55f7fefd57c7:_viewRoot:j_id0:waitModalPanelShadowDiv"></div><div class=" rich-mpnl-content" id="pbG182563ee_2d855a_2d4d65_2d8443_2d55f7fefd57c7:_viewRoot:j_id0:waitModalPanelContentDiv"><table border="0" cellpadding="0" cellspacing="0" class="rich-mp-content-table" id="pbG182563ee_2d855a_2d4d65_2d8443_2d55f7fefd57c7:_viewRoot:j_id0:waitModalPanelContentTable" style="width: 200px;height: 50px;"><tr style="height: 1%;"><td class="rich-mpnl-header-cell"><div class="rich-mpnl-text rich-mpnl-header " id="pbG182563ee_2d855a_2d4d65_2d8443_2d55f7fefd57c7:_viewRoot:j_id0:waitModalPanelHeader" style="white-space: nowrap;"><table width="100%">
<tbody>
<tr>
    <td><span class="textLabel">IWS Processing...</span></td>
<td><img src="/iws-vault/images/close.jpg" onclick="Richfaces.hideModalPanel('waitModalPanel');" style="cursor:pointer;float:right;" /></td>

@ShadowCat7 its a pop up box with the X to dismiss in the right hand corner. the graphic image is the X — user3108923, Apr 22 '15 at 18:39
I mean can you provide the generated HTML/JavaScript in your question? The problem is probably in there. — ShadowCat7, Apr 22 '15 at 19:02
im not sure where to find or how to find that @ShadowCat7. above is the jsp file — user3108923, Apr 22 '15 at 19:04

score 0 · Answer 1 · edited May 23 '17 at 11:43

0

The rule of thumb with popup panels is that they should be placed outside of the <h:form/> from which they'll be triggered. The popup panel can then contain its own <h:form/>.

To speak to your specific issue, richfaces 3.x made special concessions for the rich:modalPanel, to be usable in IE. From the doc:

In order to avoid a bug in IE, the root node of the dialog is moved on the top of a DOM tree.

You should also know that, according to Brian Leathem (the Richfaces Lead) RF 3.x is compatible only with IE <= 8

edited May 23 '17 at 11:43

Community

1
1

answered Apr 23 '15 at 20:29

kolossus

20,559
3
52
104

So the best thing for me to do would be to upgrade my RichFace libraries? Also, how did you know I was running 3.x? – user3108923 Apr 24 '15 at 13:52
Sorry I am new to the Richfaces platform. – user3108923 Apr 24 '15 at 13:53
sorry forgot to tag you – user3108923 Apr 24 '15 at 14:53
`modalPanel` was discontinued after RF3; You probably should upgrade eventually, but be sure to read resources on the migration process. For now, you can just apply my recommendation @user4820744 – kolossus Apr 24 '15 at 15:53
i dont have it in the tag now so you are saying i should add it? @kolossus – user3108923 Apr 24 '15 at 17:13
Do you mean that the modalPanel is not currently inside a form @user4820744? Post the full page here. You may need to just upgrade your RF after all – kolossus Apr 24 '15 at 20:24
I am putting it all on github and will share the link. it is too large to put on here – user3108923 Apr 27 '15 at 15:10
Can i email u the file? @kolossus – user3108923 Apr 27 '15 at 15:43
Where's the link @user4820744 – kolossus Apr 27 '15 at 17:57

jsp function works in IE but not chrome or firefox

1 Answers1