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.
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 have a dynamically expansible table with an add and remove button:
<h:form>
<h:dataTable id="tblFields" value="#{bean.fields}" var="field">
<h:column>
<h:inputText value="#{field.value}" />
</h:column>
<h:column>
<h:inputText value="#{field.value2}" />
</h:column>
<h:column>
<h:inputText value="#{field.value3}" />
</h:column>
<h:column>
<h:commandButton value="Remove">
<f:ajax listener="#{bean.onButtonRemoveFieldClick(field)}" immediate="true" render="#form" />
</h:commandButton>
</h:column>
</h:dataTable>
<h:commandButton value="Add">
<f:ajax listener="#{bean.onButtonAddFieldClick}" execute="#form" render="tblFields" />
</h:commandButton>
</h:form>
This is the associated backing bean:
#Named
#ViewScoped
public class Bean {
private List<Field> fields;
#PostConstruct
public void init() {
fields = new ArrayList();
fields.add(new Field());
}
public List<Field> getFields() {
return fields;
}
public void setFields(List<Field> fields) {
this.fields = fields;
}
public void onButtonRemoveFieldClick(Field field) {
fields.remove(field);
}
public void onButtonAddFieldClick() {
fields.add(new Field());
}
}
The use case is as follows:
Press the add button multiple times.
Fill out all values.
Press the remove button of one random row.
After that, all values filled so far disappears and show up blank. How can I keep them filled after pressing the remove button?
It's because you're in the remove button ajax-updating the entire form without processing the newly submitted input values. The immediate="true" on ajax listener skips the processing of all input components which do not have immediate="true" set. You need to remove the attribtue. The absence of execute attribute will cause only the current component (#this) to be processed by default. You need to explicitly specify #form.
So, just do the same as in your add button. Replace immediate="true" by execute="#form".
<f:ajax listener="#{bean.onButtonRemoveFieldClick(field)}" execute="#form" render="#form" />
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
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 am trying to update the google map of PrimeFaces with the new latitude, longitude with the help of p:ajax, but it is not working...I'm using JSF 2.0. I have used p:ajax earlier in the similar way and it worked beautifully. Any idea why this does not work? The following is the code, contForm is the id of the form.
<h:outputText value="Latitude :"/>
<h:inputText value="#{confirmBrandRegistration.newBrand.mapLatitude}" size="10">
<p:ajax event="blur" update="contForm:gMapID"/>
</h:inputText>
<h:outputText value=" Longitude :"/>
<h:inputText value="#{confirmBrandRegistration.newBrand.mapLongitude}" size="10" >
<p:ajax event="blur" update="contForm:gMapID"/>
</h:inputText>
<h:outputText value=" Marker :"/>
<h:inputText value="#{confirmBrandRegistration.newBrand.mapMarker}" size="20" >
<p:ajax event="blur" update="contForm:gMapID"
listener="#{confirmBrandRegistration.updateMarker}"/>
</h:inputText>
</h:panelGrid>
<p:outputPanel id="gMapID">
<f:view contentType="text/html">
<p:gmap center="#{confirmBrandRegistration.newBrand.mapLatitude}, #{confirmBrandRegistration.newBrand.mapLongitude}"
zoom="16" type="HYBRID" streetView="true"
model="#{confirmBrandRegistration.simpleModel}"
style="width:500px;height:400px" />
</f:view>
</p:outputPanel>
I solved it right now:)
index page:
<h:panelGroup id="pmap">
<p:inputText value="#{mapManager.address}" label="Adresa" />
<h:outputText value="#{mapManager.geo}" id="m" />
<p:commandButton value="OK" actionListener="#{mapManager.updateMapCenter(ae)}" update="pmap" />
<p:gmap center="#{mapManager.geo}"
zoom="7"
type="HYBRID"
style="width:800px;height:400px"
streetView="true"
model="#{mapManager.map}"
overlaySelectListener="#{mapBean.onMarkerSelect}"
>
<p:gmapInfoWindow>
<p:outputPanel style="text-align:center; display:block; margin:auto:">
<h:outputText value="#{mapManager.marker.title}" />
wserw
</p:outputPanel>
</p:gmapInfoWindow>
</p:gmap>
</h:panelGroup>
part of managed bean:
private MapModel map;
private Marker marker;
private String address;
private String geo="49.817491999999992, 15.4729620";
public MapManager() {
}
#PostConstruct
public void init() {
events = edao.findAll();
map = new DefaultMapModel();
for (Event event : events) {
Marker m=new Marker(new LatLng(event.getLat(), event.getLng()), event.getName());
map.addOverlay(m);
}
}
public void updateMapCenter(ActionEvent ae) {
GMapService gs=new GMapService();
LatLng geo=gs.getGeocode(address);
this.geo=geo.getLat()+","+geo.getLng();
}
hope it solved your problem.