Pass variables as parameter when loading page

Question

Pass variables as parameter when loading page

Navigation

#1 by (1 votes)

0

I have a function that marks the place where a mouse click was made, putting a red circle on the click and saving the coordinates of where this click occurred.

Script that displays the mouse position when you click the page.

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

Script that generates markup of the clicked place.

 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 way the markup is executed

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

But I need another page when loaded, take the sent coordinates and generate the mark in place of the X coordinate: Y

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

php javascript html

asked by anonymous 03.08.2016 / 16:55

1 answer

How to update magento stock by consuming a CSV file JQuery - Compare 2 arrays in one each

score 1 · Accepted Answer

You can generate a JSON in your backend (PHP) and upload it via AJAX on your page through a URL you define (which can change according to the page ID, user, etc.).

Example (on your backend):

// 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 on 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 do is basically make an AJAX request that returns the coordinates you want, and after returning these coordinates, you can use them in another function ( gerarMarcacoes() ) to create the tag in your page.