Question

There is a plugin called X-Editable where I it integrates into Bootstrap to have click to change Ajax requests. I have it all set up, and have it set to go, but my issue is that I have it in a foreach loop to echo out my users from my database, but it is only making the first row editable. screen

Here is my PHP Foreach,

<?php foreach($rows as $row):  $userid = $row['id'];  ?> 
<tr> 
<td><?php echo $row['id']; ?></td> 
<td><?php echo htmlentities($row['username']); ?></td> 
<td><a href="#" id="username" data-type="text" data-pk="1" data-url="/post"><?php echo   htmlentities($row['email']); ?>     </a></td>
<td><?php echo preg_replace('/([0-9]+\.[0-9]+\.[0-9]+)\.[0-9]+/', '\\1.**',$row['ip']); ?></td> 
<td><?php echo htmlentities($row['timestamp'); ?></td>

<?php endforeach; ?> 

Here is how I make the id “Username” editable,

<script type="text/javascript">
$('#username').editable();
</script>

The documentation for the plugin can be found here

Sorry if I show a lack of information, but I figure this is a pretty general question, why is the plugin only making the first result editable?

Answer 1

ID’s must be unique, change id=”username” to class=”username”, then do

$('.username').editable(); 

or do

<?php echo "username-".$userid; ?>

and then

$('[id^=username]').editable();