I am using <p:dataTable> within that I used html <table>. I want to disable/readonly PrimeFaces <p:inputText> on <h:selectOneMenu> change event.
I used JavaScript, but it is not working with it.
<script type="text/javascript">
function change(val)
{
//alert(val);
if(val=="Check")
{
document.getElementById('bankName').readonly=false;
document.getElementById('receiptNo').readonly=true;
}
if(val=="Cash")
{
forms.elements["mainForm:chkNo"].readonly=true;
document.getElementById('chkNo').readonly=true;
document.getElementById('bankName').readonly=true;
document.getElementById('receiptNo').readonly=false;
}
}
</script>
JSF Code
<h:column>
<p:dataTable id="paymentHistoryDataTable" var="due"
>
<p:column>
.......
<table id="paymentProcess">
<tr>
<td style="width: 80px;">
<h:selectOneMenu value="#{adminActionController.tempBean.selectType}" id="type" onchange="change(this.value);">
<f:selectItem itemLabel="Check" itemValue="Check"/>
<f:selectItem itemLabel="Cash" itemValue="Cash"/>
</h:selectOneMenu>
</td>
</tr>
<tr id="check">
<td></td>
<td></td>
<td style="width: 90px;" id="lblChk">
<label> <h:outputText value="Check/DD Number:" /> </label>
</td>
<td style="width: 90px;">
<h:inputText id="chkNo" value="#{adminActionController.tempBean.checkNumber}" immediate="true"
required="false" validatorMessage="insert Check/DD number">
</h:inputText>
</td>
................ I want to access id="chkNo" in js for disable it..
I am using <p:dataTable> within that I used html <table>. I want to disable/readonly PrimeFaces <p:inputText> on <h:selectOneMenu> change event.
I used JavaScript, but it is not working with it.
<script type="text/javascript">
function change(val)
{
//alert(val);
if(val=="Check")
{
document.getElementById('bankName').readonly=false;
document.getElementById('receiptNo').readonly=true;
}
if(val=="Cash")
{
forms.elements["mainForm:chkNo"].readonly=true;
document.getElementById('chkNo').readonly=true;
document.getElementById('bankName').readonly=true;
document.getElementById('receiptNo').readonly=false;
}
}
</script>
JSF Code
<h:column>
<p:dataTable id="paymentHistoryDataTable" var="due"
>
<p:column>
.......
<table id="paymentProcess">
<tr>
<td style="width: 80px;">
<h:selectOneMenu value="#{adminActionController.tempBean.selectType}" id="type" onchange="change(this.value);">
<f:selectItem itemLabel="Check" itemValue="Check"/>
<f:selectItem itemLabel="Cash" itemValue="Cash"/>
</h:selectOneMenu>
</td>
</tr>
<tr id="check">
<td></td>
<td></td>
<td style="width: 90px;" id="lblChk">
<label> <h:outputText value="Check/DD Number:" /> </label>
</td>
<td style="width: 90px;">
<h:inputText id="chkNo" value="#{adminActionController.tempBean.checkNumber}" immediate="true"
required="false" validatorMessage="insert Check/DD number">
</h:inputText>
</td>
................ I want to access id="chkNo" in js for disable it..
Share Improve this question edited Sep 15, 2012 at 12:10 BalusC 1.1m376 gold badges3.7k silver badges3.6k bronze badges asked Sep 15, 2012 at 10:52 V.RohanV.Rohan 9452 gold badges14 silver badges27 bronze badges 4- JavaScript is case sensitive, you should always use "readOnly", using "readonly" is wrong. – Night2 Commented Sep 15, 2012 at 11:12
- i used that, still it is not disabled – V.Rohan Commented Sep 15, 2012 at 11:19
- Please provide plete code with HTML, also I don't think using "forms.elements" is correct. – Night2 Commented Sep 15, 2012 at 11:21
-
Please don't use
[jsf-1.2]tag if you don't have a question about JSF 1.2 at all. Please don't use[ajax4jsf]tag if you aren't using RichFaces'<a4j:xxx>ponents at all. Please don't use[css]tag if the question isn't about CSS. – BalusC Commented Sep 15, 2012 at 11:22
1 Answer
Reset to default 6You're making several conceptual mistakes here.
Your concrete problem is caused by that you're writing JavaScript code based on the JSF source code. This is not entirely right. JSF runs on webserver and produces HTML. JavaScript runs on webbrowser and sees HTML only, not JSF. Rightclick the page in webbrowser, choose View Source and look closely at it. There doesn't exist any HTML elements with ID bankName or receiptNo. Instead, it are formId:tableId:0:bankName, formId:tableId:1:bankName, formId:tableId:2:bankName, etc. In principle, you should have used exactly those HTML element IDs in JavaScript to select elements from the HTML DOM.
But this is clumsy.
Rather use JSF-provided tags/facilities to achieve the desired functional requirement. You can use JSF expression language in readonly such as readonly="#{dropdown.value == 'Cash'}". You can use <f:ajax> to execute a JSF ajax request to update the model and the view.
The following kickoff example should give you a good starting point:
<h:selectOneMenu id="type" value="#{adminActionController.tempBean.selectType}">
<f:selectItem itemValue="Check"/>
<f:selectItem itemValue="Cash"/>
<f:ajax render="chkNo bankName receiptNo" />
</h:selectOneMenu>
<p:inputText id="chkNo" readonly="#{adminActionController.tempBean.selectType == 'Cash'}" />
<p:inputText id="bankName" readonly="#{adminActionController.tempBean.selectType == 'Cash'}" />
<p:inputText id="receiptNo" readonly="#{adminActionController.tempBean.selectType == 'Check'}" />
The <f:ajax> will update the ponents with (relative) client ID chkNo, bankName and receiptNo when the dropdown is changed. The update will force the readonly attribute to be re-evaluated.
Unrelated to the concrete problem, the way how you used <p:dataTable><table> wherein you didn't bind the rows to var="due" is very strange, but that's subject for a possible future question/problem. The above code example assumes the right context.