I'm using gmaps4jsf to show Google Maps in my application, but I would like to update the map after user type his/her stret, city, state and country. This way I could give more accurate information to gmaps4jsf dynamically.
But everytime I fill some of the fields, the maps it's gone. I'm doing this for instance with state:
State:<h:message id="m_state" for="state" styleClass="red" /><br/>
<h:selectOneMenu id="state" value="#{propertyC.property.addressState.state}">
<f:selectItem itemLabel="" itemValue="" />
<f:selectItems value="#{addressB.states('US')}" var="state" itemValue="#{state.key}" itemLabel="#{state.value}" />
<f:ajax event="blur" render="m_state map" />
</h:selectOneMenu>
<br/>
// others fields
<m:map id="map" width="425px" height="250px" address="#{propertyC.property.street}, #{propertyC.property.addressCity.city}, #{propertyC.property.addressState.state}, #{propertyC.property.addressCountry.country}, #{propertyC.property.cep}" zoom="25" autoReshape="true" >
<m:marker>
<m:icon imageURL="http://i.imgur.com/WFJo62Q.png"/>
</m:marker>
</m:map>
How can I show the map dynamically as user type his/her address?
Yes, in order to change the map content dynamically using Ajax, you need to set partiallyTriggered attribute to true.
Check the JSF Mashup remix demo that uses GMaps4JSF 3.0.0 for seeing how you can update the map content using Ajax:
http://www.mashups4jsf.com/gmaps4jsf-examples2-3.0.0/pages/theater2.xhtml
This is also the demo source code:
http://www.mashups4jsf.com/gmaps4jsf-examples2-3.0.0/pages/theater2.xhtml.source
Try to set the following attribute: partiallyTriggered="true".
This will allow partial rendering, sepcially if you are using ajaxfied data submittion.
Related
I have a list of autocompletes that is rendered using a p:dataList. Something like shown below:
<h:panelGroup layout="block" id="outerPanel">
<p:dataList rendered="#{bean.myModel.listOfItems.size()>0}"
var="additionalMP"
value="#{bean.myModel.listOfItems}"
rowIndexVar="index" emptyMessage="">
<div class="wrapper ui-g">
<div>
<p:autoComplete
cache="true"
value="#{bean.myModel.listOfItems[index]}"
completeMethod ="#{handler.getAutoCompleteData}"
rendered ="true"
required="false"
scrollHeight="200"
styleClass="custom"
forceSelection="true">
<p:ajax event="query" global="false"/>
<f:attribute name="filter" value="filterName" />
<f:attribute name="mode" value="edit" />
</p:autoComplete>
</div>
<div>
<p:commandLink value="+ Add" actionListener="#{bean.addAutoComplete()}"
update=":formName:outerPanel"></p:commandLink>
</div>
</div>
</p:dataList>
</h:panelGroup>
So, the Add button inserts a new item in the list and I update the container panel so that the newly added item can be rendered on the UI.
As expected the panel is updated and I see another autocomplete on the UI. But the problem is, all the auto completes now don't work. i.e. they stop firing the query event and don't give any suggestions.
Edited: The partial response that updates the section of form with autocomplete fields, contains some script tags, which probably execute on page ready/load event. So I know that basically the newly added prime faces widgets are not being initialized.
Any idea how I can initialize the newly added autocompletes in the DOM?
The reason for all this trouble was an error in javascript that was caused by trying to scrollTo a particular element on the page from the bean. This crappy line of code in the bean was the source of all the trouble. There was no element on the page with the id messages. A glaring example of why UI should not be coupled in such a way.
RequestContext.getCurrentInstance().scrollTo("formId:messages");
I'm new to primefaces, so I probably did a newbie mistake, but I simply can't google find my answer.
I'm trying to make a hidden panel show after I click on the checkbox, but it doesn't show.
My html looks as follows:
<br></br> Choose one <br></br><br></br>
<p:selectBooleanCheckbox onclick="$(‘#:testid’).css(‘display’,’visible’);" >
</p:selectBooleanCheckbox>
<h:outputText value=" click " />
</h:panelGrid>
<p:panel id="testid" header="TESTHDR" style="display:none" >
<h:panelGrid columns="2" cellpadding="10">
<p:selectBooleanCheckbox value="#{selectBooleanView.mTest}">
</p:selectBooleanCheckbox>
<h:outputText value=" test " />
</h:panelGrid>
</p:panel>
The problem is that my testid panel doesn't show after I click on the checkbox.
I'm probably doing the checkbox action listener wrong, but I honestly can't see the problem myself.
change display visible to display block like this because display visible does not exist in css.
<p:selectBooleanCheckbox onclick="$(‘#:testid’).css(‘display’,’block’);" >
I think thats it if youre code works fine.
Prime faces mangles IDs similar to ASP.NET. Both ensure that the ID is unique across the page so you get something like id="base_container_child_container_your_control_id"
You should find the way to "unmangle" it. Again in .NET you have control.ClientID which you can get from the server. Not sure about PF equivalent.
Anyhow, the solution would be to add name attribute and use
$('input[name=your-id]') // matches exactly 'your-id'
$('input[name^=your-id]') // matches those that begin with 'your-id' if you have group of them
OR use like selector
id*='value'
I am trying to update the watermark messages dynamically based on the selected values from jsf selectOneMenu.The id being used for watermark component is "waterMark1".
The watermark component is linked to an input text field.
On valueChange , i get an error message that the id waterMarkID1 could not be located.
I tried updating an outputText based on the selectOneMenu selection and kept the id as WatermarkID1.It works fine with the outputText.
Is there any way to display the watermark messages based on the bean values.Any help would be appreciated.
<h:selectOneMenu value="#{RequestBean.searchonType}" valueChangeListener="# {RequestBean.getValidateMsg}" id="searchUser">
<f:selectItems value="#{RequestBean.searchonTypeList}" />
<f:ajax event="change" update="waterMarkID1" render="waterMarkID1"/>
</h:selectOneMenu>
<h:inputText id="searchTxt" styleClass="text_small" size="50" value="#{RequestBean.searchTxt}"/>
<p:watermark id="waterMarkID1" for="searchTxt" value="#{RequestBean.waterMarkID}"/>
It seems that you can't update the p:watermark component directly. However, updating the container which holds that component will update your watermark message too:
<p:panel id="panel1">
<h:selectOneMenu value="#{RequestBean.searchonType}" valueChangeListener="# {RequestBean.getValidateMsg}" id="searchUser">
<f:selectItems value="#{RequestBean.searchonTypeList}" />
<f:ajax event="change" render="panel1"/>
</h:selectOneMenu>
<h:inputText id="searchTxt" styleClass="text_small" size="50" value="#{RequestBean.searchTxt}"/>
<p:watermark id="waterMarkID1" for="searchTxt" value="#{RequestBean.waterMarkID}"/>
</panel>
Note that you can reduce the elements enclosed by the p:panel, for example, to h:inputText and p:watermark only. The key is to update the container, not the watermark component.
I do not recommend updating the container that the watermark is enclosed in. In some cases you might have to update an entire form component and if you are updating the form component from inside the form you will be stuck in an infinite loop.
You can bypass this by enclosing the watermark in a and then not render the panel.
<p:outputPanel id="watermark" style="display:block">
<p:watermark/>
</p:outputPanel>
Then simply update the outputPanel.
I want to get current view HTML source and pass it to JSF managed bean as a parameter. Is there anyway in JSF I can do this?
You can't do it in JSF as it doesn't run in the webbrowser at all.
Your best bet is using JavaScript. The below example sets a hidden input value with the HTML source code when the submit button is clicked:
<h:form id="form">
<h:inputHidden id="source" value="#{bean.source}" />
<h:commandButton value="submit" action="#{bean.submit}"
onclick="document.getElementById('form:source').value=document.getElementsByTagName('html')[0].outerHTML"
/>
</h:form>
In the action method, it's in the particular example then just available by the source property.
I have a JSF2 application and a page with the following code:
<h:inputText id="someInput" required="true" />
<p:outputPanel id="itemsPanel">
<ui:repeat var="i" value="#{myBean.itemIndices}" id="items">
<h:inputText
id="itemInput"
value="#{myBean.dataItems[i]}"
/>
<h:panelGroup
layout="block"
styleClass="clear"
rendered="#{((i+1) % 10 == 0)}"
/>
</ui:repeat>
</p:outputPanel>
<br/>
<p:commandButton
classStyle="btn"
value="Add Row"
actionListener="#{myBean.increaseItemsCount}"
update="itemsPanel"
immediate="false"
ajax="true"
/>
The ui:repeat is dynamically rendering a number if text boxes depending on the itemIndices and dataItems properties. The "Add Row" button calls a method that will dynamically increase the number of itemIndices and dataItems, therefore additional text inputs appear.
The current code will not work if there is no value in the text box someInput, because the AJAX request also validates the form and validation fails. Pressing the button in this case has no visual effect, not even feedback for the user that validation did not pass (because I update itemsPanel only).
If I change the button to have immediate="true", then the validation issue is no more. Unfortunately, I want to be able to restore the values of the dynamic input fields that the user might have changed prior adding the new row. The immediate="true" attribute causes the form not to be submitted to the server, therefore the user-entered data will not be persisted.
A possible solution to this could be to add process="all dynamic input ids csv" attribute to the command button and set the immediate attribute back to true. This will cause the server to validate only the inputs specified in the process attribute and they will be persisted. The problem here is that these input ids are dynamically generated by JSF and I cannot come up with a proper way to get them as a CSV. I would also not prefer a solution for dynamically generating ids in myBean relying on assumptions of how JSF would output them.
All suggestions will be greatly appreciated.
You could use process="itemsPanel".
<p:commandButton
classStyle="btn"
value="Add Row"
actionListener="#{myBean.increaseItemsCount}"
process="itemsPanel"
update="itemsPanel"
ajax="true"
/>
You should only move the command button into <h:outputPanel id="itemsPanel">.