CODEWITHSUNDEEP
javascriptphpjquery
user3412305
user3412305

Reputation: 261

Targeting specific element jquery

I have searched this on the net however couldn't find a solution, simply I would like to replace the content inside button element with ajax response. The only problem I am facing is that, the whole divs are being changed not the one I click on. If I change the class to id only the first one changes not the specific button I want. So how do I replace the content of specific button?

PHP Code:

while($row = $result->fetch_assoc()){// there are four rows so I have 4 buttons.
echo "<button class=btn btn-primary test' value='."$row['id']".'>."$row['voteup']".</button>"; 
 }

javascript code:

$(function() {
 $('.test').on('click', function() { // attach the click to the button
var test_val = $(this).val(); // Grab the value from the button
$.ajax({
    type: "GET",
    url: "test.php", // Move ?tar=vrate to the data array.
    data: {tar: 'vrate', test: test_val},
    cache: false,
    success: function(response)
    {  
        $(".test").fadeIn('slow').html(response);//this is replacing all 4 buttons not just one, if I change the class to id, only the first one is being replaced with the response. I also tried $( .test", this) but no luck.

    }
});
 });
});

Upvotes: 1

Views: 43

Answers (2)

cookie monster
cookie monster

Reputation: 10972

$(function () {
    $('.test').on('click', function () {
        var test_val = $(this).val();
        $.ajax({
            // -------v Set the context of the callback
            context: this,
            type: "GET",
            url: "test.php",
            data: {
                tar: 'vrate',
                test: test_val
            },
            cache: false,
            success: function (response) {
                // v--and use `this` here
                $(this).fadeIn('slow').html(response);
            }
        });
    });
});

Upvotes: 1

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67217

Try to use the $(this) reference here to achieve what you want,

$('.test').on('click', function() { // attach the click to the button
   var test_val = $(this).val(); // Grab the value from the button
   var $this = $(this);
     $.ajax({
       type: "GET",
       url: "test.php", // Move ?tar=vrate to the data array.
       data: {tar: 'vrate', test: test_val},
       cache: false,
       success: function(response)
         {  
           $this.fadeIn('slow').html(response);
         }
     });
 });

Upvotes: 0

Related Questions