Как сохранить координаты в db с комментариями при нажатии на div и показать в соответствии с координатами в div?

Что мне нужно? Я использую PHP. У меня есть div, когда пользователь нажимает на div, на котором будут отображаться textarea на основе координат, тогда пользователь вводит некоторый текст bla bla bla и нажимает сохранить его и сохраняет в базу данных с координатами и текстом и отображает указатель/маркер на точные координаты при наведении указателя мыши на указатель/маркер показывает, что текст bla bla bla. Это мне нужно.

Я пробую это

CSS

#ClickBox {
    width:640px;
    height:480px;
    cursor:pointer;
    background:#2f2f2f;
    top:50px;
    color:#fff;
    font:bold 12px Arial;
    position: relative;
    top: 50px;
}

HTML

<div id = "ClickBox" style = "left:100px;"> </div>

JQuery/JS

$( '#ClickBox' ).click( function(e){
    var coordX = e.pageX - $(this).offset().left,
        coordY = e.pageY - $(this).offset().top;
    alert( coordX + ' , ' + coordY );
});

вот сценарий этого кода

Ответы

Ответ 1

вот окончательное решение.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Box</title>
<style type="text/css">
#ClickBox {
    width:640px;
    height:480px;
    cursor:pointer;
    background:#2f2f2f;
    top:50px;
    color:#fff;
    font:bold 12px Arial;
    position: relative;
    top: 50px;
    left:100px;
}
</style>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>

<body>
<div id="ClickBox">
  <?php foreach($boxes as $box){ ?>
  <a href="#" data-toggle="tooltip" data-placement="top" title="<?php echo $box['note']; ?>"> <span style="position:absolute;left:<?php echo $box['position_left']; ?>px;top:<?php echo $box['position_top']; ?>px;background-color:#fff;width:10px;height:10px;"></span> </a>
  <?php } ?>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
<script type="text/javascript">
$( '#ClickBox' ).click( function(e){
    var coordX = e.pageX - $(this).offset().left,
        coordY = e.pageY - $(this).offset().top;
        var note = window.prompt("Please Enter Note","Your Note Will Comes Here");
        var values = {coordX:coordX,coordY:coordY,note:note}; 
        var controller = 'box';
        var base_url = '<?php echo site_url(); ?>';
        var  myurl = base_url + controller + '/add_note/';
        $.ajax({
            type: "POST",
            url: myurl,
            data: values,
            complete: function (data) {
                $('#ClickBox').empty().html(data.responseText);
            }
        });


});
</script>
</body>
</html>

Ответ 2

JQuery/JS

$( '#ClickBox' ).click( function(e){
    var coordX = e.pageX - $(this).offset().left,
        coordY = e.pageY - $(this).offset().top;
   $.ajax({
       type: "POST",
       url: 'save.php',
       data: {
         x: coordX,
         y: coordY,
         otherData: 'otherData'
       },
       success: function(data) {
           alert(data);
       },
       dataType: 'text'
   });
});

вам нужно будет создать или обновить цель. В этом случае я использую файл save.php. Я использую PDO, вам нужно будет соответствующим образом обновить соединение с БД.

save.php

<?php

if(intval($_POST['x']) > 0 && intval($_POST['y']) > 0 ) {

    $dbh = new PDO('mysql:host=localhost;dbname=test', $user, $pass);
    $dbSave = $dbh->prepare('INSERT INTO coords (xCord, yCord, other) VALUES (?, ?, ?)');
    $dbSave->execute(array($_POST['x'], $_POST['y'], $_POST['otherData']));
    // check for any errors when saving
    if($dbh->errorInfo() == '00000') {
        echo 'Success: ', $_POST['x'], ', ', $_POST['y'];
    } else {
        echo 'Error';
    }
} else  {
  echo 'Invalid Data';
}

?>