Buona sera a tutti,
ho integrato in un form fatto con Yii l’autocomplete di google e fin qui tutto ok.
Il problema è che, una volta apparsi i valori, se li seleziono col mouse nessun problema; se, invece, clicco invio mi viene ricaricata la pagina.
Allora avevo risolto il problema mettendo nel form l’attributo ‘onsubmit’ => ‘event.preventDefault()’ e funzionava tutto quanto. Però, premendo sul pulsante di submit, non mi inviava piu il form.
C’è un modo per avere una cosa e l’altra?
Se ci mostri del codice è più facile.
Il codice è tanto da mostrare: solo il form sono 300 righe di codice.
Da quanto ho capito, premendo invio, si fa automaticamente il submit del form con la conseguente ricarica della pagina (?) .
Inizialmente avevo risolto disabilitando questa opzione, ma in questo modo però non funge il pulsante submit.
Provo a postare le parti essenziali del codice.
Form
$form = $this->beginWidget('CActiveForm', array(
'id' => 'name-form',
'enableClientValidation' => true,
'enableAjaxValidation' => true,
'htmlOptions' => array(
'class' => 'form-horizontal',
'enctype' => 'multipart/form-data',
'onsubmit' => 'event.preventDefault()', // aggiunta per far l'autocomplete premendo invio
),
'clientOptions' => array(
'validateOnSubmit' => true,
),
));
?>
// altro codice omesso
// ..............
// input per l'autocomplete
<div class="row-fluid">
<?php echo $form->textField($group, 'address', array('class' => 'span12', 'id' => 'inputAddress', 'placeholder' => 'type address')); ?>
</div>
// altro codice omesso
<?php echo CHtml::Submitbutton("Invia", array('class' => 'btn btn-primary btn-large pull-right', 'id' => 'submitForm'))
?>
Autocomplete Google (lo richiamo in body onLoad)
var map;
function initialize()
{
var mapOptions =
{
zoom: 14,
center: new google.maps.LatLng(41.895466, 12.482324),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("mappa"), mapOptions);
var input = document.getElementById('inputAddress');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
map: map
});
google.maps.event.addListener(autocomplete, 'place_changed', function()
{
var place = autocomplete.getPlace();
infowindow.close();
marker.setVisible(false);
input.className = '';
var place = autocomplete.getPlace();
if (!place.geometry) {
// Inform the user that the place was not found and return.
input.className = 'notfound';
return;
}
// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
marker.setIcon(/** @type {google.maps.Icon} */({
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(35, 35)
}));
marker.setPosition(place.geometry.location);
marker.setVisible(true);
var address = '';
if (place.address_components) {
address = [
(place.address_components[0] && place.address_components[0].short_name || ''),
(place.address_components[1] && place.address_components[1].short_name || ''),
(place.address_components[2] && place.address_components[2].short_name || '')
].join(' ');
}
infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
infowindow.open(map, marker);
});
}
Invece che richiamare
$form = $this->beginWidget('CActiveForm', array(
'id' => 'name-form',
'enableClientValidation' => true,
'enableAjaxValidation' => true,
'htmlOptions' => array(
'class' => 'form-horizontal',
'enctype' => 'multipart/form-data',
'onsubmit' => 'event.preventDefault()', // aggiunta per far l'autocomplete premendo invio
),
'clientOptions' => array(
'validateOnSubmit' => true,
),
));
fai una cosa più complessa tipo
<script>
function miaFunzione(event) {
event.preventDefault();
// Aggiungi qui il codice che ti serve
}
</script>
<?php
$form = $this->beginWidget('CActiveForm', array(
'id' => 'name-form',
'enableClientValidation' => true,
'enableAjaxValidation' => true,
'htmlOptions' => array(
'class' => 'form-horizontal',
'enctype' => 'multipart/form-data',
'onsubmit' => 'miaFunzione(event)', // aggiunta per far l'autocomplete premendo invio
),
'clientOptions' => array(
'validateOnSubmit' => true,
),
));
Scusa, ma facendo così poi non mi disabilità il submit del form?
Cioè, in miaFunzione(event) cosa ci dovrei mettere? Tutto il codice Autocomplete di google?
No, solo la parte che gestisce il submit. Con l’event. preventDefault() blocchi tutto, quindi oltre ad eseguire quel comando ti puoi preoccupare anche dell’invio.
Abbi pazienza,
ti spiacerebbe farmi un piccolo esempio pratico?
Cioè, in miaFunzione cos’è che ci devo mettere esattamente?
Ok nulla, lascia stare. Il tuo problema è nell’invio del form e non nell’auto complete. Beh, in questo caso io fare l’invio del form via ajax.