Updating the contents of one specific div without affecting all other divs with the same class

Question

Updating the contents of one specific div without affecting all other divs with the same class

Below is the HTML code snippet in question:

<a class="btn test-btn test-btn-1">
  <span>Content 1</span>
</a>

This particular code block appears multiple times on the page. The number at the end of test-btn- is dynamically generated, so it could vary from 1 to 200.

Upon clicking the button, an AJAX function is triggered which adds a new class called test-btn-clicked to the a tag. Once the process is complete, I aim to update the content within the span element to display a different message.

I have attempted several methods to achieve this, but the issue I'm facing is that every button's content gets updated, instead of just the one I clicked.

Can anyone provide guidance on how to approach this problem?

javascript jquery html css

Answer 1

Answer №1

To ensure you target only the current element that was clicked, it is important to note that $(this) may not be accessible within an ajax call due to a change in context from the clicked element to the ajax call itself. To work around this, define the context of the current element before making the ajax call and then utilize that reference to update the clicked element. Here is an example code snippet:

$('.test-btn').click(function(){
 var that = this;
  $.ajax({ 
    url: '#',
    success: function (result) {
      $(that).find('span').text("new span text here");
    }
  });
});

Answer 2

To ensure you target only the current element that was clicked, it is important to note that $(this) may not be accessible within an ajax call due to a change in context from the clicked element to the ajax call itself. To work around this, define the context of the current element before making the ajax call and then utilize that reference to update the clicked element. Here is an example code snippet:

$('.test-btn').click(function(){
 var that = this;
  $.ajax({ 
    url: '#',
    success: function (result) {
      $(that).find('span').text("new span text here");
    }
  });
});

Answer 3

Answer №2

If this function is what initiates the ajax call:

$('.btn').on('click', function() {
   var $this = $(this);
   $this.addClass('test-btn-clicked');
   $.ajax({
     url: "test.html"
   }).done(function(data) {
      $this.find('span').html(data);
   }); 
});

Answer 4

If this function is what initiates the ajax call:

$('.btn').on('click', function() {
   var $this = $(this);
   $this.addClass('test-btn-clicked');
   $.ajax({
     url: "test.html"
   }).done(function(data) {
      $this.find('span').html(data);
   }); 
});

Answer 5

Answer №3

make sure to utilize this in this manner:

$('.test-btn').click(function(){ //
    // insert your code here
    $(this).find('span').text('some text');
});

Answer 6

make sure to utilize this in this manner:

$('.test-btn').click(function(){ //
    // insert your code here
    $(this).find('span').text('some text');
});

Updating the contents of one specific div without affecting all other divs with the same class

Answer №1

Answer №2

Answer №3

Similar questions

Creating a jQuery Mobile Multi-Select feature with dynamically loaded data

Filtering data in Laravel can be efficiently achieved by utilizing Laravel's ORM hasmany feature in conjunction with Vue

Monitoring the sharing of content on social media networks, rather than tracking individual

Can you provide a step-by-step guide on creating a JSONP Ajax request using only vanilla

"Troubleshooting a CSS Bug on a PHP Dynamic Web

Integrating a Find Pano functionality into a Kolor Panotour

Efficiently pinpointing the <div> element with precision using jQuery

Angular SPA boasting an impressive one million pages

Acquiring data from an API response in JSON format using JavaScript

Incorporating the Results of a Script into TinyMCE with the Help of

Delete the line height (or leading) for bigger text in CSS

Stopping a function that is currently running on a website using Javascript

retrieving the result from an asynchronous function in Node.js

Verify whether a div element is styled in a specific manner

execute the code when the device is not an iPad

Can you please provide me with detailed instructions on how to use the radio button?

When executing a PHP script, an error is occurring stating that the JQuery function is not defined

centering pictures vertically on my webpage

Completed Animation with Callback in AngularJS CSS

I am attempting to retrieve a value from a dropdown menu but I am encountering difficulties