Ajax in JSF with selectManyCheckbox - ajax

I have a datatable and two checkboxes. The content of the datatable is rendered considering which of the checkboxes are selected. I have the following functional code which renders the datable content when pressing the submit button:
<h:form>
<h:selectManyCheckbox value="#{myBean.selections}">
<f:selectItem itemValue="expired" itemLabel="Expired" />
<f:selectItem itemValue="active" itemLabel="Active" />
</h:selectManyCheckbox>
<h:commandButton id="submit" value="Select"
action="#{myBean.getList}" />
</h:form>
<h:form>
<h:dataTable ... />
</h:form>
However, I want to replace the submit button with an ajax call using the f:ajax tag. I tried something like:
<h:selectManyCheckbox value="#{myBean.selections}">
<f:selectItem itemValue="expired" itemLabel="Expired" />
<f:selectItem itemValue="active" itemLabel="Active" />
<f:ajax event="click" render="#form" listener="#{myBean.getList}" />
</h:selectManyCheckbox>
<h:form>
<h:dataTable .... />
</h:form>
But the content is not rendered. What am I doing wrong?
Bean:
public String[] selections = { "expired", "active" };
public String[] getSelections() {
return selections;
}
public void setSelections(String[] selections) {
this.selections = selections;
}
public void getList() {
for (String option : selections) {
// add expired
if (option.equals("expired"))
showExpired();
// add active
else if (option.equals("active"))
showActive();
}
//return Arrays.toString(selections);
}

Related

How to update component with ajax when selecting a p:selectOneRadio?

I'm trying to use ajax to update a component in my jsf page when selecting a radio button.
The managed bean is the following:
#SessionScoped
#ManagedBean
public class TestMB {
ArrayList<String> domande;
String[] risposte = new String[3];
public TestMB() {
domande = new ArrayList<String>();
domande.add("Domanda1");
domande.add("Domanda2");
domande.add("Domanda3");
}
public ArrayList<String> getDomande() {
return domande;
}
public void setDomande(ArrayList<String> domande) {
this.domande = domande;
}
public String[] getRisposte() {
return risposte;
}
public void setRisposte(String[] risposte) {
this.risposte = risposte;
}
public void asserta() {
System.out.println(risposte[0]);
}
}
The JSF page is this one:
<h:form id="label">
<p:panelGrid columns="1" layout="grid" styleClass="showcase-text-align-center">
<p:repeat var="domanda" value="#{testMB.domande}" varStatus="status">
<h1>#{domanda}</h1>
<p:selectOneRadio value="#{testMB.risposte[status.index]}">
<f:selectItem itemLabel="1" itemValue="1"></f:selectItem>
<f:selectItem itemLabel="2" itemValue="2"></f:selectItem>
<f:selectItem itemLabel="3" itemValue="3"></f:selectItem>
</p:selectOneRadio>
</p:repeat>
</p:panelGrid>
<p:outputLabel value="#{testMB.risposte[0]}"></p:outputLabel>
<p:commandButton update="label" value="Si" />
</h:form>>
I would like to update the form when I change option in the tag.
If I press the commandButton everything is ok but how to implement the same behavior in the radio button selection?
Thanks in advance!
You have the <p:ajax> component. Try something like this:
<p:selectOneRadio value="#{testMB.risposte[status.index]}">
<f:selectItem itemLabel="1" itemValue="1"></f:selectItem>
<f:selectItem itemLabel="2" itemValue="2"></f:selectItem>
<f:selectItem itemLabel="3" itemValue="3"></f:selectItem>
<p:ajax update="label" />
</p:selectOneRadio>

selectOneButton change listener always returning null

I'm using JSF 2 along with primefaces, 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, i have set valueChangeListener and an ajax event,
but everytime the change listener is fired, the new value is always null!
here is the xhtml code:
<h:form id="f">
<p:selectOneButton id="lang" value="#{currentUser.language}" valueChangeListener="#{currentUser.languageChanged}" >
<f:selectItem itemLabel="English" itemValue="en" />
<f:selectItem itemLabel="Françcais" itemValue="fr" />
<f:ajax event="change"/>
</p:selectOneButton>
</h:form>
the languageChanged method for testing:
public void languageChanged(ValueChangeEvent event) {
System.out.println("new val: " + event.getNewValue());
System.out.println("old val: " + event.getOldValue());
}
i even tried to attach to the ajax a listener:
<f:ajax event="change" listener="#{currentUser.languageChanged}"/>
and the method:
public void languageChanged(AjaxBehaviorEvent event) {
SelectOneButton button = (SelectOneButton)event.getComponent();
System.out.println(button.getValue()) ;
}
Is this the wrong way to retrieve the new selected value from a p:selectOneButton with ajax?
UPDATE:
So i know what is causing this problem
actually my selectOneButton is inside a menuItem which is inside a splitButton, when i take the selectOneButton out side the splitButton it works fine!
why is the fact that the selectOneButton is inside the menuItem preventing it from send it to the server?
here the code:
<h:panelGroup style="float: right;" >
<h:form id="f">
<p:splitButton value="#{currentUser.fullName}" icon="ui-icon-person" styleClass="toTheRight" style="min-width: 200px;" >
<p:menuitem value="Matricule: #{currentUser.matricule}" />
<p:menuitem value="#{msgs.role}: #{currentUser.role}" />
<p:separator />
<p:menuitem>
<p:selectOneButton id="lang" value="#{currentUser.language}" valueChangeListener="#{currentUser.languageChanged}" >
<f:selectItem itemLabel="English" itemValue="en" />
<f:selectItem itemLabel="Françcais" itemValue="fr" />
<f:ajax event="change"/>
</p:selectOneButton>
</p:menuitem>
<p:separator />
<p:menuitem value="#{msgs.settings}" icon="ui-icon-wrench" />
<p:menuitem value="#{msgs.logout}" icon="ui-icon-arrowthickstop-1-w" url="/j_spring_security_logout"/>
</p:splitButton>
</h:form>
</h:panelGroup>
I have a similiar snap-code and that should work, here is what i have:
<p:outputLabel for="scriptMigrate" value="Migrate" style="font-weight:bold" />
<p:selectOneButton id="scriptMigrate" value="#{scriptConfiguration.scriptMigrate}" required="true">
<f:selectItem itemLabel="Yes" itemValue="1" />
<f:selectItem itemLabel="No" itemValue="0" />
<p:ajax update="fsstobe" event="change" listener="#{scriptConfiguration.updateForm()}" />
</p:selectOneButton>
The update componetent is just for me to know what to render or not in the rest of the page, but here is the method:
public void updateForm() {
System.out.println("entered with value: " + scriptMigrate);
if (scriptMigrate.equals("1")) {
renderScriptAsIs = true;
}
if (scriptMigrate.equals("0") || scriptMigrate.equals("")) {
renderScriptAsIs = false;
}
}
So i assume when you change the value you just want to call the method languageChanged(), so maybe my example helps, i have no arguments, try without them first to see if it helps.
Could you try
<p:ajax listener="#{currentUser.languageChanged}"/>
and remove the valueChangeListener from the selectOneButton.
In languageChanged(AjaxBehaviorEvent event) just read the new value from the language-property.
<p:selectOneButton value="#{languageBean.languageName}">
<p:ajax listener="#{languageBean.changeLanguage()}" partialSubmit="true"/>
<f:selectItem itemLabel="DE" itemValue="#{CONST.LANGUAGE_DE}"/>
<f:selectItem itemLabel="EN" itemValue="#{CONST.LANGUAGE_EN}" />
</p:selectOneButton>
and in the method from bean:
public void changeLanguage() {
System.out.println(languageName);
}

JSF page does not retrieve values from back bean

I'm doing a dynamic view according to a dropdown selection:
there's the code:
<h:selectOneMenu value="#{controller.type}" >
<p:ajax listener="#{controller.switchPanels}" update="panels" />
<f:selectItem itemValue="1" itemLabel="option 1" />
<f:selectItem itemValue="2" itemLabel="option 2" />
</h:selectOneMenu>
<h:panelGroup layout="block" id="panels">
<h:panelGroup layout="block" rendered="#{controller.type == '1'}" >
<h:inputText value="#{controller.value}" >
<f:validateRegex pattern="^[0-9a-zA-Z ]*$" />
</h:inputText>
</h:panelGroup>
<h:panelGroup layout="block" rendered="#{controller.type == '2'}" >
Panel 2
</h:panelGroup>
</h:panelGroup>
<h:commandLink action="#{controller.go}">Go</h:commandLink>
The controller:
#ViewScoped
#ManagedBean
public class Controller {
String type = "1";
String value;
// getters and setters
public void switchPanels(AjaxBehaviorEvent event) {
this.value = "";
}
public void go(){
}
...
}
Try this scenario:
- write special characters in the value field
- press Go (causes the validation message to popup)
- try changing the selection and reselect the same panel again
The result is that the field is not cleared even though I clear it in the switchPanels method
Please any explanation would be helpful
Thank you

AjaxBehaviorEvent primefaces3.2

My problem is that the following code returns null but if I look when debuging source then submittedValue has the correct date.
Java:
public void changeOneMenuP(AjaxBehaviorEvent event) {
String id = (String) event.getComponent().getAttributes().get("value");
if(id != null) {
listEntity = escDao.findByxxxx(id, true);
}
}
XHTML:
<h:selectOneMenu id="idSelect" immediate="true" style="width:120px" value="#EntityBB.idUni}" label="#{bundleComunes.unidad}">
<f:selectItem itemLabel="#{bundleComunes.seleccionar}..." itemValue="" />
<f:selectItems value="#{configuracionBB.listEntity}" var="lUni" itemValue="#lUni.id}" itemLabel="#{lUni.desc}" />
<p:ajax event="change" update="sisArm" listener="#{entityBB.changeOneMenuP}" />
</h:selectOneMenu>
Any Idea????
better don't mix primefaces p:ajax with Pure JSF
try using f:ajax
<f:ajax event="change" render="sisArm" listener="#{entityBB.changeOneMenuP}" />
Also , you better access your id like this
public void changeOneMenuP(AjaxBehaviorEvent event) {
listEntity = escDao.findByxxxx(getidUni(), true);//or just idUni
}

Reloading div using Ajax

I have found this topic, where's a bit of code to reload a div using Ajax.
I've tried creating such example, but not successfully.
Here's my code:
index.xhtml
<h:form>
<f:ajax render=":content">
<h:commandButton value="News" action="#{navigationBean.requestPage}">
<f:param name="requestedPage" value="news.xhtml"/>
</h:commandButton>
</f:ajax>
<br/><br/>
<f:ajax render=":content">
<h:commandButton value="News" action="#{navigationBean.requestPage}">
<f:param name="requestedPage" value="games.xhtml"/>
</h:commandButton>
</f:ajax>
</h:form>
</h:panelGroup>
<h:panelGroup id="content" layout="block">
<ui:include src="#{navigationBean.viewedPage}"/>
</h:panelGroup>
backing bean
#ManagedBean
#ViewScoped
public class NavigationBean
{
private String viewedPage;
public NavigationBean()
{
viewedPage = "news.xhtml";
}
public String getViewedPage()
{
return viewedPage;
}
public void setViewedPage(String viewedPage)
{
this.viewedPage = viewedPage;
}
public void requestPage()
{
Map<String,String> map = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap();
viewedPage = map.get("requestedPage");
}
}
how it looks:
So what am I missing? Variable viewedPage is updated, normal labels/texts etc. are updated, but can't get this div working.
Found the solution:
<h:commandButton value="Games" action="#{navigationBean.requestPage}">
<f:param name="requestedPage" value="games.xhtml"/>
<f:ajax execute="#this" render="#none" />
<f:ajax render=":content"/>
</h:commandButton>
plus changing #ViewScoped to #SessionScoped.

Resources