I have a JavaScript function defined in a file Common.js named showSearchAccount() which show a pop-up when called. I have also defined two radio buttons in a xhtml file as;
<h:selectOneRadio value="#{userData.data}">
<f:selectItem itemValue="Yes" itemLabel="Yes" />
<f:selectItem itemValue="No" itemLabel="No" />
</h:selectOneRadio>
I need the pop-up to apper when i click on yes radio button, but if I put onclick or onchnage inside the 1st selectItem tag the popup is not appearing. If I put the onclick in selectOneRadio tag it is working, but it gets enabled for both i.e Yes and No.
I have tried this thing with plain html and it works like charm. But I need to it work with JSF. Could anyone please help.
You can let the onclick event at <h:selectOneRadio> and then decide what popup will be shown in the javascript function. I tried the code below and it worked:
XHTML:
<h:form>
<h:selectOneRadio onclick="showPopUp(this.value)">Select:
<f:selectItem itemValue="y" itemLabel="Yes" />
<f:selectItem itemValue="n" itemLabel="No" />
</h:selectOneRadio>
</h:form>
JS:
function showPopUp(type) {
//console.log(type);
switch( type) {
case 'y' : alert('pop up y!'); <--- call your function here for pop A
break;
case 'n' : alert('pop up n!'); <--- call your function here for pop B
break;
}
}
Related
I am using jsf 2. One part of my code is this:
<h:panelGrid id="jobDetail" columns="3" cellpadding="7">
<p:outputLabel value="#{msg['content.jobList.JobName']}" />
<p:inputText id="jobName" styleClass="BIC_search_textbox" value="#{timerConfigurationBean.selectedTimerConfigurationJob.jobName}" required="true" requiredMessage="#{msg['content.jobNew.requiredfield.errormsg']}"/>
<p:message for="jobName" styleClass="error"/>
</h:panelGrid>
<p:commandButton id="update" value="Update_Button" action="#{timerConfigurationBean.updateExportJob}" styleClass="bottomButtonsAfterFirst" update="jobDetail" oncomplete="PF('updatejobpopup').show()"/>
This is only a section of the code. What happens is that when I click on the command button "Update_Button" one of the following two things happen:
1) I enter a value in inputText "jobName" and click the command button. First the function in action="#{timerConfigurationBean.updateExportJob}" runs and then the oncomplete="PF('updatejobpopup').show()" runs. This is how it was intended to be so that is okay.
2) I don't enter anything in inputtext (it is a required field), then click on the commandbutton. I see an error message on the webpage next to the Inputtext field (this happens because I have update="jobDetail" in my commandButton) and action="#{timerConfigurationBean.updateExportJob}" is not run however the oncomplete="PF('updatejobpopup').show()" still runs. This is a problem.
I want the oncomplete to only run when there are no errors on the page just like the function in action="#{timerConfigurationBean.updateExportJob}".
Can someone please help.
You can use the callback of primefaces to give a feedback to the view.
So, in your action method yo can do:
context.addCallbackParam("ok", true);
And in the onComplete:
oncomplete ="if ( args.ok ) { PF('updatejobpopup').show(); }"
I have a problem with a h:inputText and i don't know how to solve it.
I'm working on a xhtml page using JSF and RichFaces which contains fields as Calendar, SelectOneMenu, InputTextArea, Input. At the end of my form, there are two buttons Print and Save.
If one of the fields is modified (text, date, etc), i have to disable the Print button. In every field, i have add ajax event.
For example :
<rich:calendar datePattern="dd/MM/yyyy" timeZone="#{timeZone.timeZone}" value="#{myBean.date}">
<f:ajax event="change" listener="#{myBean.verifyModification}" render="myForm"/>
</rich:calendar>
If my date is changed, i call a method stored in my bean and it's ok.
But, i have a problem with my inputText and inputTextArea.
<h:inputText value="#{myBean.name}" maxlength="50">
<a4j:ajax event="keydown" render="myForm" listener="#{myBean.verifyName}" />
</h:inputText>
If i write fastly, for example i stay on the letter a to write aaaaaaaa in my field. The field will contain aaaaaaaa then aaaa. Is it because the ajax event is too slow? The problem doesn't come from my bean method because i only test a value.
Because of that, i can't test this field. I have tried the others events like blur, change. If i use these events, i have to click out of my field then my button is refresh.
Could you help me, please?
Thank you.
The problem is most likely that you render your complete form, not only the part of it that needs updating. JSF will then replace your form with the values you submitted on the first ajax request. Try:
<h:inputText value="#{bean.name}">
<f:ajax event="keydown" render="myButtonP" listener="#{bean.verifyName}" />
</h:inputText>
<h:panelGroup id="myButtonP">
<h:commandButton id="printBtn" value="Print" action="#{bean.printMe}"
disabled="#{bean.canPrint}" />
<h:commandButton id="saveBtn" value="Save" action="#{bean.save}" />
</h:panelGroup>
If you use disabled instead of rendered on the button, you can even reference printBtn directly in the render attribute.
The problem is, I have next to no knowledge of javascript, and just a passing knowledge of PrimeFaces, and I couldn't find how-to in the documentation :(
So I have a primefaces text box on my page:
<p:inputText styleClass="step1-input" value="#{PageBean.documentToDownload}">
<p:ajax event="keyup" update="infopanel,infopanel2,downloadbutton" listener="#{PageBean.validateUrl}"/>
</p:inputText>
In the text box, when I write something, an action takes place, which takes a few seconds to complete. On result, a panel appears on the page that either displays something, or says what I've written is wrong:
<p:panel id="infopanel" visible="#{PageBean.validLink and PageBean.info != null}" header="Information" style="margin-bottom:10px;">
<h:outputText value="Everything is okay"/>
</p:panel>
<p:panel id="infopanel2" visible="#{PageBean.validLink and PageBean.info == null}" header="Error" style="margin-bottom:10px;">
<h:outputText value="An undefined error occured."/>
</p:panel>
There's already a primefaces statusDialog on the page that I can use:
<script type="text/javascript">
function start(){ statusDialog.show(); }
function stop(){ statusDialog.hide(); }
</script>
So, what I want to do is: on keyup event in the input text I want to launch start() function, to display a dialog, only if PageBean.validLink is true (validLink is set in PageBean.validateUrl listener, and it's instantaneous)
And when infopanel or infopanel2 is shown as an ajax action, I want to call the stop() function.
So, how can I do that?
If i understand your question correctly you want to execute javascript function when the ajax action completes? For this you can use the oncomplete attribute on the ajax component:
<p:ajax event="keyup" update="infopanel,infopanel2,downloadbutton" listener {PageBean.validateUrl}" oncomplete="stop()"/>
If you want to make a callback to execute before an ajax reques begins, you can use the onstart attribute
I have a dataTable with a column named DELETE (it is a link) which has an listener . When I click it the first time (click 1) it deletes the row (as expected), but when I try it with another row after that nothing happened (click 2). In fact wherever I click next nothing happen. I should click another time (click 3) to get it work. I don't want that.
Attention: The "delete()" method in my_user is not reached after "click 2".
Here is the code for the column:
<h:column>
<f:facet name="header">#{lng.del}</f:facet>
<h:form>
<h:commandLink action="#">
<f:ajax event="click" listener="#{my_user.delete}" render="#all" />
<h:graphicImage name="delete.png" library="images" styleClass="tableIcon" />
</h:commandLink>
</h:form>
</h:column>
You've multiple forms inside the table. When you re-render another form from inside a form by ajax, then its view state will get lost and hence the 1st click will fail. This click however takes care that the form gets the view state back, so the 2nd click works.
Technically you need to re-render only the content of the other form, but this isn't possible in this particular use case. Better put the <h:form> outside the <h:dataTable> so that you have a single form with a shared view state.
<h:form>
<h:dataTable>
...
</h:dataTable>
</h:form>
If your page contains another forms as well, I'd suggest to render only the current form instead of all, otherwise any actions on those forms will fail as well.
<f:ajax event="click" listener="#{my_user.delete}" render="#form" />
I have written a js method which runs perfectly on FF.
This js method is called on the click of a radio button.
In IE, when I click the radio button, the js method is called only when I click somewhere on the form. I have no idea about this strange behavious in IE.
Any ideas?
Thx
Here is my code.
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
HTML CODE:
<h:selectOneRadio id="pid" value="#{Bean.pid}" onchange="javascript:checkPid();">
<f:selectItem itemLabel="label1" itemValue="value1"/>
<f:selectItem itemLabel="label2" itemValue="value2" />
<f:selectItem itemLabel="label3" itemValue="value3" />
</h:selectOneRadio>
JAVASCRIPT:
<script language="javascript" type="text/javascript">
function checkPid() {
//some basic js here
//even if I just give an one-liner alert stmt here, In IE it
//shows up only when I click somewhere on the form after I click
//on the radio button
}
Thanks in advance!
Try the onclick event rather than the onchange event.
You'll need to modify your code though:
<h:selectOneRadio id="pid" value="#{Bean.pid}" onclick="checkPid(this);">
And your javascript function:
function checkPid(e) {
//do stuff with e.value
}
You should be able to validate what the user clicked on by e.value. This should work for both browsers.