-1

I am working on a demo webpage which put some products' volumes onto Google Map in some geojson polygons.

The code that to put volume onto Google Map:

    map.data.addListener('click', function(event){
      //Get area-information from polygon
      var area_information = event.feature.getProperty('area');
      /*var product_volume = showVolume(area_information); DOES NOT WORK
      instead, I am sending the result to a div called p_volume and assign the value of p_volume to product_volume*/
      var infowWindow_contentString = '<b>Area: </b>' + area_information+ '<br>' + '<b>Volume: </b>' + product_volume;
      polygon_infoWindow.setContent(infowWindow_contentString);
      polygon_infoWindow.open(map);
      polygon_infoWindow.setPosition(event.latLng);
    });

Now the showVolume() function:

    function showVolume(area_information){
    var xhr;
    var result;
    if (window.XMLHttpRequest) { // Mozilla, Safari, ...
      xhr = new XMLHttpRequest();
    }       
    else if (window.ActiveXObject) { // IE 8 and older
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    var areainfo = "areainfo=" + area_information;
    xhr.open("POST", "get-data.php", true); 
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");                  
    xhr.send(areainfo);
    xhr.onreadystatechange = display_data;
    //Display Data
    function display_data() {
      if (xhr.readyState == 4) {
        if (xhr.status == 200) {
          //alert(xhr.responseText);    
          document.getElementbyId('p_volume').textContent = xhr.responseText;
        } 
        else {
          alert('There was a problem with the request.');
        }
      }
    }
};

Which calls the get-data.php.

<?php

$servername = "localhost";
$username = "username";
$password = "password";
$db_name = "mockdata";

$areainfo = $_POST['areainfo'];

$con = mysqli_connect($servername, $username, $password, $db_name);
    if (!$con) {
        die('Could not connect: ' . mysqli_error($con));
}

$stmt = $con->prepare('SELECT Volume from mockdata WHERE Area = ?');
$stmt->bind_param('s', $areainfo);
$stmt->execute();

$result = $stmt->get_result();

//echo $areainfo; //Testing if parameter passed into php

while ($row = $result->fetch_assoc()) {
// do something with $row
    echo "{$row["Volume"]}";

}
mysqli_close($con);
?>

For each query, I am expecting only one integer from the Volume in my table. I checked the parameter is passed to get-data.php by simply 

echo $areainfo;

I learned:

var product_volume = showVolume(area_information);

does not work....

Edit

It seems that the 

<div><id = p_volume></div>

is getting the query result. However, my product_volume still couldn't get the result from the p_volume by simply doing

product_volume = getElementbyId('p_volume').innerHTML;

I am wondering what is wrong.

I am new to all these 3 languages. Please be gentle when criticizing "Go learn xxx language".

Thanks in advance.

simonww
  • 13
  • 3
  • Have you watched the AJAX request / response in the browser's developer tools? Are there any errors reported? Are you running this on a web-server? – Jay Blanchard Jan 03 '17 at 16:32
  • 1
    [Little Bobby](http://bobby-tables.com/) says ***[your script is at risk for SQL Injection Attacks.](http://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php)*** Learn about [prepared](http://en.wikipedia.org/wiki/Prepared_statement) statements for [MySQLi](http://php.net/manual/en/mysqli.quickstart.prepared-statements.php). Even [escaping the string](http://stackoverflow.com/questions/5741187/sql-injection-that-gets-around-mysql-real-escape-string) is not safe! [Don't believe it?](http://stackoverflow.com/q/38297105/1011527) – Jay Blanchard Jan 03 '17 at 16:32
  • @Jay Blanchard If you meant watching the console log in Chrome, I did, and there was no error. I am running this on XAMPP apache server and MySQL server. – simonww Jan 03 '17 at 16:35
  • @JayBlanchard As I explained, this is a demo website to test some concept. I am very new the web languages. – simonww Jan 03 '17 at 16:36
  • 1
    I hate when people say *"I'm not that far along..."* or *"This site will not be public..."* or *"It's only for school, so security doesn't matter..."*. If teachers and professors are not talking about security from day one, they're doing it wrong. Challenge them. They're teaching sloppy and dangerous coding practices which students will have to unlearn later. I also hate it when folks say, *"I'll add security later..."* or *"Security isn't important now..."* or *"Ignore the security risk..."*. If you don't have time to do it right the first time, when will you find the time to add it later? – Jay Blanchard Jan 03 '17 at 16:37
  • @JayBlanchard I have to say you are very correct and I do respect you reminding me about security considerations. I am in no way expert in web building. – simonww Jan 03 '17 at 16:48
  • @simonww the problem is that you do have to learn the basics of the languages and technologies you are working with. Your php - MySQL code is full of errors and malpractices. Can't really comment on the js part – Shadow Jan 03 '17 at 16:59

1 Answers1

0

Okay, I got them to work finally. My code was right when sending the parameter to PHP and have the PHP to process it. Then we need a container (<div>) to receive the data by doing getElementbyId('p_volume') = xhr.responseText.

Then in the Google Map

map.data.addListener('click', function(event){ //Get FSA from polygon var areainfo = event.feature.getProperty('area'); showVolume(areainfo); var product_volume = document.getElementById("p_volume").innerHTML; var infowWindow_contentString = '<b>FSA: </b>' + FSA + '<br>' +'<b>Volume: </b>' + product_volume; polygon_infoWindow.setContent(infowWindow_contentString); polygon_infoWindow.open(map); polygon_infoWindow.setPosition(event.latLng); });

The data will be retrieved from the hidden <div><id = "p_volume", style = "display: none;">

Please do comment on the security/malpractice aspect since I really want to learn.

Edit

Update: The code does not update the <div> immediately, it took a couple of clicks more to get the data updated. Can someone explain the synchronization issue in the code? I also have a mouseover action on the polygons in Google Map, they have the same issue.

simonww
  • 13
  • 3