change specific HTML table content after AJAX response

Stack Overflow Asked by Hashan on November 1, 2020

I want to change a specific row appearance after AJAX call success. My table is dynamically generated from the database data. enter image description here

This is a row in my table. When the Approve button is clicked, AJAX request goes to the database. In the success response, I want to change the Approve button text as Approved and disable button. Also reduce the opacity of that row to look like that row is disabled. I used jquery to do that, but it didn’t work.

below is the full code of my AJAX request.

$(document).on('click', '#approveBtn', function(e) {
    title: 'Are you sure to Approve?',
    text: 'Approve Appointment',
    type: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#3085d6',
    cancelButtonColor: '#d33',
    confirmButtonText: 'Approve'
  }).then((result) => {
    if (result.value) {

          type: "GET",
          url: '/approve_appointment',
          data: {
            appointment_id: $(this).val(),
            customer_id: $(this).attr("customer_id")
        .done(function(res) {
          const Toast = Swal.mixin({
            toast: true,
            position: 'top-end',
            showConfirmButton: false,
            timer: 3000,

          if (res == 'already_added') {
              type: 'error',
              title: 'Already approved!'
          } else {
              type: 'success',
              title: 'Appointment has been Approved!'

            let appointment_id = $(this).val();
            $("#pending_list").find("[value = " + appointment_id + "]").html("Approved");
            }, 1200)*/
        .fail(function(err) {
            type: 'error',
            title: 'Appointment Approve failed!'


below is the code part I tried to change stuff

let appointment_id = $(this).val();
$("#pending_list").find("[value = " + appointment_id + "]").html("Approved");

I don’t have any idea about advance jquery to archive this..

Thanks in Advance, if you can help me!

3 Answers

What you're trying to achieve could be easily handled by placing an informative class to the approve button for indicating that it'll perform some action on specific event. You can place js prefix to be clear that it is highly involved with some interactive javascript event.

For the sake of simplicity, i'll use "1" for example of appointmentId.

<table id="pending_list">
    ... table headers
        <tr data-appointment-id="1">
            ...your information data cells here
                <button class="js-approve-appointment" value="1" data-customer-id="...customerId">Approve</button>

I'll try to summarize your asynchronous http request with some kind of pseude code to avoid deep into your already known implementation details.

$(function () {
    $(this).on('click', '.js-approve-appointment', function () {
        let approveButton = $(this);
        let appointmentId = approveButton.val();

        ... your jQuery's handling implementation goes here.
        I've saw that you've performed a `GET` HTTP request. 
        Here you should ask yourself what your request is trying to do. 
        GET some data to retrieve to the end user or POST some data performed by the end user?
        As I'm looking your workflow it seems that you need POST request method.

                appointment_id: appointmentId,
            function (response) {
                let appointmentRow = $('#pending_list tr[data-appointment-id="' + appointmentId + '"]');
                Here you can set your desired background colour which will indicate disability.
                appointmentRow.css('background-color', 'red');
                approveButton.html('You custom button text goes here.'); 

Here you can proper determine what kind of HTTP request method you should use.

Answered by G.Spirov on November 1, 2020

It actually depends on what type of button you are using if you are using a <input> button you have to use a prop() and if you are using the <button> type you have to use html() for example i will try to demonstrate both example as following

I have created 3 buttons 1 made from <input> tag, the second made from <button> tag and the third button doesn't really matter we are just gonna use it to change the text of the buttons. When you click the changebutton the text for both types of button is changed and i hope you can adopt this to your own code.

<!DOCTYPE html>
<html lang="en">
        <title>jQuery Change Button Text</title>
        <script src=""></script>
        <input type="button" onclick="change()" id="miki" value="change">
        <input type="button" id="myInput" value="Text">
        <button type="button" id="myButton">Button Text</button>
        function change() {
                // Change text of input button
                $("#myInput").prop("value", "Input Text Changed");
                // Change text of button element
                $("#myButton").html("Button Text Changed");




Answered by on November 1, 2020

you can use css classes to do it for example : create new css class called approved

        cursor: not-allowed;
        pointer-events: none;
        color: #fff; 
        background-color: #ffffff; //your green color 
        opacity: 0.4;

in jquery code get button by id and append approved class to it like following

$("#pending_list").find("[value = " + appointment_id + "]").appendClass("approved")

change button text:

$("#pending_list").find("[value = " + appointment_id + "]").html("Approved")

Answered by ali ajouz on November 1, 2020

Add your own answers!

Related Questions

How to add n after every line in a txt file python

1  Asked on December 18, 2021 by zeko


I want to filter by id

3  Asked on December 18, 2021 by manunyi


Need help in fork() diagram

2  Asked on December 18, 2021 by mhennaoui-mohamed


Create new object from array

3  Asked on December 18, 2021 by alar


Keep a displayed after page reload

1  Asked on December 18, 2021 by ian305


Increment HTML element ID using jQuery

1  Asked on December 18, 2021 by cda-the-programmer


What causes log(N) lookup time from RAM from array?

0  Asked on December 18, 2021 by oliversm


Android TV Set screensaver intent

2  Asked on December 18, 2021 by keaukraine


Matrix SDK iOS public room

2  Asked on December 18, 2021 by 9to5ios


Mayavi imshow obscures quiver3d

1  Asked on December 18, 2021 by mr-squid


Vue router optional first parameter

1  Asked on December 18, 2021 by user7531085


Ask a Question

Get help from others!

© 2023 All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP