CODEWITHSUNDEEP
javascriptjqueryajax
Nathan Silva
Nathan Silva

Reputation: 53

How to change a class of a label after ajax success?

I'm trying to change the class of a label after the success of ajax, but i think I'm getting null value, because it's not changing

$(document).ready(function(){
    $(".att").click(function() {
        var x_userid  = $(this).closest('tr').find('.x_userid').val(); 
        var formm = {
            'x_userid':  x_userid
        }
        $.ajax({
            type: "POST",
            url: 'src/ajax.php',
            data: formm,
            encode: true,
            success: function (data) {
                $(this).closest('tr').find('td span.xlbl').addClass("label-success").removeClass("label-warning");
            }
        }); 
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<tr>
<td> Gabb </td>
<td class='resultt'>  13,12 </td>
<td>  15,41 </td>
<td> 150 </td>
<td> <span class='xlbl label label-warning'> Pending </span> </td>
<td>  <button type='submit' class='att btn bgm-teal waves-effect'><i class='zmdi zmdi-refresh'></i></button> </td></tr>

Can anyone tell you how to change it correctly? I appreciate it

Upvotes: 1

Views: 1035

Answers (3)

brk
brk

Reputation: 50291

You can create a variable to store the context of the current element.Also find('td span.xlbl') need to be replaced by find('span.xlbl').

This snippet is using a test api and on click of the span it will call the ajax

// click on the element to trigger the ajax
$('.att ').on('click', function() {
  let _$t = $(this); // hold the context 
  $.ajax({
    type: "GET", // fake api method
    url: 'https://jsonplaceholder.typicode.com/posts/1', //fake api url,
    data: '',
    encode: true,
    success: function(data) {
       // replacing style of the element
      _$t.closest('tr').find('span.xlbl').addClass("label-success").removeClass("label-warning");
    }
  });
})
.label-success {
  color: green
}

.label-warning {
  color: yellow
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td> Gabb </td>
    <td class='resultt'> 13,12 </td>
    <td> 150 </td>
    <td> <span class='xlbl label label-warning'> Pending </span> </td>
    <td>  <button type='submit' class='att btn bgm-teal waves-effect'><i class='zmdi zmdi-refresh'></i>Click</button> </td>
  </tr>
</table>

Upvotes: 1

warriv
warriv

Reputation: 13

You might want to try to do something like this instead.

  <script>
       $.ajax({
            type: "POST",
            url: 'src/ajax.php',
            data: formm,
            encode: true,
            success: function (data) {
                $("#trID td span.xlbl").addClass("label-success").removeClass("label-warning").html("Success");
                console.log("success", data);
            }
        }); 
 </script>

<tr id="trID">
    <td> Gabb </td>
    <td class='resultt'>  13,12 </td>
    <td> 150 </td>
    <td> <span class='xlbl label label-warning'> Pending </span> </td>
</tr>

Upvotes: 1

Thelonias
Thelonias

Reputation: 2935

There's a good chance this is not what you're expecting.

Additionally, you don't have a td with class "xlbl", you have a span with that class, so you'd target it like .find('td span.xlbl')

Upvotes: 2

Related Questions