I have the following code, do not pass the variables to save-position.php to perform the update.
index.php:
<?php
$servername = "localhost";
$username = "root";
$password = "password";
$dbname = "coords";
// Create connection
$con = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($con->connect_error) {
die("Connection failed: " . $con->connect_error);
}
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="//code.jquery.com/jquery-2.0.2.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<style type="text/css">
.draggable {
width: 50px;
height: 50px;
padding: 0.5em;
float: left;
margin: 0 10px 10px 0;
cursor:move;
margin-bottom:20px;
}
#containment-wrapper {
width: 500px;
height: 500px;
border:2px solid #ccc;
padding: 10px;
}
h3 {
clear: left;
}
</style>
<script type="text/javascript">
/* GRANT THE DIV WITH draggable CLASS TO BE DRAGGABLE */
$(document).on("ready", function(){
$(".draggable").draggable({
containment: "#containment-wrapper"
});
})
/* WHEN USER HIT THE SAVE BUTTON */
$(document).on("ready", "#save", function(){
$(".draggable").each(function(){ /* RUN ALL FURNITURE */
var elem = $(this),
id = elem.attr('id'), /* GET ITS ID */
pos = elem.position(),
newleft = pos.left+'px', /* GET ITS NEW LEFT POSITION */
newtop = pos.top+'px'; /* GET ITS NEW TOP POSITION */
$.ajax({ /* START AJAX */
type: 'POST', /* METHOD TO PASS THE DATA */
url: 'save-position.php', /* FILE WHERE WE WILL PROCESS THE DATA */
data: {'id':id, 'newleft': newleft, 'newtop':newtop}, /* DATA TO BE PASSED TO save-position.php */
success: function(result){
$("#message").show(200); /* SHOW THE SUCCESS SAVE MESSAGE */
}
})
})
})
</script>
</head>
<body>
<?php
echo '<div id="message" style="display:none"><h1>Saved!</h1></div>
<div id="containment-wrapper">';
$stmt = $con->prepare("SELECT a.itemId,
a.left_position,
a.top_position,
b.furniture,
b.fur_image
FROM myitems a
LEFT JOIN furniture_tb b ON a.fur_id = b.fur_id WHERE user_id = 1");
$stmt->bind_param("i", $myuserid); /* REPLACE THE ? IN THE QUERY ABOVE WITH $myuserid; i STANDS FOR INTEGER */
$stmt->execute(); /* EXECUTE QUERY */
$stmt->bind_result($itemid, $leftpos, $toppos, $furniture, $furimage); /* BIND THE RESULT TO THESE VARIABLES */
while($stmt->fetch()){ /* FETCH ALL RESULTS */
echo '<div id="'.$itemid.'" class="ui-widget-content draggable" style="position: absolute; left:'.$leftpos.'; top:'.$toppos.'">'.$furniture.'</div>';
}
$stmt->close(); /* CLOSE PREPARED STATEMENT */
echo '</div><!-- CONTAINMENT-WRAPPER -->';
?>
<button id="save">Save Position</button>
</body>
</html>
save-position.php:
<?php
$servername = "localhost";
$username = "root";
$password = "password";
$dbname = "coords";
// Create connection
$con = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($con->connect_error) {
die("Connection failed: " . $con->connect_error);
}
/*** INCLUDE YOUR DATABASE CONNECTION HERE FIRST ***/
if(!empty($_POST["id"]) && !empty($_POST["newleft"]) && !empty($_POST["newtop"])){
$stmt = $con->prepare("UPDATE myitems SET left_position = ?, top_position = ? WHERE itemId = ?"); /* PREPARE YOUR UPDATE QUERY */
$stmt->bind_param("ssi", $_POST["newleft"], $_POST["newtop"], $_POST["id"]); /* BIND THESE PASSED VARIABLES TO THE QUERY ABOVE; s STANDS FOR STRINGS; i STANDS FOR INTEGER */
$stmt->execute(); /* EXECUTE QUERY */
$stmt->close(); /* CLOSE PREPARED STATEMENT */
}
?>