TransWikia.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!

Ask a Question

Get help from others!

Recent Questions

Recent Answers

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