hava an inputText and a gmap
<h:inputText class="text" value="#{restaurant.address}" />
<p:gmap id="gmap" center="21.027845,105.852268" zoom="12" type="ROADMAP"
style="width:360px;height:388px"
model="#{restaurant.emptyModel}"
onPointClick="handlePointClick(event);"
widgetVar="map">
First, address="", when i click on gmap, address="xxx" not null.So how can i show its value in inputText tag after clicking on gmap. Thank you!
You can just add an ajax event to the map
<p:gmap id="gmap" center="21.027845,105.852268" zoom="12"
type="ROADMAP" style="width:360px;height:388px"
model="#{restaurant.emptyModel}"
onPointClick="handlePointClick(event);" widgetVar="map">
<p:ajax event="pointSelect" update="theInputText"/>
</p:gmap>
Where theInputText is going to be the id of the <p:inputText/> to be updated
Related
Working in JSF2 and ajax, i can't figure out what's the value of the $.ajax URL attribute in JSF context as i want to submit a form and update a div staying in the same page
Is it the following?
((HttpServletRequest) facesContext.getExternalContext().getRequest()).getContextPath()`
in my opinion you need pass value to the backing bean and set the parameter, after this you need to update this part (div).
see this http://www.mkyong.com/jsf2/4-ways-to-pass-parameter-from-jsf-page-to-backing-bean/
<p:commandButton action="#{bean.setId}" update="div">
<f:attribute name="id" value="12" />
</p:commandButton>
Another way is using flash, see this: https://javaserverfaces.java.net/nonav/docs/2.0/javadocs/javax/faces/context/Flash.html
lets say you have a form like this:
<div id="yourDivId">
<h:outputText value='#{yourControllerClass.yourAttribute}'></h:outputText>
</div>
<h:form>
<h:commandButton value="update">
<f:ajax execute="#form" listener="#{yourControllerClass.updateAttribute}"
render=":yourDiveId">
</f:ajax>
</h:commandButton>
</h:form>
in your ControllerClass/bean:
public final void updateAttribute(AjaxBehaviorEvent event){
// do what ever you want, get values, set another values, after that your Div will be auto updated
}
this way, you don't need to care about ajax params or URL...etc.
EDIT:
if you want to get a paramater from a request URL, then you can get it like this:
String paramVal = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get(key);
I am having a problem, I am firing a ajax event in a selectOneMenu like this: the first one does not fire any event
<p:selectOneMenu id="IdSelectOne" value="#{MB.myentity.myValue}" converter="myConverter1">
.....
</p:selectOneMenu>
<p:selectOneMenu id="IdSelectTwo" converter="myConverter2">
<p:ajax event="change" process="#this" partialSubmit="true"
listener="#{MB.ChangeOption}" update="creatPanel" >
</p:ajax>
</p:selectOneMenu>
The problem is that when the ajax event updates the panel, the first SelectOneMenu sets tu null, i can't use #form because it validates all fields and never do what I need which is show a field based on the selection of the second SelectOneMenu, is there a way to avoid this problem to happend?
This is my backing bean:
public void ChangeOption(AjaxBehaviorEvent event){
.....
}
I solved it by updating just the element I needed and not the complete panel, Thanks
I need to trigger action on the p:selectCheckboxMenu when user finishes his selection(s) (on close). the datatable need to be updated with new selected columns(done).
I couldn't find the event name of the ajax behavior that suits this principal role of a Menu.the default ajax behavior of the p:selectCheckboxMenu updates the datatable on every selection which is annoying for me and the user, i need only the p:selectCheckboxMenu to trigger action when it is closed.
Here is my code :
<p:selectCheckboxMenu id="colser"
scrollHeight="100"
filterMatchMode="contains"
filter="true"
label="Colonnes"
value="#{datatableBean.selectedstateOptions}">
<f:selectItems value="#{datatableBean.columner}"
var="list"
itemLabel="#{list.listname}"
itemValue="#{list.headername}"/>
<p:ajax event="close_event_name_here"
update=":form1:tabexam"
listener="#{datatableBean.updateCols()}"/>
</p:selectCheckboxMenu>
You can try onhide attribute of the p:selectCheckboxMenu.
<p:selectCheckboxMenu id="colser"
scrollHeight="100"
filterMatchMode="contains"
filter="true"
label="Colonnes"
value="#{datatableBean.selectedstateOptions}"
onHide="executeOnOnhide();>
<f:selectItems value="#{datatableBean.columner}"
var="list"
itemLabel="#{list.listname}"
itemValue="#{list.headername}"/>
</p:selectCheckboxMenu>
<p:remoteCommand name="executeOnOnhide"
update=":form1:tabexam" process="#this form:colser"
action="#{datatableBean.updateCols()}"/>
The link for the documentation guide for primefaces for your reference
http://primefaces.org/documentation.html
Hope this helps
i ve this code in my application
i want to submit h:selectBooleanCheckbox value to server,
h:selectBooleanCheckbox inside p:tabView and outside p:dataTable
i want to submit h:selectBooleanCheckbox value from
p:ajax process="scenarioTabViewId:isApprovedBooleanId_checkBox"
scenarioTabViewId:isApprovedBooleanId_checkBox this is checkbox id created by firefox v23.0
and scenarioTabViewId:budgetAnalysisDataTableId this is datatable id
can any one explan,how can i do this?
this is actual code in .xhtml
<ui:composition template="/template/mastertemplate.xhtml">
<ui:define name="content">
<h:form styleClass="form" prependId="false">
<p:panel id="analysisTheBudgetPenel" header="Analysis The Budget">
<p:tabView id="scenarioTabViewId" style="width:850px">
<p:tab title="Scenario One" id="scen">
<h:selectBooleanCheckbox id="isApprovedBooleanId_checkBox" value="#{budgetAnalysisAction.budgetScenarioHescoProposalBean.abc}" />
<p:scrollPanel style="width:800px; height:auto;">
<p:dataTable id="budgetAnalysisDataTableId" rowIndexVar="index" editable="true" resizableColumns="true" value="#{budgetAnalysisAction.budgetScenarioHescoProposalBean.budgetScenarioHescoProposalListBean}" var="budgetScenarioHescoProposalList">
<p:ajax event="rowEdit" process="#{scenarioTabViewId:isApprovedBooleanId_checkBox}" listener="#{budgetAnalysisAction.testAjax}" />
// some columns
// closing tags of above
thanks in advance
First of all, remove <h:form prependId="false">. It's incompatible with ajax. Don't forget to give the form a fixed ID now.
<h:form id="formId" styleClass="form">
Secondly, the process attribute is in your case wrong, you were using an EL expression with the component's cliend ID as a variable in the EL scope. This isn't making any sense. Just make it a normal string.
The rules of referencing the proper client ID can be found in the following answer: How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar". Applying that, it should look something like this (note the : prefix):
process=":formId:scenarioTabViewId:isApprovedBooleanId_checkBox"
An alternative would be to bind the physical checkbox component to the view like so:
<p:selectBooleanCheckbox binding="#{checkbox}" ... />
And then reference its client ID with help of UIComponent#getClientId() like so (also here, note the : prefix):
process=":#{checkbox.clientId}"
I am using an editable primefaces selectOneMenu to display some values. If the user selects an item from the List a textarea should be updated. However, if the user types something in the selectOneMenu, the textarea should not be updated.
I thought I could work this with ajax event out. However, I don't know which event I can use here. I only know the valueChange event. Are there any other events, like onSelect or onKeyUp?
Here is my code:
<p:selectOneMenu id="betreff" style="width: 470px !important;"
editable="true" value="#{post.aktNachricht.subject}">
<p:ajax event="valueChange" update="msgtext"
listener="#{post.subjectSelectionChanged}" />
<f:selectItems value="#{post.subjectList}" />
</p:selectOneMenu>
<p:inputTextarea style="width:550px;" rows="15" id="msgtext"
value="#{post.aktNachricht.text}" />
The PrimeFaces ajax events sometimes are very poorly documented, so in most cases you must go to the source code and check yourself.
p:selectOneMenu supports change event:
<p:selectOneMenu ..>
<p:ajax event="change" update="msgtext"
listener="#{post.subjectSelectionChanged}" />
<!--...-->
</p:selectOneMenu>
which triggers listener with AjaxBehaviorEvent as argument in signature:
public void subjectSelectionChanged(final AjaxBehaviorEvent event) {...}
I'd rather use more convenient itemSelect event. With this event you can use org.primefaces.event.SelectEvent objects in your listener.
<p:selectOneMenu ...>
<p:ajax event="itemSelect"
update="messages"
listener="#{beanMB.onItemSelectedListener}"/>
</p:selectOneMenu>
With such listener:
public void onItemSelectedListener(SelectEvent event){
MyItem selectedItem = (MyItem) event.getObject();
//do something with selected value
}
Be carefull that the page does not contain any empty component which has "required" attribute as "true" before your selectOneMenu component running.
If you use a component such as
<p:inputText label="Nm:" id="id_name" value="#{ myHelper.name}" required="true"/>
then,
<p:selectOneMenu .....></p:selectOneMenu>
and forget to fill the required component, ajax listener of selectoneMenu cannot be executed.
You could check whether the value of your selectOneMenu component belongs to the list of subjects.
Namely:
public void subjectSelectionChanged() {
// Cancel if subject is manually written
if (!subjectList.contains(aktNachricht.subject)) { return; }
// Write your code here in case the user selected (or wrote) an item of the list
// ....
}
Supposedly subjectList is a collection type, like ArrayList. Of course here your code will run in case the user writes an item of your selectOneMenu list.