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

Which is better: JavaScript, Json, or Html?

Is it possible to obtain the socket.id of a user immediately upon their connection?

How to retrieve the chosen option from a drop-down menu created within a loop in a React application

By employing the actions class for scrolling to the bottom of the page, inadvertently clicking on another element triggers an unintended right-click context menu to appear

Is styling in React not showing up?

Adjusting the width of the rail in Material UI's vertical Slider component in React

Aligning an SVG icon at the center of a button

Ensure that the Materialize CSS modal form remains open even after submission

Tips for managing nested objects within React state and keeping them updated

The React DOM element undergoes mounting and unmounting on each render cycle when it should be simply altered/updated

The H1 tag fails to appear on the webpage

Can I restrict access to all routes except one in vue-router? Is this a safe practice? Should I explore alternative methods for achieving this?

Utilizing AJAX to dynamically populate an HTML list from a database and then saving the user's newly selected value back to the database

How can one interpret the act of "passing" an interface to an RxJS Store using angle brackets?

Enhancing AngularJs code effectiveness through the use of MVC framework

How can I use PHP to update and select on the same page simultaneously?

Preventing User Duplication in MERN Stack: Strategies to Avoid Multiple Registrations

In the Bootstrap Grid system, all posts are aligned to the left side

Error thrown when attempting to access properties of null values (Uncaught TypeError: Cannot read properties of undefined (reading 'map'))

Use the button to trigger the opening of the datepicker in React material UI