问题描述
我正在设计一个带有primefaces 3.5和Java 8的网页。
此xhtml页面上有一个对话框，当用户按下某个按钮时会打开该对话框。此对话框包含有关地理位置和自动填充的javascript。根据此功能填充的一些输入文本（例如地址行1等），而其他由用户填充的文本（例如地址行2等）。
我的问题是，当用户完成地理位置操作并尝试填充手动字段时，对话框会不断地向右和向左移动。就像对话框试图停留在原处一样。
我没有分享整个页面。有很多字段是手动填充的，因此为了避免混淆，我删除了它们，但我只留下了地址行2。我没有删除自动填充的字段。您可以在下面看到代码。
<p:dialog id="addressDialog"
onShow="#{managedBeanForPlaceOrder.addressAdd}"
widgetvar="addressDialogWidget" modal="true" header="Ship To Address"
closable="false"
rendered="#{managedBeanForPlaceOrder.customer.addressCreationGrant}"
resizable="false"
width="400"
style="max-height:700px; overflow:auto">
<p:messages id="addressMessages" autoUpdate="true"></p:messages>
<style type="text/css">
::-webkit-input-placeholder {
text-transform: initial;
}
:-moz-placeholder {
text-transform: initial;
}
::-moz-placeholder {
text-transform: initial;
}
:-ms-input-placeholder {
text-transform: initial;
}
.pac-item {
white-space:normal !important;
}
</style>
<script type="text/javascript">
// This example displays an address form,using the autocomplete feature
// of the Google Places API to help users fill in the @R_920_4045@ion.
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
var placeSearch,autocomplete;
var componentForm = {
street_number: 'short_name',route: 'long_name',locality: 'long_name',administrative_area_level_1: 'short_name',administrative_area_level_2: 'short_name',country: 'long_name',postal_code: 'short_name',political: 'short_name'
};
function initAutocomplete() {
// Create the autocomplete object,restricting the search to geographical
// location types.
autocomplete = new google.maps.places.Autocomplete(
/** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),{types: []});
// When the user selects an address from the dropdown,populate the address
// fields in the form.
autocomplete.addListener('place_changed',fillInAddress);
document.getElementById('autocomplete').value = document.getElementById("addressForm:cua1").value;
$(document).on("change",".pac-target-input",function(event) {
document.getElementById("addressForm:cua1").value = document.getElementById('autocomplete').value;
});
}
function fillInAddress() {
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();
document.getElementById("addressForm:cua1").value = "";
document.getElementById("addressForm:cua2").value = "";
for (var component in componentForm) {
if(!component && !document.getElementById(component)){
document.getElementById(component).value = '';
document.getElementById(component).disabled = false;
}
}
// Get each component of the address from the place details
// and fill the corresponding field on the form.
for (var i = 0; i < place.address_components.length; i++) {
for (var j = 0; j < place.address_components[i].types.length; j++) {
var addresstype = place.address_components[i].types[j];
if (componentForm[addresstype])
{
var val = place.address_components[i][componentForm[addresstype]];
if (addresstype == "locality")
{
document.getElementById("addressForm:town").value = val;
}
else if (addresstype == "street_number" || addresstype == "route" || addresstype == "neighborhood")
{
if (val.length != 0){
if(document.getElementById("addressForm:cua1").value.length != 0) {
document.getElementById("addressForm:cua1").value = document.getElementById("addressForm:cua1").value.trim() + " " + val;
}
else{
document.getElementById("addressForm:cua1").value = val;
}
}
}
else if (addresstype == "country")
{
if(val.toupperCase() === "CANADA")
{
countryCode.selectValue("CA");
document.getElementById("cscdInput").value = "CA";
}
else if(val.toupperCase() === "UNITED STATES")
{
countryCode.selectValue("US");
document.getElementById("cscdInput").value = "US";
}
}
else if (addresstype == "postal_code")
{
document.getElementById("addressForm:postal_code").value = val;
document.getElementById("opponoInput").value = val;
}
else if (addresstype == "administrative_area_level_1")
{
stateProvince.selectValue(val);
document.getElementById("stateInput").value = val;
}
}
}
}
document.getElementById('autocomplete').value = document.getElementById("addressForm:cua1").value;
}
// Bias the autocomplete object to the user's geographical location,// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var geolocation = {
lat: position.coords.latitude,lng: position.coords.longitude
};
var circle = new google.maps.Circle({
center: geolocation,radius: position.coords.accuracy
});
autocomplete.setBounds(circle.getBounds());
});
}
}
function getAllCodes(){
stateProvince.selectValue(document.getElementById("stateInput").value);
document.getElementById("addressForm:postal_code").value = document.getElementById("opponoInput").value;
}
</script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAOHX1eQCUKHqsNmzArqsSmagr5_uesIVE&libraries=places&callback=initAutocomplete"
>
</script>
<div style="width: 350px;margin: 0 auto;">
<div style="width: 235px; margin: 0 auto;">
<div style="margin-top: 10px; display:none">
<p:inputText maxlength="29" style="text-transform:capitalize;" id="cua1"
value="#{managedBeanForPlaceOrder.addressBean.OPcua1}"></p:inputText>
<p:watermark value="*Address Line 1" for="cua1"></p:watermark>
</div>
<div style="margin-top: 10px;">
<p:inputText maxlength="29" style="text-transform:capitalize;" id="cua2" disabled="false"
value="#{managedBeanForPlaceOrder.addressBean.OPcua2}"></p:inputText>
<p:watermark value="Address Line 2" for="cua2"></p:watermark>
</div>
<div style="margin-top: 10px;">
<p:selectOneMenu id="cscd" widgetvar="countryCode"
value="#{managedBeanForPlaceOrder.addressBean.OPCSCD}">
<f:selectItem itemValue="" itemLabel="*Country" />
<f:selectItems value="#{managedBeanForPlaceOrder.countryCodes}"></f:selectItems>
<p:ajax
listener="#{managedBeanForPlaceOrder.countryChangedListener}" oncomplete="getAllCodes()"
update="ecarGroup ponoGroup" process="cscd"></p:ajax>
</p:selectOneMenu>
</div>
<div style="margin-top: 10px;">
<h:panelGroup id="ecarGroup" >
<p:selectOneMenu id="ecar" widgetvar="stateProvince"
value="#{managedBeanForPlaceOrder.addressBean.OPECAR}">
<f:selectItem itemValue=""
itemLabel="*State/Province" />
<f:selectItems value="#{managedBeanForPlaceOrder.stateCodes}"></f:selectItems>
</p:selectOneMenu>
<script type="text/javascript">
$('#addressForm\\:ecar').on('click',function(e){
if($('#addressForm\\:cscd_label').text() == 'Country')
{
$('#addressForm\\:ecar_panel').hide();
$('#addressForm\\:addressMessages').html(
"<div class=\"ui-messages-error ui-corner-all\">" +
"<span class=\"ui-messages-error-icon\">" +
"</span><ul><li>" +
"<span class=\"ui-messages-error-summary\">" +
"Please first select country.</span></li>" +
"</ul></div>"
);
}
});
</script>
</h:panelGroup>
</div>
</div>
</div>
</p:dialog>
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）