Pass variables as parameter when loading page

Question

I have a Function that marks the location where a mouse click was given, putting a red circle in the click and saving the coordinates of where this click occurred.

Script that displays the mouse position when clicked on the page.

$(document).ready(function(){
    $(document).click(function(e){
        document.getElementById('coord').value =( e.pageX + ":" + e.pageY)
    });
})

Script that generates the clicked location marking.

 function click_pos(e, ele) {
   var x = e.pageX;
   var y = e.pageY;
   circle = document.getElementById('circle');
   circle.style.left = x-15 + 'px';
   circle.style.top = y-152+ 'px';
   circle.style.display = 'block';
 }

The manner in which the marking is performed

 <div class="row" onclick="click_pos(event, this)" id="ele" >
    <div id="circle"></div>
        <div class="row" id="teste" > </div> 
 </div>

However, I need another page when loaded, take the sent coordinates and generate the tag at the location of the X:Y coordinate

I can pass this coordinates without problems, but I am not knowing how to load the page with the tag in this coord.

Answer 1

You can generate a JSON in your back-end (PHP) and load it via AJAX on your page through a URL defined by you (which can change according to the ID of the page, user, etc).

Example (in its back-end):

// Arquivo pegaCoordenadas.php

// Puxa todas as coordenadas de alguma consulta no banco
// e armazena o array na variável $coordenadas, exemplo:
$resultado = $mysqli->query("SELECT * FROM coordenadas WHERE ..."));
$coordenadas = $resultado->fetch_array(MYSQLI_NUM);

// Retorna essas coordenadas em formato JSON para a requisição AJAX
echo json_encode($coordenadas);

And in your client-side:

//retornaria algo como {x: 105, y: 387}
$.getJSON('pegaCoordenadas.php', gerarMarcacoes); 

function gerarMarcacoes(coordenadas) {
    var x = coordenadas.x;
    var y = coordenadas.y;

    circle = document.getElementById('circle');
    circle.style.left = x-15 + 'px';
    circle.style.top = y-152+ 'px';
    circle.style.display = 'block';
}

What this code will be doing is basically making an AJAX request that returns the coordinates you want, and after returning these coordinates, you can use them in another function (gerarMarcacoes()) to create markup on your page.