Reputation: 397
I have multiple (hundreds) "span" elements in a "table". If one is clicked I just want that one span element to be inline edited with the data sent to mySQL to update the field dynamically. I did a search and am unable to find an answer
<?php
// db connect and SELECT query done here...
while($row = $result->fetch_assoc()){
echo '<tr bgcolor="'.$bgcolor.'"><td><b>'.$row['eventTitle'] . '</b></td><td>'. $row['dateYear'] .'</td><td>'.$row['characterPOV'].'</td></tr>';
echo '<tr><td colspan=3><span id="tb" >'.$row['desc'] . '</span></td></tr>';
}
?>
Jquery:
<script>
$('document').ready(function(){
$( "span#tb" ).on( "click", function() {
var html = $('span#tb').html();
$('span#tb').replaceWith('<textarea style="width:100%;">'+html + '\r\n </textarea>').html().focus();
$.get( 'inc/updateDesc.php' ,function(data) {
$('#tb').append(data);
});
return false;
})
});
</script>
Currently, if the span element is clicked every span element is replaced by a textarea -- i just want the element that has been clicked to be replaced by a textarea so that it can be inline edited
what is a code efficient responsible way to do this? recall that the span elements can be hundreds in number as its contents are stored in the db
Upvotes: 0
Views: 203
Reputation: 74748
Change Id to class:
class="tb"
Now in the js you can do this:
$(document).ready(function(){
$( "span.tb" ).on( "click", function() {
var $this = $(this); // this is clicked span.
var html = $this.html();
$this.replaceWith('<textarea style="width:100%;">'+html + '\r\n </textarea>').html().focus();
$.get( 'inc/updateDesc.php' ,function(data) {
$this.append(data);
});
return false;
})
});
Upvotes: 1