AnswerBun.com

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) {
  e.preventDefault();

  Swal.fire({
    title: 'Are you sure to Approve?',
    text: 'Approve Appointment',
    type: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#3085d6',
    cancelButtonColor: '#d33',
    confirmButtonText: 'Approve'
  }).then((result) => {
    if (result.value) {

      $.ajax({
          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') {
            Toast.fire({
              type: 'error',
              title: 'Already approved!'
            })
          } else {
            Toast.fire({
              type: 'success',
              title: 'Appointment has been Approved!'
            })

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

});

below is the code part I tried to change stuff

//$(this).html("Approved")
//$("#pending_list").find("button").val($(this).val());
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!

htmljavascriptjquery

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
    <tbody>
        <tr data-appointment-id="1">
            ...your information data cells here
            <td>
                <button class="js-approve-appointment" value="1" data-customer-id="...customerId">Approve</button>
            </td>
        </tr>
    </tbody>
</table>

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.

        $.post(
            'approve_appointment',
            {
                appointment_id: appointmentId,
                customer_id: approveButton.data("customerId")
            },
            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">
    <head>
        <title>jQuery Change Button Text</title>
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    </head>
    <body>
        <input type="button" onclick="change()" id="miki" value="change">
        <input type="button" id="myInput" value="Text">
        <button type="button" id="myButton">Button Text</button>
    </body>
    <script>
        function change() {
            $(document).ready(function(){
                // Change text of input button
                $("#myInput").prop("value", "Input Text Changed");
                
                // Change text of button element
                $("#myButton").html("Button Text Changed");
            });
        }
    </script>
</html>

.prop()

.html()

example

Answered by waanofii.tech on November 1, 2020

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

.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

Why does this usage of C++17 if constexpr fail?

4  Asked on December 5, 2021 by cow

         

Can i show all variable results in a div in jQuery?

0  Asked on December 5, 2021 by nippledisaster

   

Comparing two generics in compareTo()

2  Asked on December 5, 2021 by chalupabatmac

       

arranging the json file base on key value

1  Asked on December 5, 2021 by prateek-singh

     

Vue watch method not filtering object

3  Asked on December 5, 2021

   

getting pivot table in pandas in the desired format

1  Asked on December 5, 2021

   

Passing a variable between HTML pages using JavaScript

2  Asked on December 5, 2021 by robert-little

   

Strange, inconsistent behavior in checking whether a python list contains a numpy array

1  Asked on December 5, 2021 by user49404

   

How to avoid code redundancy with JAVA generics

1  Asked on December 5, 2021 by cosimoth

   

Why is my project no longer updating when I write new code?

1  Asked on December 5, 2021 by stephen-horton

       

questions about learning Data Structures and Algorithms in a specific language (noob question)

1  Asked on December 5, 2021 by kchou612

       

pm2 restart loop in AWS Elastic Beansalk (Node environment)

1  Asked on December 5, 2021 by tom-schreck

     

node https ssl your connection is not private error

2  Asked on December 5, 2021 by andrea-dattero

       

Fluent NHibernate Select Max of Count Grouped by property

1  Asked on December 5, 2021 by tamas-toth

     

Nested for loop using dict

9  Asked on December 5, 2021 by purwu

     

React Hooks – Input loses focus when 1 character is typed in

4  Asked on December 5, 2021 by dragos-strugar

   

Mocking Firebase auth signInWithPopUp with jest for React App

1  Asked on December 5, 2021 by user881667

         

How do I build a C Python Extension for Windows using Cygwin64?

2  Asked on December 5, 2021 by zenith2198

       

Wificonfiguration is deprecated Android 10

1  Asked on December 5, 2021 by ahmad-idrees

         

Wrong tootip in chartjs

1  Asked on December 5, 2021 by thiago-scher

   

Ask a Question

Get help from others!

Recent Questions

Recent Answers

© 2022 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, MenuIva, UKBizDB, Menu Kuliner, Sharing RPP