I have the code below with java, JSF, and PrimeFaces, but when I start for the first time the program, the event Blur doesn't work, just after the first time, it worked. Could you know why this works like that?
The main problem here is, the event blur should work the first time.
<p:column headerText="Col1">
<p:inputText style="width:100px;" id="valorUnitario"
disabled="#{OrcamentoNovoBean.desabilitar}"
value="#{item.valor}" converter="BigDecimalConverter"
onkeypress="javascript:return currencyFormat(this,'.',',',event,2);"
onkeydown="javascript:return pressTabSaldo(event, #{indiceVar});"
maxlength="12">
<p:ajax
listener="#{OrcamentoNovoBean.verificaCalculoPecasMaoDeObraSaldo()}"
event="blur"
update=":form1:dataTablePecas:valorTotalSaldo,:form1:totalSaldo,:form1:totalEstoque,:form1:btnEnviar" />
</p:inputText>
</p:column>
Don't use the blur event. There is no need to check or update things if the value has not changed. It is just a waste of resources. It's better to just use the default change event. As it is the default, you can simply remove the event attribute from p:ajax.
I also noticed you are using an onkeypress listener to format the value as a currency. If you would use p:inputNumber, you'll get currency formatting out of the box.
Just to update this. I resolved including onblur="function" I dont know why this works like that, but at the first time Java pickup the event blur inside the inputtext, at second time AJAX works
Related
How do I update the style of a p:inputText while the user is typing without interrupting their typing?
<p:inputText id="radiusValue" value="#{bean.radius}"
styleClass="#{bean.radiusStyle}">
<p:ajax event="keyup" update="radiusValue" />
</p:inputText>
This is for validation. It updates fine and gets the correct style but when the p:inputText updates, it sets the cursor back to the beginning... interrupting the user's entry. There has to be a less invasive way to update the style?
Could you do that validation on client?
I have not tried, but you can use onkeyup attribute to execute a Javascript function that adds a style class depending on what do you need.
function applyStyle() {
var element = document.getElementById("myInputText");
element.classList.add("mystyle");
}
I am in need for a valueChange event, that triggers every time a visible character is added or removed.
I've got 2 inputText-fields, one of which is read only and a commandButton.
<div>
<p:inputText>
<p:ajax id="encodedString" event="valueChange"/>
</p:inputText>
<p:commandButton action="#{bean.foo}" update="output"/>
<p:inputText id="output" readonly="true">
</p:inputText>
</div>
Now, the users enters some encoded string in the first field and presses the button, which then decodes the string and presents it in human readable form in the read-only input field. Now, whenever the user manipulates the original string, the output should be reset since it does not represent the original encoded string anymore.
Sadly, the valueChange event only triggers when the input field loses focus. I have tried the keypress event, but it also triggers when buttons like the arrow keys are pressed.
JavaScript is viable for me, but should be omitted if possible.
What is the best way to trigger the valueChange event (or a similar event) whenever the actual input changes? I.e. when a visible character is added or removed.
You essentially need the HTML DOM input event. This relatively new event is unfortunately not supported in <p:ajax> of <p:inputText> because the oninput attribute is not supported in <p:inputText> (yet?).
However, you can make use of JSF 2.2's passthrough attributes feature to force JSF to render an oninput attribute anyway where you in turn explicitly trigger the default onchange() function.
<... xmlns:a="http://xmlns.jcp.org/jsf/passthrough">
<p:inputText value="#{bean.value}" a:oninput="onchange()">
<p:ajax listener="#{bean.listener}" />
</p:inputText>
True, that involves JavaScript but it's really only a small bit.
Note that I removed event="valueChange" from <p:ajax> because that's the default one already.
value changed event not supported for inputText you have to use
keyup or blur
<p:inputText>
<p:ajax id="encodedString" event="keyup"/>
</p:inputText>
I have been having trouble with the tag <f:facet>. I am working form other examples of code which use it, but I'm not sure exactly what purpose it serves.
I have written some code which in method is exactly the same as other code I have seen which works, except there's is wrapped in a <f:facet name=actions> tag. When I add this around my code the drop down box I am wrapping it around disappears when I deploy. Anyone able to suggest a reason for this or give me an insight into how and when to use facet?
Here is my code, I won't bother adding the bean code as they're just basic getters and setters and I don't think they're causing the trouble.
<f:facet name="actions">
<p:selectOneMenu id="SwitchWeekDrpDwnMenu"
value="#{depotWorkloadBean.selectView}"
partialSubmit="true">
<p:ajax update="mainForm"
listener="#{depotWorkloadBean.updateView}" />
<f:selectItem itemLabel="Day view" itemValue="Day"/>
<f:selectItem itemLabel="01/01/2014" itemValue="Week"/>
</p:selectOneMenu>
</f:facet>
If I remove the facet tag the dropdown box displays, but doesn't function as it should with the beans.
A facet represents a named section within a container component. For example, you can create a header and a footer facet for a dataTable component.
https://web.archive.org/web/20170828020413/http://www.jsftoolbox.com/documentation/help/12-TagReference/core/f_facet.html
It's useful when you want to create component that uses some code from user (let's say wrapper).
ie. when you want to create component that hides long text and shows short version of it. You can use just the element body, but then you will get only one value, if you want to get from user the short AND the long version then you can not do it in one value (without using some discriminant), just use facet and say which one is the long and which is the short version.
<textShortener>
<f:facet name="short">
This text is short.
</f:facet>
<f:facet name="long">
This text is too <b>long</b> to be showed when page loads. User have to click the button after the short text to show this.
</f:facet>
</textShortener>
Yes, this can (and should) be done with jsf templating, but I hope you got it.
To question: you defined facet just in the wild xml, nobody requested it so nobody processed it - that's why it did not throw error nor showed anything.
I have a input text like this:
<h:inputText value="#{someValue}">
<f:ajax event="change" listener="#{someMethod}" render="someDataTable"/>
</h:inputText>
I have a data table like this:
<h:dataTable value="#{someList}" var="anyVar" id="someDataTable">
some things
</h:dataTable>
When I change the text in the input text, the change is not hapenning immediately, rather I have to click on the page on anything to get the required result in the data table.
Does anyone know how to solve this problem?
On HTML input text elements, the HTML DOM change event is only fired when the element's value has been changed and the element loses focus (i.e. the blur event has been fired as well). Clicking anywhere else on the page or tabbing to next element would fire the blur event. So the described symptoms perfectly matches the specified behaviour.
You're most probably interested in the keyup event.
<f:ajax event="keyup" ... />
Keep in mind that this fires the Ajax request on every keystroke which is not necessarily cheap. You might want to add a delay of ~200ms.
<f:ajax event="keyup" delay="200" ... />
See also:
What values can I pass to the event attribute of the f:ajax tag?
Hopefully the title isn't too cryptic ...
The problem we have is that we generate a bunch of input controls (h:inputOneMenu, h:inputText etc) from some Java List.
Works fine EXCEPT the requirement is that these inputs validate on the fly. Again not so hard except that as there controls were generated in a loop the only possible reRender action is basically the entire form or an a4j:outputPanel around each loop iteration which is basically the same thing.
Now the above two solutions technically work but they have the nasty side effect of reRendering all the page controls which makes the page feel really twitchy and clunky. We'd like to stop this from happening so ideally the only control that gets reRendered is the control that send the ajax update/validation.
Basically this is our page code:
<ui:repeat value="#{seam-outjected-list}" var="item">
<a4j:outputPanel selfRendered="true">
<h:inputText value=#{item.value}>
<a4j:support event="onblur" ajaxSingle="true" />
</h:inputText>
</a4j:outputPanel>
</ui:repeat>
I've left out a bit of stuff that just renders different controls depending on the item.
As you can see we're currently using the a4j:outputPanel solution so every time any loop generated control is updated all the controls are reRendered.
Thanks in advance if anyone has any thoughts.
My first thought is that you should try replacing your <ui:repeat> with an <a4j:repeat> and take advantage of the ajaxKeys attribute to only reRender certain rows.
From the Richfaces Docs:
The main difference of this component
from iterative components of other
libraries is a special "ajaxKeys"
attribute. This attribute defines row
keys that are updated after an Ajax
request. As a result it becomes easier
to update several child components
separately without updating the whole
page.