Database, PHP, XML, Javascript Api Google maps
Vanuit de database zet ik met een PHP bestand (via XML) de gegevens om naar Javascript.
Dat gaat allemaal goed.
Nu verander ik in de kaart een cirkel (slepen, groter/kleiner).
Vervolgens voeg ik deze nieuwe gegevens weer toe aan de PHP.
En dan gaat het verkeerd. De nieuwe gegevens worden aangeleverd via een $_POST.
De XML wordt weliswaar netjes gemaakt op grond van de nieuwe gegevens
(markers plaatsen binnen de cirkel).
Maar blijkbaar zit er dan wat verkeerd in de timing met het Javascript?
Met vaste gegevens (Utrecht) geen probleem.
Hier de belangrijkste stukjes (denk ik).
Iemand die me verder kan helpen?
PHP
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
$query = "SELECT * FROM markers";
$result = mysql_query($query);
if (!$result) {
die('Invalid query: ' . mysql_error());
}
header("Content-type: text/xml");
//Start XML file, echo parent node
echo '<markers>';
// Iterate through the rows, printing XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
$haversign= new HaverSign();
if($_SERVER['REQUEST_METHOD'] == 'POST')
{
$lat2 = $_POST['lat'];
$lon2 = $_POST['lon'];
$rad2 = $_POST['rad'];
//echo $lat2." ".$lon2." ".$rad2;
}
//DEFINE (R, 6367000); // Radius van de aarde
//Utrecht
//$lat2 = 52.0901422;
//$lon2 = 5.1096649;
//$rad2 = 180;
//while ($row = @mysql_fetch_assoc($result)){
$lat3 = $row['lat'];
$lon3 = $row['lng'];
$address = $row['address'];
$dist = $haversign->getDistance($lat2,$lon2,$lat3,$lon3);
//echo $dist." ".$rad." ".$address."<br>";
if ($dist < $rad2){
// ADD TO XML DOCUMENT NODE
echo '<marker ';
echo 'name="' . parseToXML($row['name']) . '" ';
echo 'address="' . parseToXML($row['address']) . '" ';
echo 'lat="' . parseToXML ($row['lat']) . '" ';
echo 'lng="' . parseToXML ($row['lng']) . '" ';
echo 'type="' . parseToXML ($row['type']) . '" ';
echo '/>';
}
}
//End XML file
echo '</markers>';
?>
$result = mysql_query($query);
if (!$result) {
die('Invalid query: ' . mysql_error());
}
header("Content-type: text/xml");
//Start XML file, echo parent node
echo '<markers>';
// Iterate through the rows, printing XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
$haversign= new HaverSign();
if($_SERVER['REQUEST_METHOD'] == 'POST')
{
$lat2 = $_POST['lat'];
$lon2 = $_POST['lon'];
$rad2 = $_POST['rad'];
//echo $lat2." ".$lon2." ".$rad2;
}
//DEFINE (R, 6367000); // Radius van de aarde
//Utrecht
//$lat2 = 52.0901422;
//$lon2 = 5.1096649;
//$rad2 = 180;
//while ($row = @mysql_fetch_assoc($result)){
$lat3 = $row['lat'];
$lon3 = $row['lng'];
$address = $row['address'];
$dist = $haversign->getDistance($lat2,$lon2,$lat3,$lon3);
//echo $dist." ".$rad." ".$address."<br>";
if ($dist < $rad2){
// ADD TO XML DOCUMENT NODE
echo '<marker ';
echo 'name="' . parseToXML($row['name']) . '" ';
echo 'address="' . parseToXML($row['address']) . '" ';
echo 'lat="' . parseToXML ($row['lat']) . '" ';
echo 'lng="' . parseToXML ($row['lng']) . '" ';
echo 'type="' . parseToXML ($row['type']) . '" ';
echo '/>';
}
}
//End XML file
echo '</markers>';
?>
Javascript
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
downloadUrl(testm, function(data)
{
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
//alert("markers "+markers.length);
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
//alert(name);
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
.
.
.
.
.
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
{
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
//alert("markers "+markers.length);
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
//alert(name);
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
.
.
.
.
.
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
Toevoeging op 28/04/2016 13:26:42:
Als ik rechtstreeks stuur vanaf de form (zowel $_GET, als $_GET bij PHP) dan komt alles goed aan.
Wanneer ik het stuur vanaf de Iframe op de website, dan gaat het mis. Iframe heb ik even gedaan ivm de refesh anders.
Maar ik kan nu de submit niet op de gewone manier geven.
Iemand een idee?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script type="text/javascript">
$("document").ready(function(){
$(".js-ajax-php-json").submit(function(){
var data = {
"action": "test"
};
data = $(this).serialize() + "&" + $.param(data);
$.ajax({
type: "POST",
dataType: "json",
url: "test_map4.php", //Relative or absolute path to response.php file
data: data,
success: function(data) {
$(".the-return").html(
"lat " + data["lat"] + "<br />lon " + data["lon"] + "<br />radius: " + data["rad"] + "<br />JSON: " +
data["json"]
);
alert("Form submitted successfully.\nReturned json: " + data["json"]);
}
});
return false;
});
});
</script>
$("document").ready(function(){
$(".js-ajax-php-json").submit(function(){
var data = {
"action": "test"
};
data = $(this).serialize() + "&" + $.param(data);
$.ajax({
type: "POST",
dataType: "json",
url: "test_map4.php", //Relative or absolute path to response.php file
data: data,
success: function(data) {
$(".the-return").html(
"lat " + data["lat"] + "<br />lon " + data["lon"] + "<br />radius: " + data["rad"] + "<br />JSON: " +
data["json"]
);
alert("Form submitted successfully.\nReturned json: " + data["json"]);
}
});
return false;
});
});
</script>
Code (php)
1
2
3
4
2
3
4
document.getElementById("lat").value = lat;
document.getElementById("lon").value = lon;
document.getElementById("rad").value = zz;
document.getElementById("form").submit(); // dit werkt niet, ook niet als ik een id en naam toevoeg "form".
document.getElementById("lon").value = lon;
document.getElementById("rad").value = zz;
document.getElementById("form").submit(); // dit werkt niet, ook niet als ik een id en naam toevoeg "form".
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<form class="js-ajax-php-json" method="post" accept-charset="utf-8" target = "stuur">
<input type = "text" id = "lat" name = "lat" value = "52.090737">
<input type = "text" id = "lon" name = "lon" value = "5.121420">
<input type = "text" id = "rad" name = "rad" value = "180">
<input type="submit" name="submit" value="Submit form" />
</form>
<input type = "text" id = "lat" name = "lat" value = "52.090737">
<input type = "text" id = "lon" name = "lon" value = "5.121420">
<input type = "text" id = "rad" name = "rad" value = "180">
<input type="submit" name="submit" value="Submit form" />
</form>
Gewijzigd op 28/04/2016 21:10:24 door Hans De Ridder
Code (php)
1
<form class="js-ajax-php-json" method="post" accept-charset="utf-8" target = "stuur">
Ik mis hier het ID?
document.getElementById("form")
PS:
Verander de name atribute van de submit knop eens ^^
Gewijzigd op 29/04/2016 10:52:44 door Randy vsf
Ook al geprobeerd via de class te submitten.
Heeft denk ik te maken dat na de submit een Ajax wordt geactiveerd.
Want wordt na de submit naar een een PHP gestuurd.
Ik heb met firebug gekeken..als ik op de submitknop druk komen netjes de gebevens uit de database
met de gewijzigde gegevens.
Heb al heel wat uitgeprobeerd.... Maar lukt me steeds niet.
Code (php)
1
<input type="submit" name="submit" value="Submit form" />
Je overschrijft de form.submit hiermee (de functie die je wilt aanroepen).
Verander de name eens, dan werkt het wel.
OM het zichtbaar te maken:
Wat je nu hebt: https://jsfiddle.net/Lyc57snt/
Met de name van de submit knop gewijzigd: https://jsfiddle.net/Lyc57snt/1/
Gewijzigd op 29/04/2016 12:19:54 door Randy vsf
Denk dat het combinatie is van submitten vanaf een javascript functie.
En de Ajax verwacht echt een click op de submitknop.
Ik wil juist die knop overslaan en vanuit script submit geven.
Maar bedankt voor het meedenken...
Kan je eens precies uitleggen wat de bedoeling van dit script is?
Na wat wijzigingen blijkt nu dat aan de POST kant de wijzigingen netjes worden verwerkt.
Maar de GET kant blijft leeg.
Blijkbaar is de afstemming niet juist.
Bovendien heeft dit betrekking op een reload van Javascript Api google maps.
En dat schijnt dan ook nog eens anders te zijn.
Ik heb geen ervaring met auto complete functies, etc.
Als iemand me wat tips kan geven hoe dat in te bouwen in de huidige scripts, heel graag.
Gewijzigd op 01/05/2016 12:13:56 door Hans De Ridder
Het werkt nu allemaal.
Dus nu nog wat opties erin bouwen.