Set Primefaces inputText value from Javascript and have ajax fire - javascript

I have a primefaces(v10) input text which I need to set from a javascript function and also have an ajax event fire on blur. In my code I have this, but have been unsuccessful in getting the ajax function to fire.
<h:form id="myForm">
<p:inputText id="myText" widgetVar="myTextVar" value="#{myBean.myText}">
<p:ajax event="blur" listener="#{myBean.updateMyText}" update="myForm"/>
</p:inputText>
</h:form>
I can set the inputText using:
document.getElementById("myForm:myText").value="The Value"
But I'm wondering if I need to use something from the PF() Widget API?

Its easy. Just use the widget...
PF('myTextVar').jq.val('The Value').trigger('change');

Related

Closing popup only if the form is valid

I want to validate my inputText field, which is in a popupPanel. It should contains only numbers.
<h:form>
<h:outputText value="Input:"/>
<h:inputText id="myID" value="#{myBean.field}"
validatorMessage="Only numbers">
<f:validateRegex pattern="([0-9])*$" />
<rich:validator />
<a4j:ajax event="change" render="msgValidator" />
</h:inputText>
<h:message id="msgValidator" for="myID" styleClass="text_colorRed" />
</h:form>
After all I want to save all with button. If the input is correct I want to close the popup, otherwise I want to re-insert the correct input without closing popup.
<a4j:ajaxButton type="submit" value="Save" styleClass="text_weigthBold"
action="#{myBean.save()}" render="myTable"
oncomplete="#{rich:component('myPopup')}.hide();" execute="#this">
</a4j:ajaxButton>
Unfortunately when I type wrong input and click two times on the button, it save the request and close the popup without requesting to input the correct text.
I also used a Java validator but the behavior is still the same.
What can I do to correct this bug?
This is because you're closing popup unconditionally. You must check yourself if validation was OK. In JSF 2.0 you can use FacesContext#isValidationFailed().
<a4j:commandButton execute="#form" value="Save" styleClass="text_weigthBold"
oncomplete="if (!#{facesContext.validationFailed}) {#{rich:component('myPopup')}.hide();}"
action="#{myBean.save}" render="myTable" />
To check also other errors you can use facesContext.maximumSeverity.ordinal gt 0 or facesContext.maximumSeverity != null.
I don't know RF 3.X (and you didn't tell if you're using RF 3 or 4) but it looks like it never had component named a4j:ajaxButton, did you mean a4j:commandButton? Also note that I've changed action="#{myBean.save()}" to action="#{myBean.save}" which is corrent.
Resolved. In the form there were some h:checkbox, I remove the checkboxes and now it works fine. I dont know why the Richfaces checkbox doesn't work correctly but I replace them with HTML checkbox.

how can I set the focus on inputText when I click reset button on Primefaces

The scenario is like this:
I have a form with an inputText and one button for reset the form. When I push the button, the form must be reset and the focus should point to the input text.
I am using primefaces 5.1. The codes go something like this:
<f:form id=myForm>
<h:panelGroup id="divInput" layout="block">
<p:focus context="divInput"/>
<p:inputText id="myInput"/>
<p:commandButton type="reset"/>
</h:panelGroup>
</f:form>
I tried first with this oncomplete with no luck:
<p:commandButton type="reset" oncomplete="myInput.focus()"/>
The second time I tried with this script:
<script>
//When DOM loaded we attach click event to button and set focus
$(document).ready(function() {
//attach click event to button
$("#myForm [type='reset']").click(function(){
$("#myForm [name='myInput']").focus();
});
});
</script>
Solved simply adding the event onclick with the right call to the method "focus":
<p:commandButton onclick="$('#myForm\\:myInput').focus();" type="reset"/>
Valid solution for RequestScoped bean.

How to use <p:ajax> to pass javascript generated data to backing bean?

I have a js-function codeAddress() that processess the data from address and updates the values of fullAddress and validField.
I tried <p:ajax> to pass the data of fullAddress and validField to the backing bean, but the setter methods seem to get called one request delayed.
<h:form id="addressForm">
<p:inputText id="address">
<p:ajax onstart="codeAddress()" process="fullAddress validField"/>
</p:inputText>
<p:commandButton value="submit" />
<p:inputText id="fullAddress" value="#{addressBean.fullAddress}" />
<p:inputText id="validField" value="#{addressBean.valid}" />
</h:form>
The onstart is invoked right before the ajax request is about to be sent. At that moment the ajax request is already prepared for long. It's thus too late to let it to take the changed input values into account.
Better use the input component's onchange attribute instead. It's invoked before the ajax request is to be prepared.
<p:inputText id="address" onchange="codeAddress()">
<p:ajax process="fullAddress validField"/>
</p:inputText>

Required JSF input component which is hidden by JavaScript is still validated

I have a list of values from ,from the list of values i want to check some values means at that corressponding text box will show in bottom.Otherwise the text box will be hidden.I have done this process using javascript. But my issues is i have to validate using required=true attribute. But the problem is the hidden text box also validated.
Primefaces pages for List values:
<p:selectManyCheckbox onchange="checkValue();" value="#{volunteerBean.knowAbt}" layout="pageDirection" id="s" immediate="true" required="true" requiredMessage="Select how to konws about cv?" style="width:300px;height:170px;">
<f:selectItems value="#{volunteerBean.hearLst}" var="he" itemLabel="#{he}" itemValue="#{he}" />
<p:ajax event="change" update="msg1111" />
</p:selectManyCheckbox>
Input Text Box coding:
<p:inputText style="display:none;" id="searchEngine" value="#{volunteerBean.searchEngine}"><p:watermark for="searchEngine" value="Search Engine"/>
JavaScript for hidden and show inputText through checking the list of checkBox:
function checkValue() {
var chk = document.getElementById("volunteerForm:s:10");
if (chk1.checked) {
document.getElementById('volunteerForm:searchEngine').style.display='';
}else {
document.getElementById('volunteerForm:searchEngine').style.display='none';
}
}
I am using primefaces 3.0 and jsf 2.0. How to solve it
You're changing only the HTML DOM tree and you're not changing the JSF component tree. JSF is not aware at all that the HTML element has been hidden in the client side. You need to show/hide the JSF component instead by its rendered attribute and include its client ID in the <p:ajax update>.
<p:selectManyCheckbox ... value="#{volunteerBean.knowAbt}">
<f:selectItems value="#{volunteerBean.hearLst}" />
<p:ajax event="change" update="msg1111 searchEngine" />
</p:selectManyCheckbox>
<p:inputText id="searchEngine" ... rendered="#{volunteerBean.knowAbt.contains('valueOfItem10')}" />
where valueOfItem10 is the exact value of the item at index 10, like as you tried to check in JS. Note that I assume that knowAbt is a List<String>, exactly as your hearLst suggests (for which I have removed the superfluous var, itemLabel and itemValue from the above example as they are the defaults already). Otherwise you'd need to perform the job in a helper method of the backing bean instead.

How to invoke a p:commandButton by JavaScript on enter keypress?

I have write a and a in my page.
When enter key was pressed ,I want to do any js check, if success post an action.
Javascript:
function text_onkeypress() {
if(event.keyCode==13){
formSubmit();
}
}
HTML:
<p:inputText id="context" value="#{bean.fileName}"
onkeydown="text_onkeypress();"></p:inputText>
<p:commandButton id="search" value="submit" onclick="return formSubmit();"
action="#{action.getResult}" ></p:commandButton>
when I write query("#search")[0].click() in the javascript.It can do the check, but can't do action="#{action.getResult}".
I don't know how to do the losted action.
The easiest way for you to submit your form from Javascript is to just invoke the click() event for the jQuery object of the <p:commandButton>.
Most of the Primefaces components can be accessed from Javascript by declaring the widgetVar attribute. This attribute creates a Javascript variable. Eg.
<p:commandButton id="search" value="submit" onclick="return formSubmit();" action="#{action.getResult}" widgetVar="searchClientVar" />
I can now access the variable in the formSubmit function. This Javascript variable has an attribute called jq which references the underlying jQuery object and what you can use to invoke the click event.
function text_onkeypress() {
if(event.keyCode==13) {
searchClientVar.jq.click();
}
}
This will invoke the server side action of the commandButton and submit the form values if they pass validation.
What kind of checks do you need?
You don't need to manually submit on enter(especially when you have just one form).
If you want to submit the form only if the user enters something you could take advantage of validateLength tag.
<h:outputLabel for="firstname" value="Firstname: *" />
<p:inputText id="firstname"
value="#{personBean.firstname}"
required="true" requiredMessage="You have to enter your name" label="Firstname">
<f:validateLength minimum="2" />
</p:inputText>
<p:message for="firstname" />
See here a demo: http://www.primefaces.org/showcase-labs/ui/pprAjaxStatusScript.jsf
PS:What PF version do you use?

Categories