CODEWITHSUNDEEP
javascriptphpjqueryajax
ajith mohan
ajith mohan

Reputation: 527

how to append data returned from ajax call to a dynamically created div, among many divs of same class name

How do I append data returned from ajax call to a dynamically created div, which is among many divs of the same 'class name' ?

My HTML:

<div class="post_area">
    <?php
        $connObj = new Connection();
        $conn = $connObj->getConnection();

        $sql = ("select * from posts ");

        $result = mysqli_query($conn, $sql);

        if ( $result ) {
        echo "<br><br>";
        $rowcount = mysqli_num_rows($result);
        for($i = 0; $i<$rowcount; $i++){
        $row = mysqli_fetch_assoc($result);
    ?> 
    <h3>
        <?php 
          echo $row['title']."<br>"; 
        ?> 
    </h3> 

    <?php
     echo $row['description']."<br>";
    ?>

    <div class="post_comments">
        <div class="comments_only_box" id="cb">
            //displaying comments dynamically
        </div>
    </div>
    <input type="text" name="comment" class="form-control" class="input_comment">
    <input type="button" value="comment" name="submit_comment" class="comm" data-id="<?php echo $present_id;  ?>">
</div>
<?php $present_id = $row['id']; ?>

My ajax call:

<script>
    $(document).ready(function () {
        $(".comm").on('click', function () {

            var id = $(this).data('id');
            var comment = "helloworld";//example

            $.ajax({
                url: 'comment.php',
                method: 'GET',
                data: {
                    comment: comment,
                    id: id,
                },
                dataType: 'html',
                success: function (data) {
                    console.log(data);

                    $('#cb').append(data);

                }
            });
        });
    });
</script>

When I append the data it's appended to all divs--but I want to append it only to the presently clicked div

Upvotes: 1

Views: 2799

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1074038

When someone clicks your comment button, the click handler receives a reference to that specific element as this. Since that button is inside the div, you can use closest to find the div that contains the button, then update that div. E.g.:

$(".comm").on("click", function() {
    var $div = $(this).closest("div.post_area");
    // Do something with `$div`...
});

Live example:

$(".comm").on("click", function() {
  var $div = $(this).closest("div.post_area");
  var $input = $div.find("input[name=comment]");
  var comment = $input.val();
  $("<p>").text(comment).appendTo($div);
  $input.val("").focus();
});
.post_area {
  border: 1px solid #ddd;
  height: 6em;
  overflow: auto;
}
<p>Type in any of the comment boxes and click the button following it:</p>
<div class="post_area">
  <input type="text" name="comment" class="form-control" class="input_comment">
  <input type="button" value="comment" name="submit_comment" class="comm" data-id="...">
</div>
<div class="post_area">
  <input type="text" name="comment" class="form-control" class="input_comment">
  <input type="button" value="comment" name="submit_comment" class="comm" data-id="...">
</div>
<div class="post_area">
  <input type="text" name="comment" class="form-control" class="input_comment">
  <input type="button" value="comment" name="submit_comment" class="comm" data-id="...">
</div>
<div class="post_area">
  <input type="text" name="comment" class="form-control" class="input_comment">
  <input type="button" value="comment" name="submit_comment" class="comm" data-id="...">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Upvotes: 2

Related Questions