CODEWITHSUNDEEP
jqueryajax
bobafart
bobafart

Reputation: 397

Jquery: multiple elements to inline edit using Ajax

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

Answers (1)

Jai
Jai

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

Related Questions