Inline Edit PHP MYSQL X-Editable
Basically I was trying to play with edit functionality using ajax concept.
As you all are aware, I'm in the beginning stage and now i downloaded some code stuffs from this url. http://vitalets.github.io/x-editable/docs.html
My code is here
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ajax Edit using PHP</title>
<link href="bootstrap.min.css" rel="stylesheet">
<link href="bootstrap-editable.css" rel="stylesheet">
<script src="jquery-2.0.3.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-editable.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#username').editable({
type: 'text',
url: 'post.php',
title: 'Enter username'
});
});
</script>
</head>
<body>
<?php
mysql_connect("localhost", "root", "password") or die(mysql_error());
mysql_select_db("test") or die(mysql_error());
$result = mysql_query("SELECT * FROM books") or die(mysql_error());
?>
<div style="margin-top:100px;margin-left:40px;">
<?php while($row = mysql_fetch_array( $result )) { ?>
<a href="#" data-pk="<?php echo $row['book_id']; ?>" id="username"><?php echo $row['book_name']; ?></a>
<br>
<?php } ?>
</div>
</body>
</html>
The above code display totally four book names(since the db has only four book names). I was able to edit the first book name alone and it gets edited in db too, and the remaining book names are not able to edit.
When I inspected with firebug I get the below code
<a id="username" class="editable editable-click" data-pk="1" href="#">Book Name 1</a>
<br>
<a id="username" data-pk="2" href="#">Book Name 2</a>
<br>
<a id="username" data-pk="3" href="#">Book Name 3</a>
<br>
<a id="username" data-pk="4" href="#">Book Name 4</a>
I know, i have missed something.
Could someone help me out
Thanks, Kimz
Answer
You should be using a class on the editable elements instead of an ID, like so:
<a id="username" class="editable editable-click" data-pk="1" href="#">Book Name 1</a>
<br>
<a class="username" data-pk="2" href="#">Book Name 2</a>
<br>
<a class="username" data-pk="3" href="#">Book Name 3</a>
<br>
<a class="username" data-pk="4" href="#">Book Name 4</a>
Which means your JS should now be:
$('.username').editable({
type: 'text',
url: 'post.php',
title: 'Enter username'
});