Выполнить код JavaScript после запроса $_POST в php
Я хочу разместить маркер на карте с геокодированием. Я получил рабочий код для этого:
$(document).ready(function(){
$('#submit').click(function(){
var address = document.getElementById("address").value + ", CH";
geocoder.geocode(
{'address': address},
function(results, status){
if(status == google.maps.GeocoderStatus.OK)
{
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker(
{
map: map,
position: results[0].geometry.location,
title: 'Sie suchten nach:' + ' ' + address
});
}
else if(status == google.maps.GeocoderStatus.ZERO_RESULTS){
window.alert = function(){}
}
else
{
alert("An unknown error occured. Refresh the page or contact the IT team! Error: '" + status + "'");
}
});
});
И я получил эту форму HTML:
<form action="<?php echo $_SERVER['PHP_SELF'] ?>" method="post">
<input type="text" id="address" name="address" placeholder="Enter a zip code" style="width:250px;" onkeypress='filterTextbox(event)' />
<input type="submit" id="submit" name="submit" value="Submit" />
</form>
Если я ударил submit он должен отправить мой запрос на сервер с $_POST а затем пришлите мне ответ. После этого я хочу выполнить JavaScript код. Итак, я сделал это:
<?php
if(isset($_POST['submit'])){
echo "<script>
$(document).ready(function(){
var address = document.getElementById('address').value + ', CH';
geocoder.geocode(
{'address': address},
function(results, status){
if(status == google.maps.GeocoderStatus.OK){
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
title: 'Sie suchten nach:' + ' ' + address
});
}
else if(status == google.maps.GeocoderStatus.ZERO_RESULTS){
window.alert = function(){}
}
else{
alert('An unknown error occured. Refresh the page or contact the IT team! Error: '' + status + ''');
}
});
});
</script>";
}
}
?>
Он отправляет мне ответ (обновление страницы из-за action) но тогда он не выполняет JavaScript код. JavaScript Код предназначен для размещения маркера на месте того, что пользователи набрали в текстовом поле. И это работает нормально, если я выполню это "нормально".
Надеюсь, вы понимаете, о чем я
4 ответа
У вас есть синтаксические ошибки
alert('An unknown error occured. Refresh the page or contact the IT team! Error: '' + status + ''');
должно быть
alert('An unknown error occured. Refresh the page or contact the IT team! Error: \'' + status + '\'');
Другой вероятной причиной является то, что функция геокодера еще не была инициализирована к моменту готовности документа.
Где-то ранее на странице вы должны иметь код, который выглядит примерно так:
google.maps.event.addDomListener(window, 'load', initialize);
function initialize() {
geocoder = new google.maps.Geocoder();
}
Вы должны запустить свой сценарий в этот момент.
Вы можете убедиться, что ваш скрипт будет запущен так:
// Where you load geocoder
var race_won = false;
var load_php_script = function() {
race_won = true;
};
google.maps.event.addDomListener(window, 'load', initialize);
function initialize() {
geocoder = new google.maps.Geocoder();
load_php_script();
}
// Replace document.ready with this:
var php_script = function() {
// .. your old document ready code here ..
}
if (race_won) {
php_script();
}
else {
load_php_script = php_script;
}
Вы уверены, что включили JQuery в ответ? Вы уверены, что элемент id="address" существует? Консоль разработчика браузера сообщает об ошибке? Используйте точки останова и посмотрите, что происходит.
Используйте ajax-запрос и запустите ваш JS-код после успешного выполнения этого запроса.
Вы используете jQuery, поэтому вы можете использовать:
$('#yourform-id').on('submit', function(event) {
$.ajax('/your/url/here', {
type: 'post',
data: { zipcode: $('#address').val() }
}).done(function() {
/* your JS code after successful request goes here */
});
event.stopPropagation();
}
РЕДАКТИРОВАТЬ: Вы можете сделать это также без запроса AJAX. Но важно зарегистрировать .on('submit', function(event) { /* your geocode JS code here */ event.stopPropagation(); } событие в вашей форме, поэтому форма не отправляется.
event.stopPropagation() останавливает вашу форму от перезагрузки страницы и отправки данных формы через HTTP. В более ранних версиях jQuery вы вернулись false но это не рекомендуется сейчас.
Поэтому добавьте этот код в файл HTML, где находится и ваша форма:
$(function() { // on ready
$('#yourform-id').on('submit', function(event) {
var address = document.getElementById('address').value + ', CH';
geocoder.geocode({'address': address}, function(results, status){
if(status == google.maps.GeocoderStatus.OK){
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
title: 'Sie suchten nach:' + ' ' + address
});
} else if(status == google.maps.GeocoderStatus.ZERO_RESULTS){
window.alert = function(){}
} else{
alert('An unknown error occured. Refresh the page or contact the IT team! Error: '' + status + ''');
}
});
event.stopPropagation();
});
});
Я понял, что вы пытаетесь обновить карты Google, когда вы нажимаете кнопку отправки. Я не вижу необходимости в форме, если вы не хотите сохранить адреса в вашей базе данных, но тогда вы должны также использовать ajax. Если я прав, у вас должно быть это:
Объяснение: при нажатии кнопки "Отправить" больше не будет обновляться страница, а адрес из поля ввода будет отправлен на geocode функция, которая сделает вызов AJAX и при успехе status == google.maps.GeocoderStatus.OK выполнит код из того, если.
<div>
<input type="text" id="address" placeholder="Enter a zip code" style="width:250px;" onkeypress='filterTextbox(event)' />
<input type="button" id="submit" value="Submit" />
</div>
$('#submit').click(function(){
var address = document.getElementById('address').value + ', CH';
geocoder.geocode(
{'address': address},
function(results, status){
if(status == google.maps.GeocoderStatus.OK){
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
title: 'Sie suchten nach:' + ' ' + address
});
// save the address in database
$.ajax ({
url: "saveAddress.php",
data: {'address': address},
success: function() { //
alert("Should be saved in database");
}
});
}
else if(status == google.maps.GeocoderStatus.ZERO_RESULTS){
window.alert = function(){}
}
else{
alert('An unknown error occured. ');
}
});
});