getting data-id attribute returns undefined

Question

this might be similar question to others but i just cant fixed this so i have data-commentid attribute and it has a value from my database.

<div class="comment" data-commentid="24">
  <a href="#" class="pull-left">
    <!-- //Notice .comment-avatar class-->
    <img src="../assets/img/avatars/d-30x30.png" alt="D" class="comment-avatar">
  </a>
  <!-- //Notice .comment-body class-->
  <div class="comment-body">
    <!-- //Notice .message class-->
    <span class="message"><strong>Tobei Tsumura</strong> Really Nice</span>
    <!-- //Notice .time class-->
    <span class="time" data-livestamp=""></span>
    <!-- //Notice .like class-->
    <a href="#" style="text-decoration: none;" id="user_likes" class="like">Like&nbsp;</a>

    <span class="like" id="name"></span>
  </div>
</div>

<div class="comment" data-commentid="25">
  <a href="#" class="pull-left">
    <!-- //Notice .comment-avatar class-->
    <img src="../assets/img/avatars/d-30x30.png" alt="D" class="comment-avatar">
  </a>
  <!-- //Notice .comment-body class-->
  <div class="comment-body">
    <!-- //Notice .message class-->
    <span class="message"><strong>Tobei Tsumura</strong> Really Nice</span>
    <!-- //Notice .time class-->
    <span class="time" data-livestamp=""></span>
    <!-- //Notice .like class-->
    <a href="#" style="text-decoration: none;" id="user_likes" class="like">Like&nbsp;</a>

    <span class="like" id="name"></span>
  </div>
</div>
<div class="comment" data-commentid="26">
  <a href="#" class="pull-left">
    <!-- //Notice .comment-avatar class-->
    <img src="../assets/img/avatars/d-30x30.png" alt="D" class="comment-avatar">
  </a>
  <!-- //Notice .comment-body class-->
  <div class="comment-body">
    <!-- //Notice .message class-->
    <span class="message"><strong>Tobei Tsumura</strong> Really Nice</span>
    <!-- //Notice .time class-->
    <span class="time" data-livestamp=""></span>
    <!-- //Notice .like class-->
    <a href="#" style="text-decoration: none;" id="user_likes" class="like">Like&nbsp;</a>

    <span class="like" id="name"></span>
  </div>
</div>

now using jquery i want to get the value from data-commentid

comid = $(this).find('.comment').attr('data-commentid');

data-commentid is rendered after a success of my ajax request... i already tried diff approach just to get the value from data-commentid but it always returned undefined but when i try to console.log(comid); it returns undefined.

    var $htmlObjectComment = $($.parseHTML($.ajax({
        type:'GET',
        url:'../htmlstrings/comment.html',
        cache:false,
        async:false
    }).responseText));

    $htmlObjectComment.attr('data-commentid', results);
    $htmlObjectComment.find('a img').attr({'src': $el_user.find('a img').attr('src'), 'width': 30, 'height': 30});
    $htmlObjectComment.find('div.comment-body').children('span.message').html('<strong>' + $('div.user span').html() + '</strong> ' + $form.find('input').val());
    $htmlObjectComment.find('div.comment-body').children('span.time').attr('data-livestamp', currentDateTime);

    $el.find('div.comment:last').before($htmlObjectComment);
    $form.find('input').val(null);

this is my ajax success request. and the comment.html is the html above..

this is what the console.log($(this)); return..

Answer 1

You should try using 'prop' instead of 'attr'.

You can try this:

$(this).find('.comment').prop('data-commentid');

Answer 2

$('.comment').each(function(){
  console.log($(this).attr('data-commentid'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="comment" data-commentid="24">
  <a href="#" class="pull-left">
    <!-- //Notice .comment-avatar class-->
    <img src="../assets/img/avatars/d-30x30.png" alt="D" class="comment-avatar">
  </a>
  <!-- //Notice .comment-body class-->
  <div class="comment-body">
    <!-- //Notice .message class-->
    <span class="message"><strong>Tobei Tsumura</strong> Really Nice</span>
    <!-- //Notice .time class-->
    <span class="time" data-livestamp=""></span>
    <!-- //Notice .like class-->
    <a href="#" style="text-decoration: none;" id="user_likes" class="like">Like&nbsp;</a>

    <span class="like" id="name"></span>
  </div>
</div>

<div class="comment" data-commentid="25">
  <a href="#" class="pull-left">
    <!-- //Notice .comment-avatar class-->
    <img src="../assets/img/avatars/d-30x30.png" alt="D" class="comment-avatar">
  </a>
  <!-- //Notice .comment-body class-->
  <div class="comment-body">
    <!-- //Notice .message class-->
    <span class="message"><strong>Tobei Tsumura</strong> Really Nice</span>
    <!-- //Notice .time class-->
    <span class="time" data-livestamp=""></span>
    <!-- //Notice .like class-->
    <a href="#" style="text-decoration: none;" id="user_likes" class="like">Like&nbsp;</a>

    <span class="like" id="name"></span>
  </div>
</div>
<div class="comment" data-commentid="26">
  <a href="#" class="pull-left">
    <!-- //Notice .comment-avatar class-->
    <img src="../assets/img/avatars/d-30x30.png" alt="D" class="comment-avatar">
  </a>
  <!-- //Notice .comment-body class-->
  <div class="comment-body">
    <!-- //Notice .message class-->
    <span class="message"><strong>Tobei Tsumura</strong> Really Nice</span>
    <!-- //Notice .time class-->
    <span class="time" data-livestamp=""></span>
    <!-- //Notice .like class-->
    <a href="#" style="text-decoration: none;" id="user_likes" class="like">Like&nbsp;</a>

    <span class="like" id="name"></span>
  </div>
</div>

Answer 3

you can use .data() like this:

$(this).data('id') and this will look for data-id on whatever $(this) refers to.

here's the api documentation link - http://api.jquery.com/data/

so for you, you can do: $(this).find('.comment').data('commentid') and if that doesn't work, console.log $(this) and then console.log $(this).find('.comment') - they might be outputting something different to what you want

update

also as mentioned in another answer, .comment could be an array, as it is a class name rather than an id. Using $.each with $(this).data('commentid') should work :)

Answer 4

The problem seems to be with this line of code:

comid = $(this).find('.comment').attr('data-commentid');

Actually, $(this).find('.comment') returns an array not just a single object. Please try changing your code to as given below:

        var comments = $(this).find('.comment');
        $.each(comments , function(index, item){
             var comid = $(item).attr('data-commentid');
             console.log(comid); 
             /*If it prints correct values, you can make necessary changes in this piece of code as per your needs*/
        });