1

Thats my code I tried so Far:

so when I clicked on the a-link (which has a class '.like'), I want the ( '.PostlikeCount' [found in the div.postInfo]) to display the new total like amount.

$(".like").click(function(e) {
  e.preventDefault()
  $.ajax({
    method: "GET",
    url: $(this).attr("href"),
    success: function(response) {
      console.log(response)

      $(this).parents("div.row").prevAll().first().find("span.PostlikeCount").html(response.total_likes)
    }
  });
});
<div class="row postInfo">
  <small class="font-weight-light col-8 ">
     <span class="PostlikeCount">{{post.likePost.count}}</span> people like this 
  </small>
  <small class="font-weight-light ml-3 viewAll"><a href= "#">view all comment</a>
  </small>
</div>

<hr>

<div class="mt-2 row">
  <span class="col-9 postLike">
    <a href="{%url 'likes:like_Post' post_id=post.id location='homePage'%}" class="d-inline-block like">
      <span><i class="far fa-heart "></i> Like</span>
    </a>
  </span>

</div>
Aaron Dasani
  • 73
  • 1
  • 1
  • 9

1 Answers1

0

Assumptions:

  • you have multiple .postInfo and .mt-2 pairs and not just the one pair in the question.
  • you can't wrap the postInfo/mt-2 in another class (this would make this much easier)

You need to get the closest .row to the link clicked, then use .prevAll(".postInfo") to find the related postInfo then find below that to get the PostLikeCount.

The differences between your code and this is 

.prevAll(".postInfo")

will give all the previous ".postInfo" nodes rather than all previous nodes. When using .prevAll they are in reverse order, so .first() will correctly find the one just above in the HTML.

Second difference is .closest(".row") will find first parent that is a .row. It's quite possible your code is not working because you have nested .row divs (not shown in the question), but you only want the one at the same level as .postInfo

I removed the unrelated ajax calls to provide a working snippet.

$(".like").click(function(e) {
  e.preventDefault()
  $(this)
    .closest("div.row")
    .prevAll(".postInfo")
    .first()
    .find("span.PostlikeCount").html($(this).data("result"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row postInfo">
  <small class="font-weight-light col-8 ">
     <span class="PostlikeCount"><em>result here</em></span> people like this 
  </small>
  <small class="font-weight-light ml-3 viewAll"><a href= "#">view all comment</a>
  </small>
</div>

<hr>

<div class="mt-2 row">
  <span class="col-9 postLike">
    <a href="#" class="d-inline-block like" data-result='11'>
      <span><i class="far fa-heart "></i> Like</span>
    </a>
  </span>

</div>

<div class="row postInfo">
  <small class="font-weight-light col-8 ">
     <span class="PostlikeCount"><em>result here</em></span> people like this 
  </small>
  <small class="font-weight-light ml-3 viewAll"><a href= "#">view all comment</a>
  </small>
</div>

<hr>

<div class="mt-2 row">
  <span class="col-9 postLike">
    <a href="#" class="d-inline-block like" data-result='22'>
      <span><i class="far fa-heart "></i> Like</span>
    </a>
  </span>

</div>
freedomn-m
  • 27,664
  • 8
  • 35
  • 57
  • I tried your code in jsBin and it is working as expected, but for some reason it is not working in my project... I will accept this answer because it is correct. I'll try to do some more tinkering in my code.. its weird why it's not working... In any case, Thanks for the quick response.. :) – Aaron Dasani Nov 08 '18 at 01:32
  • You'll have some additional html that stops it working - so you'll need to check what the differences are. Possibly start by removing everything except the working solution, then re-add nodes until it stops working. – freedomn-m Nov 08 '18 at 09:31
  • Ok there is a problem here...its look like the logic is working and I am able to traverse to the targeted html, but only when I remove the $(this) keyword and replace with the like button class('like'). the issue here is that I need the $(this) keyword so I select only the selected like button.. Why putting the $(this) keyword does not make it work???? – Aaron Dasani Nov 10 '18 at 08:54
  • When you use `$(".like")` directly, it searches everywhere for that class, when you use `$(this)` it starts at the item clicked and then navigates from there - if it's not working then you don't have the correct combination of `.closest` `.find` etc – freedomn-m Nov 10 '18 at 17:31
  • lol... I know why $(this) was not working... it was inside the success function and in the success function the $(this) keyword with return an object... so I just moved it outside the success function... Now I am able to change the value at that target tag but the problem now, is I need to get the response value from the success function... I tried using an outside variable, but it seem like the outside variable value does not get set even though is said: totalLikes=response.total_likes in the success function – Aaron Dasani Nov 10 '18 at 19:59
  • Upon some research I learned that the outside values does not get set because it is an Ajax called... SO how do we go about doing that?? Any ideas.. I'll keep searching for now. :) – Aaron Dasani Nov 10 '18 at 20:00
  • Please don't use `async:false` - have a read of this: https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call – freedomn-m Nov 11 '18 at 06:08
  • Man.. Thanks.. That was awesome.. :) I really learned a lot about the asynchronous of Ajax and why not to use async:false.... – Aaron Dasani Nov 11 '18 at 07:03