Updating database with jEditable & mysqli - php

Question

First of all, jEditable works for me - I can enter a value, hit enter and enjoy the sight of the new value in the table. However, this value is never inserted into the database.
As far as I understand, the jQuery code from the jEditable website
$(document).ready(function() {
$('.edit').editable('http://www.example.com/save.php');
});
which I have changed to link to my update.php script
error_reporting(E_ALL ^ E_NOTICE);
session_start();
$servername = "localhost";
$username = "root";
$password = "";
$database = "database";
$conn = new mysqli($servername, $username, $password, $database);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$value = $_POST['value'];
$id = $_POST['id'];
echo $value;
$updateTest=$conn->query("UPDATE table SET column='".$value."' WHERE ID='".$id."'");
should update the database, but nothing happens. When I look at the network log function of Firefox, I can see that there is no ID submitted (I do not know where this ID is supposed to come from in the first place, there is nothing in the example), but the value is there. There does not seem to be a response from the server, however.
Maybe the table itself is the problem:
while($row = $results->fetch_assoc()) {
$ID = $row["ID"];
print '<tr>';
print '<td><div class="edit" data-pk="'.$ID.'">'.$row["column"].'</div></td>';
print '</tr>';
(I left out the SELECT statement because everything else is displayed correctly)
Sadly, there is no explanation why the div should have an id - it's apparently not what is submitted in the POST request.
I have googled around a bit, but I could not find an answer to this. It's probably obvious, but I just can't find it. Ever since I changed my original prepared statement to this I don't get errors anymore, either.
I would be very grateful for any help, especially if you could explain my mistake to me so I won't repeat it in the future.
If there is any place on the internet with an actual complete (mysqli) example of what the save.php file mentioned in the Jeditable documentation looks like and you have the link (I certainly didn't find it...), I'd take that too.

Answer 1

This is incorrect:
print '<td><div class="edit" data-pk="'.ID.'">'.$row["column"].'</div></td>';
^^
There's no $, so ID is an undefined constant. PHP will probably try to be polite and assume you meant 'ID' isntead (a string containing the letters I and D), which means ALL of your rows are going to show up in the client as data-pk=ID, and not data-pk=1, data-pk=2, etc...

Answer 2

As there seems to be no solution to this (or, more precisely, I'm running out of time for this project), I switched to modals. If anyone comes across this and considers modals a viable option, here's what I've done:
I'm using a GET form and an update page that updates different tables depending on which page the request comes from - that's what "ref" is for.
update.php:
$updateID=$_GET['id'];
$updateRef=$_GET['ref'];
$col1=$_GET['col1'];
$col2=$_GET['col2'];
if($updateRef == "refpage"){
$updateTable=$conn->query("UPDATE my_table SET col1='".$col1."', col2='".$col2."' WHERE ID='".$updateID."'");
header("Location: refpage.php");
die();
}
My modals are generated with the table rows, which is probably the ugliest solution anyone ever used for anything, but it works... (Can't display the form in a table, though, because tables within divs within tables are a terrible idea.)
$results = $conn->query("SELECT col1, col2 ID FROM my_table");
while($row = $results->fetch_assoc()) {
$ID = $row["ID"];
$modalID = $modalID + 1;
print '<tr>';
print '<td>'.$row["col1"].'</td>';
print '<td>'.$row["col2"].'</td>';
print '<td><span class="glyphicon glyphicon-pencil" style="float: right !important"></span></td>';
print '</tr>';
echo '<div class="modal fade" id="editModal'.$modalID.'" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title">Delete</h2>
</div>
<div class="modal-body">
<form action="update.php" method="get">
<div class="row">
<div class="col-xs-6">
col1:
</div>
<div class="col-xs-6">
<input type="text" value="'.$row["col1"].'" id="col1" name="col1" />
</div>
</div>
<div class="row">
<div class="col-xs-6">
col2:
</div>
<div class="col-xs-6">
<input type="text" value="'.$row["col2"].'" id="col2" name="col2" />
</div>
</div>
<input type="hidden" id="ref" name="ref" value="refpage" />
<input type="hidden" name="id" value="'.$ID.'" />
<input class="btn btn-md" type="submit" id="update" name="update" value="Update" />
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-md" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>';}
Hope this helps someone. And in case anyone has an idea what was wrong with my original idea, I'd be happy to read the answer. I still think in place updates would be much cooler.