CODEWITHSUNDEEP
javascriptjquery
ltdev
ltdev

Reputation: 4467

Click links to hide/show content

I'm having a table listing some comments. Next to the comment there are two links, the hide and show. So what I want to do is when clicking the right link to change the comment's status with ajax.

// inside a loop for showing all comments
<div class="pull-right" class="publish-history-comment">
    <a href="#" data-time="<?= $row->time; ?>" class="publish-history-comment-link" onclick="toggleHistoryNotes('publish');">Publish</a>
</div>
<div class="pull-right" class="hide-history-comment">
    <a href="#" data-time="<?= $row->time; ?>" class="hide-history-comment-link" onclick="toggleHistoryNotes('hide');">Hide</a>
</div>
<?= $row->comment; ?>

<script type="text/javascript">
    function toggleHistoryNotes(status) {
        var link = $('.' + status + '-history-comment-link');
        var time = link.attr('data-time');
        alert(time);
    }
</script>

How can I target which link was clicked and do the ajax call to toggle the comment status?

Upvotes: 0

Views: 176

Answers (2)

Himanshu Upadhyay
Himanshu Upadhyay

Reputation: 6565

<script type="text/javascript">
    $('a').on('click', function(e) {
      e.preventDefault();
      var time = $(this).data('time');
    });
</script>

Upvotes: 0

Milan Chheda
Milan Chheda

Reputation: 8249

You can change your JQuery to trigged on click on a tag. Also, you should add e.preventDefault(); as this is gonna be click on the a tag, and this would prevent default action.

$('.pull-right a').on('click', function(e) {
  e.preventDefault();
  var time = $(this).data('time');
  console.log($(this).text() + ' == ' + time);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pull-right" class="publish-history-comment">
  <a href="#" data-time="2133124356354" class="publish-history-comment-link">Publish</a>
</div>
<div class="pull-right" class="hide-history-comment">
  <a href="#" data-time="2465433141212123" class="hide-history-comment-link">Hide</a>
</div>

Upvotes: 1

Related Questions