How to display input field on mouseover - jsf

Question

I have this JSF table which I use to display data and to edit data:
<table>
<ui:repeat var="ud" value="#{DCProfileTabGeneralController.dcData}">
<tr>
<td>Datacenter Type</td>
<td>
<h:outputText value="#{ud.type}"
rendered="#{not DCProfileTabGeneralController.editable}" />
<h:inputText value="#{ud.type}" rendered="#{DCProfileTabGeneralController.editable}" />
</td>
</tr>
<tr>
<td>Date Added</td>
<td>
<h:outputText value="#{ud.dateAdded}"
rendered="#{not DCProfileTabGeneralController.editable}" />
<h:inputText styleClass="datepicker" value="#{ud.dateAdded}" rendered="#{DCProfileTabGeneralController.editable}" />
</td>
</tr>
<tr>
<td>Hour Added</td>
<td>
<h:outputText value="#{ud.hourAdded}"
rendered="#{not DCProfileTabGeneralController.editable}" />
<h:inputText value="#{ud.hourAdded}" rendered="#{DCProfileTabGeneralController.editable}" />
</td>
</tr>
<tr>
<td>Date Deployed</td>
<td>
<h:outputText value="#{ud.dateDeployed}"
rendered="#{not DCProfileTabGeneralController.editable}" />
<h:inputText styleClass="datepicker" value="#{ud.dateDeployed}" rendered="#{DCProfileTabGeneralController.editable}" />
</td>
</tr>
<tr>
<td>Hour Deployed</td>
<td>
<h:outputText value="#{ud.hourDeployed}"
rendered="#{not DCProfileTabGeneralController.editable}" />
<h:inputText value="#{ud.hourDeployed}" rendered="#{DCProfileTabGeneralController.editable}" />
</td>
</tr>
</ui:repeat>
</table>
This solution works fine but I want to extend it this way: I want to click on button which sets the edit flag to true. When I move the mouse over the value of the table the outputText to change to inputText.
And one more simple question. How I can add bottom padding to all fields globally?

Answer 1

I suggest you to use Richfaces library and use <rich:inplaceInput> component as below.
<rich:inplaceInput value="hhhh" editEvent="onmouseover"/>
However if you still like to stick to javascript this is a concept.
<h:form id="myForm">
<h:outputText value="aaa" id="outText"/><br/>
<h:inputText value="aaa" style="display:none;" id="inText" />
</h:form>
This is the javascript code
<script>
window.onload = function() {
var outputText = document.getElementById("myForm:outText");
var inputText = document.getElementById("myForm:inText");
outputText.onmouseover = function() {
outputText.style.display = 'none';
inputText.style.display = '';
}
inputText.onblur = function() {
outputText.style.display = '';
inputText.style.display = 'none';
}
};
</script>
Since you are using a ui:repeat, you should change the javascript code accordingly.