CODEWITHSUNDEEP
javascriptjqueryhtmljquery-selectors
Nitin Aggarwal
Nitin Aggarwal

Reputation: 215

Updating a link on clicking another link using jquery

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.

Upvotes: 2

Views: 68

Answers (5)

Velimir Tchatchevsky
Velimir Tchatchevsky

Reputation: 2815

Change this

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

to this

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

Upvotes: 1

Pravin Tukadiya
Pravin Tukadiya

Reputation: 487

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.

Upvotes: 1

madalinivascu
madalinivascu

Reputation: 32354

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
                  }
              );
          }

Upvotes: 2

Tinmar
Tinmar

Reputation: 370

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.

Upvotes: 1

jackomelly
jackomelly

Reputation: 543

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.

Upvotes: 0

Related Questions