I have an issue with missing ajax fired events. I have tried as much as I can to resolve this with searches, reading and experimentation.
Can someone assist in providing guidance?
Here is the form part:
<h:form>
...
<h:outputLabel>Chart Category:</h:outputLabel>
<h:selectOneMenu id="chartcategory" value="#{chartBean.category}" >
<f:ajax event="change" listener="#{chartBean.categoryChangedAJAX}"/>
<f:selectItems value="#{chartBean.categories}"/>
</h:selectOneMenu>
<h:outputLabel>Chart Type:</h:outputLabel>
<h:selectOneMenu value="#{chartBean.type}">
<f:selectItems id="charttypes" value="#{chartBean.types}"/>
</h:selectOneMenu>
...
</h:form>
Here is the code:
public void categoryChangedAJAX(final AjaxBehaviorEvent ajaxBehaviorEvent) {
System.out.println(" -------------------------------------- categoryChanged entered");
setTypes(chartCategoryAndTypes.getChartTypesForCategory( getCategory() ));
System.out.println("for Category: "+ getCategory() );
Arrays.stream(getTypes()).forEach(System.out::println);
setColumnVisibilities();
}
Related
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);
}
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
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
}
I need to pass a parameter to the server in my ajax request. Please see the code below.
Scope: View Scope
Without f:param
<p:column width="40">
<h:inputText id="originalCostInputTxt" value="#{articlePromo.costoBruto}"
<f:ajax event="change"
execute="#this"
listener="#{promotionDetailManagedBean.onCostoBrutoChange}">
</f:ajax>
</h:inputText>
</p:column>
Managed Bean
public final void onCostoBrutoChange(final AjaxBehaviorEvent event) {
createCostoBrutoOptions(promoArticlesList);
}
In this case, the method onCostoBrutoChange() does gets invoked. But, it does not get invoked when I include f:param. Please see the code below.
With f:param
<p:column width="40">
<h:inputText id="originalCostInputTxt" value="#{articlePromo.costoBruto}"
<f:ajax event="change"
execute="#this"
listener="#{promotionDetailManagedBean.onCostoBrutoChange}">
<f:param value="#{articlePromo.promocionArticuloId}" name="myId"/>
</f:ajax>
</h:inputText>
</p:column>
Managed Bean
public final void onCostoBrutoChange(final AjaxBehaviorEvent event) {
createCostoBrutoOptions(promoArticlesList);
String id = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("myId");
}
Not able to identify whats incorrect in this code. Please guide.
Thanks,
Shikha
The <f:param> works in links and buttons only, not in inputs.
If your environment supports EL 2.2, just pass it as method argument instead:
<h:inputText ...>
<f:ajax listener="#{bean.listener(item.id)}" />
</h:inputText>
public void listener(Long id) {
// ...
}
You can also just pass the whole item:
<h:inputText ...>
<f:ajax listener="#{bean.listener(item)}" />
</h:inputText>
public void listener(Item item) {
// ...
}
If your environment doesn't or can't support EL 2.2, then evaluate EL programmatically instead.
public void listener() {
FacesContext context = FacesContext.getCurrentInstance();
Long id = context.getApplication().evaluateExpressionGet(context, "#{item.id}", Long.class);
// ...
}
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.