send javascript variable value to sql query in PHP on different page

Question

I have 2 elements.Auto search bar and Map(mapbox-gl)

• I want-load the location of user whose id is searched.
• I am getting-same marker(location) for every user

1. I am loading "get_pin.php" through xmlHttpRequest from the main page("monitor.php").
2. "get_pin.php" has the query $results=$myPDO->query("SELECT * FROM clients where id =".$user_id); Using this query I am taking the id of the person whose name is searched and then getting data for that id creating a geojson and this is the json encoded result of get_pin.php. "geometry":{"type":"Point","coordinates":[143.3601,42.6500000000001]},"type":"Feature","properties":[]}

Right now, I am getting , SELECT * FROM clients where id = 1,by hardcoding the value.So even if I search different person's id. It loads the marker at the same location.

What I tried to solve this- "monitor.php" HTML

<tr>//table appears after the id is searched
<th>id</th>
<td><label id="lbl_id" name="lbl_id">'.$row["id"].'</label></td>
</tr>//further I also get other info of user in the same table

on the same page-

function load_data(query, typehead_search = 'yes') {
            $.ajax({
            url: "dbconn.php",
            method: "POST",
            data: { query: query, typehead_search: typehead_search },
            success: function (data) {
                //show the table inside employee_data div
                $('#employee_data').html(data);
                //get the id and store it in js variable 
                var l_id = document.getElementById('lbl_id').textContent;
                    alert(l_id);//I am getting the correct id
                    $.ajax({
                        type : "POST",
                        url  : "get_pin.php",
                        data : {l_id : l_id},
                        success: function(data){  
                                console.log(data);
                                },
                        error: function(err){
                            console.log(err);
                        }
                    });
            }
        });
    }

and on get_pin.php I am getting the data

    if (isset($_POST["l_id"])) {
         require ("db_conn.php");  
         $user_id =$_POST["l_id"];
            try {             
            $results=$myPDO->query("SELECT * FROM clients where id =".$user_id); 
            /*get data convert it to a geojson*/

error- the success function inside ajax gives me the correct geojson output for the particular id. But inside my xmlhttprequest where I am calling get_pin.php.There,the response is blank. And I get-

Uncaught SyntaxError: Unexpected end of JSON input
    at JSON.parse (<anonymous>)
    at XMLHttpRequest.request.onload

How can I pass the value of id from table to get_pin.php and get that marker on map?

Answer 1

I got the solution. Instead of jQuery ajax I have used XMLHttpRequest to pass the variables.

//this is to get and show the initial position of the user
var url = 'get_marker.php?id=';

map.on('load', function() {
  var request = new XMLHttpRequest();
  //I have added setInterval here to get updated value 
  var clearIntervalValue = window.setInterval(function() {

    var id = document.getElementById('l_id').textContent;

    url = 'get_marker.php?id=';
    url = url + id;
    request.open('GET', url, true);

    request.onload = function() {

      if (this.status >= 200 && this.status < 400) {
        console.log(this.response);

        var json = JSON.parse(this.response);

        map.getSource('drone').setData(json);
        map.flyTo({
          center: json.geometry.coordinates,
          speed: 0.5
        });

      } else if (this.status == 404) {
        clearInterval(clearIntervalValue);
      }

    };
    request.send();

  }, 2000);
  //rest of the code...
});

<tr>
  <th>id</th>
  <td><label id="l_id" name="l_id">'.$row["id"].'</label></td>
</tr>

In get_marker.php

<?php
  //check if the id is set
  if (isset($_GET["id"])) 
  {
   //include database connection file
   require ("db_conn.php");
   $results=$myPDO->query("SELECT * FROM clients where id =".$_GET["id"]); 
  }
?>