Can't show a value in my page that i get from my controller using ajax?

Question

Here is a part of my JSP file where I have a problem :

<div class="aimerSection">
     <div class="aime">
         <form>
             <input type="hidden" class="adore1" name="aime" value="${post.id}">
             <input type="button" class="adore2" value="J'aime">
         </form>
     </div>
     <c:if test="${ post.adore == 0 || post.adore == 1 }">
     <div class="nbreAimes"><p><span class="nbrAdore">${ post.adore }</span> personne aime ça</p></div>
     </c:if>

     <c:if test="${ post.adore != 0 && post.adore != 1 }">
     <div class="nbreAimes"><p><span class="nbrAdore">${ post.adore }</span> personnes aiment ça</p></div>
     </c:if>
</div>

And here is my jQuery file :

$(document).ready(function(){
    $(".adore2").click(function(){
        var aime = $(this).parent().find(".adore1").val()
        var value = $(this).parent().parent().siblings().find(".nbrAdore").text()
        alert(value)

        $.ajax({
            type:"POST",
            data: {aime:aime},
            url:"acceuilServlet",
            success:function(result){
                alert(result)
                // this is the line where i am having a problem 
                $(this).parent().parent().siblings().find(".nbrAdore").html(result)     
            }
        })
    })
})

Now what I am trying to achieve is that when I click my input ( button ) with class "adore2", the number of likes ( in span with class "nbrAdore" ) has to increment in my database.

I used alert to see if everything is fine just like any begginer and I will explain by an example.

If number of likes is 14, my value ( var value ) is fine, I get it, my alert shows 14, and my alert(result) shows 15 which means that the treatement in my controller is done correctly, but I can't see this in my view, I believe my problem is here and I dont know how to solve it :

$(this).parent().parent().siblings().find(".nbrAdore").html(result)

Louys Patrice Bessette · Answer 1 · 2018-01-07T15:52:37.003

1

That is because .siblings() is a collection of elements. It's hard to tell on which element .find() would be applyed, if applyed at all.

So what about removing that uncertainty and try to find the target element from .aimerSection right away?

$(this).closest(".aimerSection").find(".nbrAdore").html(result);

EDIT

Seems like your .nbrAdore isn't a child of .aimerSection.

Look in the code inspector where that really is located.

edited Jan 07 '18 at 15:52

answered Jan 07 '18 at 12:20

Louys Patrice Bessette

33,375
6
36
64

I undertand your point, but your solution is not working too :( . – TaouBen Jan 07 '18 at 14:31
mmm... Ok. Two tests: **1)** `console.log($(this).closest(".aimerSection").find(".nbrAdore").length);` Should give 1. **2)** `console.log(result);` verify the result. – Louys Patrice Bessette Jan 07 '18 at 14:35
mm yes! it gave me a strange result.. as i told i get the value result correct! but the length of the element gives me 0.. – TaouBen Jan 07 '18 at 14:43
So it doesn't find the element. Look if the class is spelled correctly... And if the element is a child of `.aimerSection` like it looks like in what you posted. – Louys Patrice Bessette Jan 07 '18 at 14:45
Another test would be to check if there is one of those in the whole document: `console.log($(document).find(".nbrAdore‌").length);` – Louys Patrice Bessette Jan 07 '18 at 14:48
1

Well it gives a result that is true! I have 5 posts in my landing page and it gives 5 .. And yes everythings is spelled right. – TaouBen Jan 07 '18 at 15:00
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/162690/discussion-between-louys-patrice-bessette-and-taouben). – Louys Patrice Bessette Jan 07 '18 at 15:01

score 0 · Answer 2 · answered Jan 09 '18 at 08:47

The context for this is changing in the ajax call. It changes to the jqXHR of the ajax call. You can save $(this) to a variable before and use that variable in the callback:

var self = $(this);
$.ajax({
        type:"POST",
        data: {aime:aime},
        url:"acceuilServlet",
        success:function(result){
            alert(result)
            // this is the line where i am having a problem 
            self.parent().parent().siblings().find(".nbrAdore").html(result)     
        }
    })

But the better approach would be to save the elem itself, because you are using it twice:

var elem = $(this).parent().parent().siblings().find(".nbrAdore");
var value = elem.text();
....
success: function(result) {
    alert(result);
    elem.html(result);
}

Can't show a value in my page that i get from my controller using ajax?

2 Answers2