Friends, I made a system to record the points in the DB and then display them on the map. It is working normally, but as I did the BD via ajax, the page is not updated!
I'm doing it this way, but updating the whole page:
//Gravar os dados no SQL, via AJAX
$('#formulario').submit(function() {
var form_data = new FormData();
form_data.append('arquivo', $('#arquivo').prop('files')[0]);
form_data.append('txtLatitude', $('#txtLatitude').val());
form_data.append('txtLongitude', $('#txtLongitude').val());
form_data.append('txtObs', $('#txtObs').val());
$.ajax({
url: 'cadastrar.php', // caminho para o script que vai processar os dados
type: 'POST',
data: form_data,
cache: false,
contentType: false,
processData: false,
success: function(response) {
$('#resultado').html(response);
$("#resultado").fadeTo(3000, 500).slideUp(1000);
$('input').val('');
$('textarea').val('');
setTimeout(function(){
window.location = "principal.php"
},5000);
},
error: function(xhr, status, error) {
alert(xhr.responseText);
}
});
return false;
});
To load the points on the map, from PHP, I'm using the following:
function carregarPontos() {
var json = <? echo $JSON ?>;
$.each(json, function(index, ponto) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(ponto.latitude, ponto.longitude),
title: "Meu ponto personalizado! :-D",
map: map,
icon: ''
});
var infowindow = new google.maps.InfoWindow(), marker;
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent("<img width='80' src=" + ponto.foto + "><br>Foi visto: " + ponto.obs);
infowindow.open(map, marker);
}
})(marker))
});
}
carregarPontos();
How would I do to be able to update the div with the new added point soon after insertion of the data?
Thank you in advance!