CODEWITHSUNDEEP
phpjavascriptjquerymysql
sirwuffles
sirwuffles

Reputation: 21

Javascript X/Y Coordinates into database?

Ive been asking this question over and over many times in a bad way, so ill try to make it clearer.

I have a page with HTML that has an Attack and Restart Link on the page, the restart link appears after you win.

These links are JavaScript:

<script type="text/javascript">
<!--

function attack() { 
window.location = "attack.php?attack=1";
}


function restart() {
window.location = "battle.php?id=1&status=start";
}

-->
</script>

I want to make it so that once the person has clicked one of these link, (using javascript) it gets the X/Y coords of where the clicked the link and inserts it into the database with the following values:

id
ip
username
x
y
restart

For the id, ip, username and restart I could easily use MYSQL and PHP, but I dont know how to insert Javascript information into the database, which would be the X/Y coords.

Upvotes: 1

Views: 1225

Answers (3)

Fad
Fad

Reputation: 9858

There's an epic library for this called Touché. It gives you a lot of information about the user interaction with the page (e.g clicking, dragging). You can also specify callbacks for AJAX purposes if you want to send data to the database or maybe do something else.

Here's the demo

Upvotes: 0

Mazzaroth
Mazzaroth

Reputation: 801

Using the Insterstellar_coder's X/Y javascript snippet, you could use javascript to make an ajax call to a php script. The ajax call would contain all the parameters as arguments and the php script on the server could get these arguments and do the database insertion.

Edition (20111016211256-0400): added files to show a solution (as far as I understand correctly the issue):

I've worked only the attack part. the restart part is similar.

No AJAX part was needed since I did piggyback on your attack and restart php files.

index.html:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>index</title>
    <script type="text/javascript" charset="utf-8">

        // get continous mouse move events and keep the coordinates in tempX and tempY
        // stolen from http://javascript.internet.com/page-details/mouse-coordinates.html
        var IE = document.all?true:false;
        if (!IE) document.captureEvents(Event.MOUSEMOVE)
        document.onmousemove = getMouseXY;
        var tempX = 0;
        var tempY = 0;
        function getMouseXY(e) {
            if (IE) { // grab the x-y pos.s if browser is IE
                tempX = event.clientX + document.body.scrollLeft;
                tempY = event.clientY + document.body.scrollTop;
            }
            else {  // grab the x-y pos.s if browser is NS
                tempX = e.pageX;
                tempY = e.pageY;
            }  
            if (tempX < 0){tempX = 0;}
            if (tempY < 0){tempY = 0;}  
            return true;
        }



        var ip = "10.0.0.1";
        var username = "me";
        var id = "1";

        function Coordinates(x,y) {
            this.x = x;
            this.y = y;
        }

        function attack(e) { 
            window.location = "attack.php?attack=1&x="+tempX+"&y="+tempY+"&ip="+ip+"&username="+username+"&id="+id;
        }


        function restart() {
            window.location = "battle.php?id=1&status=start";
        }
    </script>
</head>
<body id="index" onload="">
    <input type="button" name="attack" value="attack" id="attack" onClick="attack();">
    <input type="button" name="restart" value="restart" id="restart" onClick="restart();">

</body>

</html>

attack.php

<?php

$METHOD = '_' . $_SERVER['REQUEST_METHOD'];
foreach ($$METHOD as $key => $value) {
    $$key = $value;
}

$log = array("attack" => $attack, "x" => $x, "y" => $y, "ip" => $ip, "username" => $username, "id" => $id);
//print_r($log);

try {
    // assuming you use mongodb locally
    $m = new Mongo(); 
    $db = $m->mydb;
    $logs = $db->logs;
    $logs->insert($log, true);
} catch (Exception $e) {
    echo $e; 
} 

?>

Upvotes: 1

aziz punjani
aziz punjani

Reputation: 25776

You can get the pageX and pageY coordinates from the event object. Here is some rough code. 

$('yourlinkid').click(function(e){      
     var x = e.pageX; // x coordinate
     var y = e.pageY; // y coordinate
});

Upvotes: 0

Related Questions