Сброс перетаскиваемой позиции Mysql при обновлении страницы php

#php #jquery #mysql #ajax

Вопрос:

Я пытаюсь сохранить и получить смещение jquery перетаскиваемого объекта в mysql. У меня нет проблем с сохранением смещения в mysql, и я также могу получить смещение. Однако, когда я обновляю свою страницу php, данные смещения в моем mysql сбрасываются до нуля. Я не понимаю, почему это происходит, так как я настроил свой ajax на отправку данных только при нажатии кнопки сохранения.

Основная часть php

 <html lang="en">
<head>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <title>Ajax draggable attempt</title>
<!-- PHP GET -->
<?php
$servername = "";
$username = "";
$password = "";
$dbname = "";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$sql2 = "SELECT id, xposition, yposition FROM Divsql";
$result2 = $conn->query($sql2);


    // output data 
    while($row = $result2->fetch_assoc()) {
        $xaksenny = $row["xposition"];
        $yaksenny = $row["yposition"];
    }


$conn->close();
    
?>


 <style>
  #draggable { 
      width: 50px; 
      height: 50px; 
      padding: 0.5em; 
      border: solid;
      top: <?php echo $yaksenny; ?>;
      left: <?php echo $xaksenny; ?>;
     }
     

  </style>

</head>
<body>

<!-- Draggable object -->
<div id="draggable">
  <p>Drag me</p>
</div>
    
    <button id="gempositionen">Save position</button>

    

      <script src="ajaxsetup.js"></script>
<!-- PHP FOR SAVING -->
    <?php include 'gemmerajax.php';?>
</body>
</html>
 

ОПУБЛИКОВАТЬ PHP

                                         <!-- PHP FOR SAVING -->
<?php
$servername = "";
$username = "";
$password = "";
$dbname = "";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
  die("Connection failed: " . $conn->connect_error);
}
    
$xaksen = $_POST['x'];
$yaksen = $_POST['y'];
    
$sql = "UPDATE Divsql SET xposition='$xaksen', yposition='$yaksen'";

if ($conn->query($sql) === TRUE) {
} else {
  echo "Error: " . $sql . "<br>" . $conn->error;
}    
    
$conn->close();

?>
 

ЧАСТЬ JQUERY

    // Save function
$(document).ready(function(){
  $("#gempositionen").click(function(){
          var x = $("#draggable").offset().left;
          var y = $("#draggable").offset().top;
              //Ajax call
          $.ajax({
              type: "POST",
              url: "gemmerajax.php",
              data: {x:x, y:y}
            }).done(function( msg ) {
                alert("Top: "   x   " Left: "   y);
            });
  }); 
}); 


      // Draggable set-up      
$( document ).ready(function() {
$(function() {
  $( "#draggable" ).draggable({ 
      stop: function(event) {

      } 
  }); 
}); 

}); 
 

Часть SQL

 CREATE TABLE Divsql (
id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
xposition INT(255) NOT NULL,
yposition INT(255) NOT NULL,
reg_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
)
 

Ответ №1:

Вы включаете свой сценарий действий. Убери это. Он запускается при каждом обновлении. Вам следует попробовать использовать форму с этим в качестве метода действия.

 <?php include 'gemmerajax.php';?>
 

В вашем jQuery вы можете поймать отправку.