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

Docker environment variable not making it through on run command to shell script

3  Asked on December 18, 2021 by dean-hiller

 

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

   

Is there a better way to write this gross SQL?

2  Asked on December 18, 2021 by relevant

         

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

     

Why does this C code give me a segmentation fault?

2  Asked on December 18, 2021 by deegan

         

How to alter woocommerce widget filter by attribute widget?

2  Asked on December 18, 2021 by jean-r

 

MGLUserLocationAnnotationView subclass does not take the pitch perspective of the camera

2  Asked on December 18, 2021 by desmeit

         

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

     

Why doesn’t the title of Toolbar displayed after I have set title in Android Studio?

3  Asked on December 18, 2021

   

Mayavi imshow obscures quiver3d

1  Asked on December 18, 2021 by mr-squid

   

SQLite and Postgres Partial index support with inherited parameter using SQLAlchemy

1  Asked on December 18, 2021 by 39fredy

         

How to return the index of multi value field in the search results in Lucene?

0  Asked on December 18, 2021 by dmitriy-dumanskiy

 

Vue router optional first parameter

1  Asked on December 18, 2021 by user7531085

       

How to set the Reply-To header using BizTalk SMTP adapter?

1  Asked on December 18, 2021

     

Ask a Question

Get help from others!

Recent Questions

Recent Answers

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