I wanted to ask just what title says:
say we have a inputtext and a button. Well, I wanted to submit an ajax request in the inputtext when button is clicked.
for example, from the inputtext perspective, I want to achive something like this:
<h:inputtext>
<a4j:support event="button.onclick"/>
<h:inputtext>
<h:button id="button">
or, from the button perspective:
<h:inputtext id="input"/>
<h:button id="button">
<a4j:support event="onclick" action="input.submit"/>
</h:button>
Don't know if there exist an easy way to get this done.
thanks in advance!!
If you just want a simple form submit, I think both approach are wrong, as long as you put your inputtext and button properly in a form, the form will automatically submit whatever you have in this form including user's input in inputtext when you click the button. There is no need to do something like input.submit yourself. (and it's not correct, either)
For the following case, you will see the setInputValue() of managed bean being invoked when you click your button.
<h:inputtext id="input" value=#{bean.inputValue}/>
public void setInputValue(String inputValue){
this.inputValue = inputValue;
}
Try using
Richfaces Region component to limit your request to diffrent regions.
http://docs.jboss.org/richfaces/latest_3_3_X/en/devguide/html/a4j_region.html
I finally get this done by means of <a4j:jsFunction>
a4j:jsFunction
Related
https://www.primefaces.org/showcase/ui/ajax/event.xhtml
I want do that same what in showcase but without refreshing page. Like: setting value in inputtext and click on button to view result, but if i have <p:ajax event="blur" />or <p:ajax/> then i must click two times on the button
<p:inputText id="data" value="#{buttonView.data}">
<p:ajax/>
</p:inputText>
<p:commandButton value="Ajax Submit" id="ajax" actionListener="#{buttonView.buttonAction}" />
Maybe something like use outpupanel and update that panel in commandbutton?
If you are to use the <p:commandButton /> then the form will be submitted. In this case use update attribute of <p:commandButton /> to update the target component.
If you want to update another component as soon as you type then use <p:ajax event="keyup" update="your_target_component_id" /> to update your target component. (YOur event can be keyup, keypress, change, blur, etc.)
I don't understand why are you mixing the concept of using p:ajax with the functionality of the p:commandButton.
Basically, usage of p:ajax is intended to partially process the
field(s) value and update the component(s) of the form even without
submitting it.
Example:
You have Countries and States drop-downs (pre-populated) on a screen (let's say registration) with some other fields, but if user changes the country, you need to refill the States drop-down and update on the screen asynchronously. There you need to use the p:ajax.
On the other hand, p:commandButton is intended to submit the form
(not to update the components initially). However, it also supports
the updating of the components using update attribute.
Example:
Now, reconsider the above example with similar drop-downs (but disabled with fixed values). Now you know that your screen has nothing to be updated and you just have to tackle with validation (if any) and submit the form (update if required).
As far as you are concerned with using the p:ajax on the p:inputText for some asynchronously updates on the screen and p:commandButton to finally submit the form, that totally depends on your requriement.
Instead p:ajax try f:ajax. You can use < f:ajax event="change" render="#this"/>
once the value gets change, same will reflect in backing bean.
I have a text box which takes a search value, and i want to send this string to the server side on click of a button. Not by a form submit, by an ajax call.
I had added an actionListener to the input tag itself, which is called on blur. But what i really want is for the user to click the button to trigger the search function.
I got an idea from this question, and implemented it this way:
<h:inputText id="likeMaterial" value="#{createBookingForm.searchText}"></h:inputText>
<a4j:jsFunction name="setParameterAndRerender" actionListener="{bean.searchMaterials}" reRender="searchResult">
<a4j:actionparam name="param1" assignTo="#{createBookingForm.searchText}"/>
</a4j:jsFunction>
<h:commandButton value="Search" onclick="setParameterAndRerender('mySearchText');return false;"></h:commandButton>
The value received at server side is of course, "mySearchText". How do i pass what the user enters? Or how do i bind #{createBookingForm.searchText} before the button's action listener is called?
Im open to any other approach to. I have limitations though : Im working on enhancing a legacy application, built using JSF 1.1. I cant upgrade, not without a fight at least!
Edit : I tried doing it this way, but i get "undefined" on the server side.
Why not use a4j:commandButton instead of h:commandButton? It will execute ajax request and render what you want. No form submit will happen. Loks like what you need.
h:commandButton by default submit the form when clicked. So no need to send specially using a4j:jsFunction or in any other way. You can completely remove your js function unless if you have something else to do. If you want to test that add an action method and print the value of searchText variale in createBookingForm bean.
Hope this helps!!
This is the whole solution
<h:inputText id="likeMaterial" value="#{createBookingForm.searchText}"></h:inputText>
<a4j:commandButton reRender="searchResult" actionListener="#{createBookingForm.searchMaterials}">
<a4j:actionparam name="param1" noEscape="true" value="document.getElementById('likeMaterial').value" assignTo="#{createBookingForm.searchText}" />
</a4j:commandButton>
I have a dialog which is closed with the following button:
<p:commandButton
onclick="propertyEditDialog.hide(),propertyEditDialog.loaded=false"
value="#{i18n['button.cancel']}" ajax="true"/>
There is no action, only client side javascript that simply hides the dialog. However, I've seen in the logs, that the form is validated on cancel. I've set the ajax="true" to prevent form validation, but it not helped anyway.
What is the right way to close the dialog in PrimeFaces without validating the form?
ajax="true" is the default behaviour of p:commandButton!
The right way would be to exclude the inputs of beeing processed. With the attribut process="#this" in the commandButton, only the button should be processed.
But if you dont want to fire some action and do not want to submit the form, maybe you better use a push-button (instead of a submit-button) by adding the attribute type="button" to your commandButton.
You can use attribute immediate="true" to avoid validation.
I've noticed that this doesn't work for me and I'm wondering if it's just not possible:
<h:form id="one" prependid="false" >
<h:commandButton>
<f:ajax execute=":two">
</h:commandButton>
</h:form>
<h:form id="two" prependid="false">
... content ...
</h:form>
Whenever I click the button above ,I can see that the values on form two are not executed as expected.
Is this the normal JSF behavior?
To 'trick' it, I usually insert a hidden button in form two and trigger it using JavaScript code when the button in form one is clicked. But that's a 'trick' and makes me work extra when I'm not sure I have to.
I should mention the rendering another form is possible.
Could the prependid attribute be causing problems?
Thanks in Advance!
UPDATE Adding more information that might be relevant - adding the prependid="false" to the forms as it is used in the actual code.
No, that's not possible with <f:ajax>. It just submits the parent form. The execute merely tells JSF which components it has to process based on the submitted data, not which request parameters the client side have to send. The button has really to go in the form where it belongs.
I have a form with a validator on one field. I have two h:commandButtons: Ok and Cancel. When I input wrong data and click Cancel, I get a validation message. What must I do that validator don't run when I click cancel?
In case you aren't using ajax, or are still on JSF 1.x, and you really need to invoke a business action in cancel() method (i.e. just reloading the page is insufficient), then your best bet is to add immediate="true" to the button. This way all input fields which don't have immediate="true" will be skipped in processing.
<h:commandButton value="Cancel" action="#{bean.cancel}" immediate="true" />
On JSF 2.x, much better is to submit the form by <f:ajax>, which by default only processes #this instead of #form.
<h:commandButton value="Cancel" action="#{bean.cancel}">
<f:ajax />
</h:commandButton>
If you want to navigate to another page here, add ?faces-redirect=true to the outcome in the cancel() method.
Or, if you actually don't need to invoke any business action at all, then just use <h:button> wherein you directly specify the (implicit) navigation case outcome.
<h:button value="Cancel" outcome="previouspage" />
This will basically reload the page by a GET request. The <h:button> doesn't exist in JSF 1.x, but you can also just use plain HTML+JS for that.
See also:
Why was "immediate" attribute added to the EditableValueHolders?
How to navigate in JSF? How to make URL reflect current page (and not previous one)
How to let validation depend on the pressed button?