Search code examples
jquerymysqlajaxjeditableedit-in-place

jEditable - update new values to database

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.

Solution

  • 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>';