Passing inputtext value as parameter - jsf

I want to pass user input to another page as a parameter. Here is my code:
<h:form>
<h:inputText value="#{indexBean.word}"/>
<h:commandLink value="Ara" action="word.xhtml">
<f:param value="#{indexBean.word}" name="word"/>
</h:commandLink>
</h:form>
Well, this is not working. I can read the inputtext value in my backing bean but I can't send it to word.xhtml.
Here is another approach I tried:
<h:form>
<h:inputText binding="#{indexBean.textInput}"/>
<h:commandLink value="Ara" action="word.xhtml">
<f:param value="#{indexBean.textInput.value}" name="word"/>
</h:commandLink>
</h:form>
This is also not working.
So, what am I doing wrong?

Your concrete problem is caused because the <f:param> is evaluated when the page with the form is requested, not when the form is submitted. So it remains the same value as on the initial request.
The concrete functional requirement is not exactly clear, but the particular functional requirement can be solved in basically two ways:
Use plain HTML.
<form action="word.xhtml">
<input type="text" name="word" />
<input type="submit" value="Ara" />
</form>
Send a redirect in action method.
<h:form>
<h:inputText value="#{bean.word}" />
<h:commandButton value="Ara" action="#{bean.ara}" />
</h:form>
with
public String ara() {
return "word.xhtml?faces-redirect=true&word=" + URLEncoder.encode(word, "UTF-8");
}

Related

Reload and refresh table from ajax call

I want to create a form which when it's submitted it renders and executes a second form:
<h:form id="paymentform">
<div>
.....
</div>
<h:commandButton id="buy" type="submit" value="Put" action="#{dashboard.calculateProcessing}" >
<f:ajax render="#form formdddasd" execute="#form formdddasd"/>
</h:commandButton>
</h:form>
Second form which must be reloaded and refreshed:
<h:form id="formdddasd">
<h:dataTable id="formdd" value="#{orders.cdList}" var="cd"
rendered="#{orders.cdList ne null}"
...........
</h:dataTable>
</h:form>
The first form is executed and rendered but the second form is not. Is it possible to implement this functionality?
Is it possible to implement this functionality?
Yes
try this
<f:ajax render="#form :formdddasd" execute="#form :formdddasd"/>

How to pass inputText value as querystring in JSF form

I would like to implement a search box in my web-app. A JSF <h:form> should redirect me to products.xhtml?search=somestring. It should work the same as the following piece of HTML:
<form action="products.xhtml" method="GET">
<input type="text" name="search" />
<input type="submit" value="Submit" />
</form>
All the solutions of similar problems I came across does the redirection to another page without querystring
<h:form>
<h:inputText value="#{product.searchString}"/>
<h:commandButton value="Submit" action="products?faces-redirect=true&includeViewParams=true"/>
</h:form>
.
<h:form>
<h:inputText valueChangeListener="#{product.searchStringChanged}" />
<h:link value="Submit" outcome="products">
<f:param name="search" value="#{product.searchString}" />
</h:link>
</h:form>
OR builds the querystring but redirects to the same page.
The reason of not using pure HTML is to keep the benefits of the JSF session management.
EDIT
With the help of BalusC's post and https://blogs.oracle.com/enterprisetechtips/entry/post_redirect_get_and_jsf, I came up with following solution:
<f:metadata>
<f:viewParam name="search" value="#{product.search}" />
</f:metadata>
<h:form>
<h:inputText value="${product.search}"/>
<h:commandLink action="products?faces-redirect=true&includeViewParams=true" value="Search"/>
</h:form>

Scrolling to anchor or page bottom after JSF form validation fail

I have a contact form at the bottom of a page with required and validated form fields. If validation fails, how can I get the scroll position back to the bottom of the page?
I want this page to work with Javascript disabled, so no AJAX solutions. I have something like this:
<a id="contact"></a>
<h:form id="cform">
<h5>Contact!</h5>
<h:outputLabel for="name">Name:
<h:message id="nameMsg" for="name" />
</h:outputLabel>
<h:inputText id="name" value="#{bean.name}" required="true" requiredMessage="Please enter name!" />
<h:outputLabel for="email">Email:
<h:message id="emailMsg" for="email" />
</h:outputLabel>
<h:inputText id="email" value="#{bean.email}" required="true" requiredMessage="Email is required!">
<f:validator validatorId="myValidator" />
</h:inputText>
<h:outputLabel for="comment">Comment:
<h:message id="commentMsg" for="comment" />
</h:outputLabel>
<h:inputTextarea id="comment" value="#{bean.comment}" required="true" requiredMessage="Please enter a comment!"/>
<h:commandButton action="#{bean.go}" id="send" value="send" />
</h:form>
I thought about doing validations on the bean side and doing manual redirects to the appropriate anchor, but that seems to defeat the purpose of using JSF to begin with. I assume there is an easy way to do this, but I'm having trouble Googling a solution because I'm probably not wording the question right. Any one?
You can use <f:event type="postValidate"> to have a listener hook right after the validations phase. You can use FacesContext#isValidationFailed() to check if validation has failed or not. You can use Flash#setKeepMessages() to let the faces messages survive a redirect (they're namely by default request scoped!). You can use ExternalContext#redirect() to perform a redirect in a non-action method.
So, summarized, this should do:
<h:form id="cform">
...
<f:event type="postValidate" listener="#{bean.postValidate}" />
</h:form>
with:
public void postValidate() throws IOException {
FacesContext context = FacesContext.getCurrentInstance();
if (context.isValidationFailed()) {
context.getExternalContext().getFlash().setKeepMessages(true);
context.getExternalContext().redirect("contact.xhtml#cform");
}
}
Or we can use f:ajax onerror= for do something if they are an errors :
<p:commandButton **>
<f:ajax onerror="window.scrollTo(0, 0);" />
</p:commandButton>
You don't need an explicit anchor tag for this, the id of the form will do.
You could make Faces render the id at the end of the form action Url.
Eg.
... Your main page content goes here ....
<form id="contact-form" action="/MyView.jsf#contact-form" method="post">
This will cause the browser to scroll to the form after it is submitted.
It shows in the Url too.
You could probably implement a custom Form renderer to do this.

Get one of requested hidden input values,where the key is similar

JSF:
<h:form>
<h:inputHidden id="promo" value="promo-motopair"/>
<h:commandButton value="#{m.buy}" action="#{showProducts.buy}"/>
</h:form>
<h:form>
<h:inputHidden id="promo" value="promo-northduck"/>
<h:commandButton value="#{m.buy}" action="#{showProducts.buy}"/>
</h:form>
Bean, where get clicked id:
String promo = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("promo");
Can't get it because id is equal promo, but prepended with prefix, looks like j_idt40:promo
How to handle such situation?
I need get item by key. I suppose,that key(which is id in inputhidden) should be single. I should rely on promo value only.
Don't use <h:inputHidden>. It's unsuitable for your particular functional requirement. Just use standard HTML <input type="hidden">.
<h:form>
<input type="hidden" name="promo" value="promo-motopair"/>
<h:commandButton value="#{m.buy}" action="#{showProducts.buy}"/>
</h:form>
<h:form>
<input type="hidden" name="promo" value="promo-northduck"/>
<h:commandButton value="#{m.buy}" action="#{showProducts.buy}"/>
</h:form>
It's in a request scoped bean by the way also available by just
#ManagedProperty("#{param.promo}")
private String promo;
without the need to manually grab it from the request parameter map.

JSF richfaces getElementById

I am using jsf2 and richfaces 4.X how can i get the richfaces enabled input field's current value ? equal to getElementById('field_name').vlue
I tried some of the methods named like findcomponent.value and element.value but they give me old value which was while page was loaded b/c findcomponent and element method returns server side UI.components instead client side components ?
I guess you are to use rich:clientId function to render a correct identifier into your java script.
For example:
var myElement = document.getElementById("#{rich:clientId('field_name')}");
See also RichFaces rich:clientId within facelets
If you check the HTML generated, you could see that every JSF / RF element has his id like :. For example:
<h:form id="frmSample">
<h:inputText id="txtSample" value="#{mybean.someTextValue}" />
</h:form>
The HTML generated will be:
<form method="POST">
<input type="text" id="frmSample:txtSample" />
</form>
So, in JavaScript you could reference the element by this id.
var txtValue = document.getElementById('frmSample:txtSample').value;
Also, for the RF composite HTML components like rich:tab or rich:calendar you could use the component ID generated by HTML but I'll recommend "#{rich:clientId('field_name')}" as #DRCB has explained in his post.
To get the richfaces components values use the rich:component and the getValue() methods.
To get the jsf library components values use the rich:element and the value JS methods.
Example:
<h:form>
<h:inputText id="textField" value="#{bean.value1}" />
<a4j:commandButton value="displayTextField" action="doSomething()"
onclick="alert('v:'+ #{rich:element('textField')}.value); return true;" />
<rich:inplaceInput id="richField" value="#{bean.value1}" />
<a4j:commandButton value="displayRichField" action="doSomething()"
onclick="alert('v:'+ #{rich:component('richField')}.getValue()); return true;" />
</h:form>
They both work even in a rich:dataTable, without adding the id of the datatable or something. Richfaces is quite smart and find the ids of the 'current row'
example:
<h:form>
<rich:dataTable id="mydatatable" value="bean.findValues()" var="myvar">
<rich:column>
<h:inputText id="textField" value="#{myvar.text1}" />
<a4j:commandButton value="displayTextField" action="doSomething()"
onclick="alert('v:'+ #{rich:element('textField')}.value); return true;" />
</rich:column>
<rich:column>
<rich:inplaceInput id="richField" value="#{myvar.text2}" />
<a4j:commandButton value="displayRichField" action="doSomething()"
onclick="alert('v:'+ #{rich:component('richField')}.getValue()); return true;" />
</rich:column>
</rich:dataTable>
</h:form>

Resources