Question

我需要什么？ 我正在使用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 );
});

here is the fiddle of this code

Answer 1

here is the solution finally done it.

<!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>

Answer 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';
}

?>

如何在点击div并根据div中的坐标显示时用注释保存db中的坐标？

2 个答案: