March 12, 2012

jEditable – update new values to database

Question by generalsagar

i’m a newbie to web development world. Let me explain what i want.

id  car        make 
1   panamera   porsche  
2   italia     ferraris 
3   avantador  lamborghini  
4   slk        mercedes

I have this simple table in my database and i’m gonna echo this table in a while loop.

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.jeditable.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
<ul>
<?php  
$query = "SELECT * FROM inplace LIMIT 0, 6";    
$result = mysql_query($query) or die ('Query couldn't be executed');  
while ($row = mysql_fetch_assoc($result)) {
?>

<script type="text/javascript">
$(function() {
$("#<?php echo $row['id']; ?>").editable("http://www.example.com/save.php", { 
  indicator : "<img src='img/indicator.gif'>",
  tooltip   : "Doubleclick to edit...",
  event     : "click",
});
});
</script>

<?php
echo '<li id="'.$row['id'].'">'.$row['car'].'</li>';
echo '<li id="'.$row['id'].'">'.$row['make'].'</li>'; 
}
?>
</ul>
</body>

I’m trying to use Mika Tuupola’s jEditable edit-in-place jQuery plugin. Here in this code, i have the jQuery code pasted inside the while loop. The first problem here is, only the “car” column is editable. I’m not able to edit the “make” column. And secondly, how do i post(update) the new values to database? Thanks.

Answer by Starx

You are using two elements with same id, which is both semantically and logically incorrect. Hence it is not working as you expected.

Either give same class or differenct ID’s like shown in the following example.

echo '<li id="car'.$row['id'].'">'.$row['car'].'</li>';
echo '<li id="make'.$row['id'].'">'.$row['make'].'</li>';
...

Please fill the form - I will response as fast as I can!