i have a problem with this primefaces component in my view xhtml. I builded a searchbar that filters elements in a list based on the value of this inputText component with an ajax call on event. Everything works like it should, till i press enter in inputText, then my filter method does unexpected things. Thats why i tried to avoid pressing enter. But like in the snipped below, the listener isn't called even if key != 13.
Does anybody have a idea?
Thanks for your help!
<p:inputText value="#{ListView.filter}" style="width:150px" placeholder="Stichwort">
<p:ajax event="keyup" onevent="if (event.keyCode == 13) { return false; }" listener="#{ListView.filterAvailable}" update="#form"/>
</p:inputText>
You can just try this directly on the inputText tag. I usually do this with Internet Explorer.
<p:inputText id="testInput" onkeydown="if(event.keyCode==13) return false;" [....]
You can simply add a condition in front of it like :
<p:inputText id="testInput" onkeydown="#{mySessionInfoBck.ieBrowser ? 'if(event.keyCode==13) return false;' : ''}" [....]
Related
I have a problem I can not solve, I have a selectOneListbox with a Value Chang Listener and submit onclick. It works perfectly but the problem I have noticed is that the Set and Get methods I have for other elements in my form runs after the method that captures the ValueChangeListener. And I can not use the right data from the elements in my form, how do I resolve this?
So i got in my selectOneListbox:
<h:selectOneListbox onclick="Submit();"
valueChangeListener="#{normalbesoksgrenController.setActiveFromAllList}"
size="20" value="#{normalbesoksgrenController.currentVardTillfalleID}">
<f:selectItems itemValue="#{item.vardTillfalle.id}" itemLabel="#
{normalbesoksgrenController.getDateAndTime(item.getVardTillfalle().getStartTid())}"
var="item" value="#{normalbesoksgrenController.besokList}" ></f:selectItems>
</h:selectOneListbox>
And i got my backbean:
public void setActiveFromAllList(ValueChangeEvent event)
{
int id = Integer.parseInt(event.getNewValue().toString());
Doing some stuff..
}
I think you might want to use the ajax event like this:
<h:selectOneListBox .....>
<f:ajax execute="#form" listener="#{normalbesoksgrenController.setActiveFromAllList}" event="change" reder=":whatEverYouWant" />
</h:selectOneListBox>
The execute attribute defines what should be submitted before the ajax request is handled.
The scenario was something like this:
I have 2 textboxes, say txtbox1 and txtbox2. When the user type something on txtbox1 and then press tab, txtbox1 loses focus and txtbox2 got focus. I want to check the value of txtbox1 when it loses focus. If txtbox1 value is invalid, I need to render a <h:outputText value="Invalid field" rendered=#{bean.errorFlag}/>
I used <p:ajax event="blur" /> on txtbox1.
My problem is it doesn't render the outputText even though the value of errorFlag is set to true. I also use update on ajax to update outputText, but it doesn't render it.
You need to specify the client ID of the to-be-updated element in update attribute.
<h:inputText id="input1" value="#{bean.input1}">
<p:ajax event="blur" update="input1Message" />
</h:inputText>
<h:panelGroup id="input1Message">
<h:outputText value="Invalid field!" rendered="#{bean.input1Error}" />
</h:panelGroup>
But... You're basically reinventing JSF validation and not taking benefit of JSF built-in validation API. I strongly recommend to just implement a Validator instead.
#FacesValidator("input1Validator")
public class Input1Validator implements Validator {
#Override
public void validate(FacesContext context, UIComponent component, Object value) throws ValidatorException {
if (isInvalid(value)) {
throw new ValidatorException(new FacesMessage("Invalid field!"));
}
}
}
and use it as follows
<h:inputText id="input1" value="#{bean.input1}">
<p:ajax event="blur" update="input1Message" />
</h:inputText>
<h:message id="input1Message" for="input1" />
This keeps your managed bean free from validation and boolean property clutter.
I guess you use p:tabview. if it is correct, you can use tab change listener
you can look this site
http://www.primefaces.org/showcase-labs/ui/tabviewChangeListener.jsf
Having this lines of code:
<h:commandLink value="Reset Filter" styleClass="button">
<f:ajax event="click" render="filterWindowDiv tableX" listener="#{beanX.reset}" />
</h:commandLink>
and as well as with:
<h:commandLink value="Reset Filter" styleClass="button">
<f:ajax event="click" render="#all" listener="#{beanX.reset}" />
</h:commandLink>
an unknown error will be thrown in Internet Explorer 8:
Object doesn't support this property or method pageX.jsf, line1 character 7
The h:commandLink is within a o:window (OpenFaces 3).
However, I do get the same error if I am using the same lines of code for example for a Delete button which shows after invoking a bean method a o:popupLayer.
Any ideas? Thank you in advance!
I've had JavaScript code within my div which must be rendered adhoc while re-render a part of the page. However, it seems IE cannot handle that issue while FF don't mind. I think to remember I've read something something about this. Anyway, since I've removed the JavaScript error is gone.
But how to invoke my JavaScript code after rendering? I've solved it like this example:
<h:commandLink value="Reset Filter" styleClass="button">
<f:ajax event="click" render="#all" listener="#{beanX.reset}"
onevent="callback" />
</h:commandLink>
Callback method:
function callback(data) {
data.status == "success") {
// your JavaScript code
}
}
Thanks again for all your help!
The problem here lies with click event of <h:commandLink>
Don't know the possible cause, but using mousedown will hopefully solve your problem.
I am trying to make a filter using selectOneMenu.
I have two categories, when one is selectect, must filter the results shown, and also the second category.
JSF code:
<div id="box-categories" class="box-left">
<b>Filter by topic</b>
<h:selectOneMenu id="cat1" binding="#{interfaceContainer.documentFormContainer.selectOnes['cat1'].selectOne}" rendered="true" onchange="javascript:refreshResults(); return false;">
<f:selectItems value="#{interfaceContainer.documentFormContainer.selectOnes['cat1'].items}" />
</h:selectOneMenu>
<b>and subtopic</b>
<h:selectOneMenu id="cat2" binding="#{interfaceContainer.documentFormContainer.selectOnes['cat2'].selectOne}" rendered="true" onchange="javascript:refreshResults(); return false;" value="#{interfaceContainer.documentFormContainer.selectOnes['cat2'].value}">
<f:selectItems value="#{interfaceContainer.documentFormContainer.selectOnes['cat2'].items}" />
</h:selectOneMenu>
</div>
But I have problems when I try to get the values using this java code:
public String getStringValue(){
if ( this.selectOne ==null || this.getSelectOne().getValue()==null)
return "";
return this.getSelectOne().getValue().toString();
}
I realised that the problem is just with getValue(), because debugging, this.getSelectOne() is in the rigth value, but this.getSelectOne().getValue() is null.
Any idea??
Thanks in advance
UIInput#getValue() will return null when you attempt to access it during any phase before the Update Model Values phase. You're apparently accessing it at the "wrong" moment in the JSF lifecycle. Anyway, creating dependent dropdown menus in JSF without help of a shot of Ajax is terrible.
Long story short, here's how to do it: Populate child menu's (with complete and working code examples).
I have the next code to load a set of images whose streams are in a datamodel called names. My problem is when I declare the var inside the p:datatable tag seems like has nothing. Any idea?
thx!
<p:dataTable value="#{controlador.names}" var="nombre" rendered="true">
<p:column rendered="true">
<h:outputText value="#{nombre.stream}"/>
<p:graphicImage value="#{nombre.stream}"/>
</p:column>
</p:dataTable>
The p:graphicImage uses another request so you need to pass an identifier to the managedBean like this.
<p:dataTable value="#{productManaged.products}" var="productIterated">
<p:column>
<f:facet name="header">
<h:outputText value="#{product.pic}"/>
</f:facet>
<p:graphicImage value="#{productManaged.dynamicProductImage}">
<f:param name="product_id" value="#{productIterated.id}"/>
</p:graphicImage>
</p:column>
</p:dataTable>
Another thing that you should take care is to return something in the StreamedContent or is gonna fail. Do something like this:
public StreamedContent getDynamicProductImage() {
String id = FacesContext.getCurrentInstance()
.getExternalContext().getRequestParameterMap().get("product_id");
if(id!=null && this.products!=null && !this.products.isEmpty()){
Integer productId = Integer.parseInt(id);
for(Product productTemp:this.products){
if(productTemp.getId().equals(productId)){
return new DefaultStreamedContent(
new ByteArrayInputStream(productTemp.getImage()),
productTemp.getMimeType());
}
}
}
return new DefaultStreamedContent(
new ByteArrayInputStream(this.products.get(0).getImage()),
this.products.get(0).getMimeType()); //if you return null here then it won't work!!! You have to return something.
}
or you can read this thread http://primefaces.prime.com.tr/forum/viewtopic.php?f=3&t=4163
After wasting hours of going the the process of implementing the many solutions I found for this issue (i.e. including a param or attribute), The only solution I managed to find that actually works can be found here: Serving Dynamic Content with PrettyFaces
Remove the <h:outputText>. You can read a stream only once. It cannot be re-read another time.
As to the p:graphicImage part, you need to feed it with a value of DefaultStreamedContent. Also see this blog entry.