ibm-jsf HX_DLG_SCRATCH div element

114 Views Asked by At

This is data from jsf-ibm.jar (MANIFEST.MF file), in order to provide info about the version of jsf which is being used by the application I am currently working on:

Manifest-Version: 1.0
Ant-Version: Apache Ant 1.8.2
Created-By: IBM Corporation
Specification-Title: Java Server Faces
Implementation-Title: JSF Widget Library (JWL) - Base
Implementation-Version: JWL v3_1_13
Implementation-Vendor: IBM
Build-Version: 20120307.2306
Build-Date: March 7 2012
Copyright-Info: Copyright (c) 2003,2008, International Business Machin
es Corporation.  All Rights Reserved.

I am stuck with chasing and resolving this strange apps behaviour whihch happens only in IE.
There is link and when it is clicked the dialog box should open (form with some data that can be edited and saved, etc.). But when the link is clicked, then the dialog opens, but all over the app is something which I call "white cloud". The entire app and the dialog is blured and nothing can be clicked. Then, I click browsers (IE) refresh button, which closes dialog and returns the page with list of data where the link is.
I have tried to use IE developer tools and find out that when the element with id HX_DLG_SCRATCH_0 is removed then this white cloud disappears, dialog can be e.g. closed, but the background of the app remains ("normal behaviour" in e.g. Firefox would be non blocked dialog, but the background of the app is gray, there are no app elements which are behind the dialog). This element is generated by ibm-jsf.
This is the element from IE DOM explorer:

<BODY bodyUnloadEventNum="1" marginwidth="0" marginheight="0" hasbox="2" boxItem="    [object]"><DIV id=HX_DLG_SCRATCH_0 style="FONT-SIZE: 1px; BORDER-TOP: 0px; HEIGHT: 1166px; BORDER-RIGHT: 0px; WIDTH: 1676px; BORDER-BOTTOM: 0px; POSITION: absolute; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; LEFT: 0px; FILTER: progid:DXImageTransform.Microsoft.Alpha(enabled=false); MARGIN: 0px; BORDER-LEFT: 0px; Z-INDEX: 10001; TOP: 0px; PADDING-RIGHT: 0px; BACKGROUND-COLOR: #e2e2e2"    name="HX_DLG_SCRATCH_0" hasbox="2" boxItem="[object]"></DIV></BODY>
</html>

This is a part of jsp code of the page where the link is:

<h:outputLink id="link1" rendered="#{not empty book.bookType}">
<h:outputText id="text1" value="#{msg[book.bookType.tag]}"
styleClass="outputText">
</h:outputText>
<hx:behavior event="onclick" behaviorAction="get;show;stop" id="behaviour1"
targetAction="subview1:panelForm2:editBookDialog;subview1:panelForm2:editBookActionDialog"
onActionFunction="setvalue('subview1:panelForm2:newItem', 'edit'); setvalue('subview1:panelForm2:itemId', '#{book.bookId}');"></hx:behavior>
</h:outputLink>

And this is a part of jsp code of the editBookActionDialog.jsp dialog which uses ajax.

<hx:ajaxRefreshRequest id="ajaxRefreshRequest1"
target="subview1:panelForm2:editBookActionDialog"
params="itemId;newItem"
onstart="showProgressBar();" oncomplete="hideProgressBar();">
</hx:ajaxRefreshRequest>

I can't track down why this would happen only in IE, in Firefox it works fine.
Please, any kind of guidance or information about it would be very much appreciated.
Thank you very much in advance,
mismas

[EDIT] Just a thought that occured to me now.
Maybe this "white cloud" shoud be that gray backgroud, but in IE something gets mixed up with css ...
It seems to me that it could be the right clue, since there is no javascript errors or any kind of other errors ...
Correct me if you think I am missing something ... thnx!

[EDIT2 - IMPORTANT]
I nailed down the cause of it!
It is a css problem. position: absolute of this lousy HX_DLG_SCRATCH_0 element is causing the issue.
Can you please advise how to override this ibm-jsf generated position:absolute into position:relative?
Also, I would like to add this "hack" only for IE. I know it isn't nice, but it is obviously in the spirit of the whole application :)
Tnx!

1

There are 1 best solutions below

0
On BEST ANSWER

Rant:
Sorry I accused ibm-jsf to soon, it was a user (developer who wrote the code) problem.
Nevertheless, whilst digging for solution, I had a chance to dig deeper into jsf and there is only one thing I can say about it: It is awful and I hate its guts.
End of rant :D
The real problem was in the javascript, Mozilla Firefox rendered the page a little less painfully, but IE crached (blocked everything).
So, I had jsp page that had a checkbox which is rendered only under some conditions, but in some hx tag there was custum javascript function call placed (right before openDialog() function) which run some validation on that particular checkbox.
Since, in this case, the checkbox didn't physically existed in the generated HTML, and this javascript function was called, it was causing strange/bad app behaviour, difficult to track down.
So the solution was to add a condition test (the same one as for the checkbox rendering) to call javascript function and openDialog(), if the checkbox should be renderd, otherwise call just openDialog().
That's it, hope it will maybe, somehow, help someone with the same "white cloud" problem ... (I doubt it, but nevertheless here it is :)
P.S.
It was strange that IE developer tools didn't complain about any javascript error ...
I am not sure why is that so ... (if anyone has a clue, I'll be glad to here it ... :)

Best regards,
mismas