dynamic rendering using javascript
Hello
I've got a problem and I'am wondering that you can help me
I'am using NetBeans with visualpack
I want to dynamicly change a "render" attribute in <ui:dropDown> component so that after placing the cursor on mouseover on the panel dropdown component would appear. I was influenced by that you can change the object style
(e.g. onmouseover="document.getElementById('form1:dropDown1').style.backgroundcolor=' color';")
and i tried to solve the problem in this way :
<h:panelGrid binding="#{content.gridPanel1}" id="gridPanel1"
onmouseover="document.getElementById('form1:dropDown1').rendered='true';"
onmouseout="document.getElementById('form1:dropDown1').rendered='false';">
<ui:dropDown binding="#{content.dropDown1}" id="dropDown1"items="#{UserSessionBean.Options}">
</h:panelGrid>
unfortunately it doesn't work like that. :(
Please give me some advice how you can do this
Message was edited by:
PiotrekLublin
# 1
I did something like this but it was so long ago, I am not sure how to do it.
Try something like this in the Javascript
to make invisible
document.getElementById('form1:dropDown1').className="e;hidden"e;;
to make visible
document.getElementById('form1:dropDown1').className="e;"e;;
# 2
it doesn't work unfortunately :( but thx for answer
# 3
I was under the impression that the rendered attribute was interpreted by the FacesServlet and used to decide whether or not the component is turned into html. Obviously if it's not in the html you can't control whether it's visible or not.
My guess is that something like
document.getElementById('form1:dropDown1').style.visibility="hidden"|"visible"
is what you're after. You may have to escape the quotes as Jetsons indicated. I've not used this but am guessing based on Firefox's DOM inspector coupled with a quick google of "style.visibility". The DOM inspector is very handy if you're writing javascript.
# 4
it doesn't work too
I tried:
<h:panelGrid binding="#{contentSetEquipment.gridPanel5}" id="gridPanel5" styleClass="_gridPanelArmour"
onmouseover="document.getElementById('form1:dropDown5')style.visibility=& ;quote;visible"e;;"
onmouseout="document.getElementById('form1:dropDown5').style.visibility=&qu ote;hidden"e;;">
<ui:dropDown binding="#{contentSetEquipment.dropDown5}" id="dropDown5" items="#{contentSetEquipment.dropDown5DefaultOptions.options}"
rendered="false" valueChangeListener="#{setEquipment.dropDown5_processValueChange}"/>
</h:panelGrid>
aslo
<h:panelGrid binding="#{contentSetEquipment.gridPanel5}" id="gridPanel5" styleClass="_gridPanelArmour"
onmouseover="document.getElementById('form1:dropDown5')style.visibility='vis ible';"
onmouseout="document.getElementById('form1:dropDown5').style.visibility='hidden ';">
<ui:dropDown binding="#{contentSetEquipment.dropDown5}" id="dropDown5" items="#{contentSetEquipment.dropDown5DefaultOptions.options}"
rendered="false" valueChangeListener="#{setEquipment.dropDown5_processValueChange}"/>
</h:panelGrid>
it looks that if I want to change wheather the comoponent is rendered or isn't rendered on page i have to change "rendered" attribute It won't suffice to change component style... I guess
# 5
Well this works for me (in a masochistic sort way!)
<script>
function disappear(target){
target.style.visibility="hidden";
}
</script>
<ui:dropDown binding="#{Page1.dropDown1}" id="dropDown1" items="#{Page1.dropDown1DefaultOptions.options}" onMouseOver="disappear(this)" style="height: 24px; left: 72px; top: 264px; position: absolute; width: 192px"/>
<ui:button binding="#{Page1.button1}" id="button1" onMouseOver="disappear(this)"
style="position: absolute; left: 96px; top: 312px; width: 168px; height: 24px" text="click here to have the day off"/>
Message was edited by:
yossarian
# 6
i foun it in NetBeans help:
visible. Type: boolean Indicates whether or not the component can be seen by the user on the rendered HTML page. This property is selected by default. If you deselect this property, the component's HTML code is rendered on the page, but the component is not visible in the browser because it is hidden by a style setting. Because the HTML code is rendered, the component can still be processed on form submissions, and users who view source in the browser can see the HTML code. In addition, your web application can use client-side JavaScript to show or hide the component.
If you need to completely hide the component, for example, because it contains sensitive information that certain users should not see, deselect the rendered property.
it was my mistake i'am sorry Now it is working:
<h:panelGrid binding="#{test.gridPanel1}" id="gridPanel1"
onmouseout="document.getElementById('form1:dropDown1').style.visibility='hidden ';"
onmouseover="document.getElementById('form1:dropDown1').style.visibility='visib le';"/>
<ui:dropDown binding="#{test.dropDown1}" id="dropDown1" items="#{test.dropDown1DefaultOptions.options}" />
Thx for help!! Now i'am going to sleep... :)
# 7
i am grateful yossarian for Your help :)
