Updating a link on clicking another link using jquery

Question

I am new to JQuery. As I click the first link it sends an Ajax request to the server and gets back with some data. Everything is good so far. In the callback, I want to change the diplay text of second link. for example - 6 people liked it. I searched a lot but could not get it working.

<div class="container" id="some-id">
    <a class="someclass-1">Like</a>
    <a class="someClass-2">5 people liked it</a>
</div>

I tried something like to change the text of the second link. But I am unable to change the text. My question is just how I select and change the text of the second link.

$(this).closest('div').find('.someClass-2').html('6 people liked it');

My Ajax code is something like:

$(".someClass-1").click(function(e) {
      if ($(this).html() == "Like") {
          var parameters = { statusId: $(this).closest('div').attr('some-id')};
          $.get(
              "/like",
              parameters,
              function(data) { 
               $(this).closest('div').find('.someClass-2').html( data + ' people liked it.');
              }
          );
      }

I have many more links of class someClass-2 on the page but I do not want to disturb them. I just want to change the text of the someClass-2 link in the current div .

Answer 1

Use next()

$(this).next('.someClass-2').html('6 people liked it');

with ajax create a variable with the current element:

$(".someClass-1").click(function(e) {
      var el =  $(this);///see here
      if ($(this).html() == "Like") {
          var parameters = { statusId: $(this).closest('div').attr('some-id')};
          $.get(
              "/like",
              parameters,
              function(data) { 
              el.next('.someClass-2').html( data + ' people liked it.');//if you use $(this) i will refer to the ajax object
              }
          );
      }

or:

 $(".someClass-1").click(function(e) {
          var el =  $(this);///see here
          if ($(this).html() == "Like") {
              var parameters = { statusId: $(this).closest('div').attr('some-id')};
              $.get(
                  "/like",
                  parameters,
                  function(data) { 
                  el.parent().find('.someClass-2').html( data + ' people liked it.');//if you use $(this) i will refer to the ajax object
                  }
              );
          }

Answer 2

Change this

$(this).closest('div').find('.someClass-2').html('6 people liked it');`

to this

$(this).parent().children("a.someClass-2").text("new text");

Answer 3

Why are you using $(this) ? If you have unique identifier, use it.

$(".someClass-2").text("6 people liked it");

And of course, put that in Ajax success function.

EDIT:

var dataNumber;

$(".someClass-1").click(function(e) {
  myElement = $(this);
      if ($(this).html() == "Like") {
          var parameters = { statusId: $(this).closest('div').attr('some-id')};
          $.get(
              "/like",
              parameters,
              function(data) { 
               myElement.siblings('.someClass-2').html( data + ' people liked it.');
              }
          );
      }

Use .siblings() for selecting all siblings and than filter it by class or .next() if you need to select only next sibling.

Also, be careful where you put this selector... You have put it in Ajax call, not in click() function and because of that it changed it's value.

Answer 4

I think This will help you

$('#some-id .someClass-2').text('6 people liked it');

it will replace html of all someclass-2 in #some-id.

Answer 5

Maybe something like this?

$('.someClass-2').html('6 people liked it');

...but it's not clear to me where to put that line in your code.