I'm making form with dropdowns, where user have to make first choice, than using ajax next choices appear. It works just fine. But I wanted to add bootstrap formatting for dropodwns, so I installed bootstrap-select. It work also just fine, but when ajax event renders data for next he renders it in a new dropdown, next to still empty bootstrap formated dropdown. Witch, how can you predict, isn't desired action. Here's code from jsf:
<h:selectOneMenu styleClass="bootstrap-select" id="marka" value="#{searchBean.markiID}">
<f:selectItems value="#{searchBean.listaMarek}" var="c" itemLabel="#{c.marka}"
itemValue="#{c.markaID}"/>
<f:ajax event="change" execute="marka" render="model"/>
</h:selectOneMenu>
<h:outputText value="#{msg.carModel}"></h:outputText>
<h:selectOneMenu styleClass="bootstrap-select" id="model" value="#{searchBean.modelID}">
<f:selectItems value="#{searchBean.listaModeli}" var="p" itemLabel="#{p.model}"
itemValue="#{p.modelID}"/>
<f:ajax event="change" execute="model" render="liczbaDrzwi"/>
</h:selectOneMenu>
In backingbean, when user choose smthging from first dropdown, Is generated list of items for second dropdown, and so on. And this is the result of making choice:
As you can see, ajax makes totally new dropdown, instead of filling already existing.
Thanks for any ideas:)
JSF Ajax works in this way... instead of filling the already existing dropdown... the jee server send a new HTML fragment to replace this dropdown code...
Maybe you could read this link to understand JSF lifecycle...jsf lifeclycle
Did you try using primefaces or richfaces instead of h:selectOneMenu component?
Here is a PrimeFaces example where you can see how to update one dropdown when you select a value on another dropdown... pf example
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'm using JSF 2 along with primefaces 5.1, i have a selectOneButton which have 2 values,
EN/FR, i want to be notified each time the language is changed, and then change the locale of the page.
Now the problem is that this selectOneButton is inside a splitButton, and for some reason,
the ajax submit of the "change" event is always returning null for the selectOneButton, and it never passes the values selected.
<h:form prependId="false" id="headerForm">
<p:splitButton>
<p:menuitem>
<p:selectOneButton id="langs" value="#{bean.lang}" >
<f:selectItem itemLabel="English" itemValue="en"/>
<f:selectItem itemLabel="Françcais" itemValue="fr"/>
<f:ajax event="change"/>
</p:selectOneButton>
</p:menuitem>
</p:splitButton>
this just for testing:
public void setLang(String lang) {
System.out.println("Changed: " + lang);
this.lang = lang;
}
when i put the selectOneButton inside a p:menu for examples it works just fine.
This problem is two-fold.
First, most PrimeFaces components, particularly the ones which generate hidden HTML input elements and are presented to enduser by a bunch of divs/lists with click listeners instead of as "plain HTML" inputs, require a <p:ajax> instead of <f:ajax> to be properly processed during ajax submits.
<p:selectOneButton id="lang" value="#{bean.lang}" >
<f:selectItem itemLabel="English" itemValue="en"/>
<f:selectItem itemLabel="Français" itemValue="fr"/>
<p:ajax />
</p:selectOneButton>
Note that I omitted the event attribute as it has the right default value already, which would be valueChange in case of inputs and action in case of commands. The value of change is not necessarily the right default as some components would require click instead, particularly radiobuttons and checkboxes which have a fixed value.
In any case, the general recommendation is, if you're using PrimeFaces, just stick to <p:ajax> all the time. It'll use PrimeFaces-specific jQuery based Ajax API to process the ajax request instead of JSF native Ajax API and it's capable of dealing with PrimeFaces components.
Second, the JavaScript code associated with <p:splitButton> moves the HTML representation of the menu to end of body (in order to ensure best cross browser compatibility as to z-index). This however causes the menu to not be sitting in a form anymore. You can confirm it by looking at the HTML DOM tree in the webbrowser via rightclick and Inspect Element (not View Source!). You can solve this in basically 2 ways:
Move the form to inside the menu item. It wouldn't make sense anyway to submit all other menu items for this specific requirement.
<p:splitButton>
<p:menuitem>
<h:form id="languageForm">
<p:selectOneButton id="lang" value="#{bean.lang}" >
<f:selectItem itemLabel="English" itemValue="en"/>
<f:selectItem itemLabel="Français" itemValue="fr"/>
<p:ajax />
</p:selectOneButton>
</h:form>
</p:menuitem>
</p:splitButton>
Use <p:ajax partialSubmit="true"> to let PrimeFaces Ajax API to collect the invidivual input values instead of searching for a <form> and serializing it (which would fail because there's no form).
<h:form id="headerForm">
<p:splitButton>
<p:menuitem>
<p:selectOneButton id="lang" value="#{bean.lang}" >
<f:selectItem itemLabel="English" itemValue="en"/>
<f:selectItem itemLabel="Français" itemValue="fr"/>
<p:ajax partialSubmit="true" />
</p:selectOneButton>
</p:menuitem>
</p:splitButton>
</h:form>
So I have 2 forms and a command button with f:ajax attached on it. I want to execute the second form on click on button but it seems that it ignores when I'm passing the form's id on execute attribute. But when I replace it with 'execute=":form1"' it runs correctly(the information from the form is sent to server). Can someone tell me why won't work with the id of second form, or how can I achieve this: with one button to execute any form i want from the page.( as it is now no information is sent to server, only the listener is called).
Code bellow:
<h:form id="form1">
<h:panelGrid id="inputSection" >
<h:inputText id="input1" value="#{counterMB.number1}" />
<h:inputText id="input2" value="#{counterMB.number2}" />
</h:panelGrid>
<h:outputLabel id="sumResponse2" value="#{counterMB.sum}" />
</h:form>
<h:form id="form2">
<h:panelGrid id="inputSection" >
<h:inputText id="input1" value="#{counterMB.number1}" />
<h:inputText id="input2" value="#{counterMB.number2}" />
</h:panelGrid>
<h:outputLabel id="sumResponse2" value="#{counterMB.sum}" />
</h:form>
<h:commandButton value="Sum numbers">
<f:ajax event="click" execute=":form2" listener="#{counterMB.sum}" render=":form2 :form1"/>
</h:commandButton>
Update:
so to be more explicit: from what I have read I can use ajax to update/refresh etc some parts of a page instead of refreshing the whole page. What i have tried to do is group some components in different forms and execute a form at a time to see how it behaves. It works perfectly if I use the id of first group(form) but doesn't work at all if I use the id of the second form(it calls the action but doesn't submit any data from any form). I don't understand why. (PS for those who claim i lack some knowledge : this is the reason of asking questions isn't it? I'm trying to learn some new stuff)
It seems that you are lacking basic knowledge of how jsf works. A command button must be inside a form. And it's not possible to submit 2 forms with one single button.
The attribute execute of f:ajax tells which components to process, for example if you have 2 input texts, you can process only one and ignore the other using this attribute. but it's not possible to do what you are trying to do.
It doesn't really make sense to submit 2 forms and execute a single action method once.. there's no point in having 2 forms. why don't you put everything inside a single form?
In your current solution, you use a h:commandButton outside of any h:form - this is a little bit against HTML and JSF, so don't count on it. What I would suggest is
if you use Richfaces, put a a4f:jsFunction in every form and trigger the resulting Javascript from anywhere
if you use Primefaces, put a p:remoteCommand in every form and trigger the resulting javascript from anywhere
if you neither use any of them, put a <h:commandButton /> in every form, set the style hidden and use javascript to submit the form.
Hope it helps...
I'm using JSF with PrimeFaces to make an application as an assignment for college. I'm struggling to get something working. I'm using PrimeFaces and I have a tabview which contains 5 tabs. In one of those tabs I have a dataTable which has several rows and columns. This all works fine, but the problem is that I want to submit the form without rerendering the (entire page). The thing is, every column in the dataTable has a selectBooleanCheckbox, and when that checkbox is selected, a button should disappear. If it's unselected the button should appear. This works fine with onchange="this.form.submit()" or onclick="this.form.submit()" but it refreshes the entire application, and it causes the first tab to be selected, rather than the one I was at. So I'm looking for a solution to be able to submit and re-render some stuff without refreshing the entire program. This is my code:
<body>
<h:form id="customerForm">
<p:dataTable id="customerlist" var="c" value="#{customerBean.customerList}">
<p:column>
<f:facet name="header">Select</f:facet>
<center>
<p:selectBooleanCheckbox value="#{c.selected}" onchange="this.form.submit()"/>
</center>
</p:column>
</p:dataTable>
<h:commandButton id="testtest" value="test" rendered="#{customerBean.numberSelected() == 0}"/>
</h:form>
</body>
I removed most of the columns for the sake of simplicity. What is the solution to this? I've tried using ajax, but that didn't work
<p:selectBooleanCheckbox value="#{c.selected}">
<f:ajax event="click" execute="#form" render="#none"/>
</p:selectBooleanCheckbox>
Do you really need to submit the whole form? If it's enough that the view is being rerenderd try just to update the form. For that you can use the primefaces ajax event.
<p:selectBooleanCheckbox value="#{c.selected}">
<p:ajax update="#form"/>
</p:selectBooleanCheckbox>
If this does not work, please tell us what "..ajax, didn't work" exactly mean. Is there any POST Request submitted? Is any Action/Setter called?
I'm experiencing some problems when using the "rendered" attribute with ajax behavior. I'll paste the code so I think it will be a lot more clear:
<h:selectOneMenu value="#{registrarVentaController.esCobroChequeString}">
<f:selectItem itemLabel="Efectivo" itemValue="false"/>
<f:selectItem itemLabel="Cheque" itemValue="true"/>
<f:ajax execute="#this" render="#form"/>
</h:selectOneMenu>
<h:panelGroup id="panelMonto">
<span>Monto:</span>
<h:inputText value="#{registrarVentaController.monto}" rendered="#{registrarVentaController.banCobroCheque}"/>
<h:inputText value="#{registrarVentaController.monto}" rendered="#{not registrarVentaController.banCobroCheque}"/>
</h:panelGroup>
My "#{registrarVentaController}" is just a View Scoped JSF Managed Bean with appropiate setters/getters.
This way it works, I mean, when user selects option "Efectivo", panelGroup "panelMonto" will get updated and we'll see the first inputText, and conversely when user selects option "Cheque" user will see the second inputText.
For this approach I used "f:ajax" component where I updated the whole #form to get this behavior work and I just want to update panelGroup "panelMonto" (using render="panelMonto" It doesn't work at all (I even try with full scope resolution :formName:panelMonto with no result).
I just want to have rendered work with ajax="idComponent" or similar behavior to show certain parts according what user have selected.
Best Regards!
Note (One solution)
I managed to get a solution (taking as an input
JSF rendered is not working
and a bit of myself). I've just moved to a new form the part that I'm
interested in filtering according what user selected. This way I still
use #form ajax's render and it will just render this new form (not the
whole form as I was using!) Neverthless I'm still wondering if there
is a solution to not used #form and just the component/s ID.
what if you check with
render=":panelMonto"
not
render=":formName:panelMonto"
still not working?
this should work only with
render="panelMonto" //because is in the same form
Can you add more code?
Also can you check with your browser (in chrome: right click, inspect element, network) to see if there is any activity?? perhaps is rendering the same thing because of you...