ajax success function cant change button text

Question

I have a simple but strange question, I am not able to change the value of the button in an ajax post success callback, I am sure the callback gets executed as the alert was shown. Also, those buttons are created statically, I did not create them dynamically using Jquery.

Below is my ajax:

$.ajax({
    type: "POST",
    beforeSend: function (xhr) {
        xhr.setRequestHeader("XSRF-TOKEN",
        $('input:hidden[name="__RequestVerificationToken"]').val());
    },
    url: "/?handler=Queue",
    data: $.param(params),
    dataType: "json",
    success: function (response) {
        $("#btn-queue-lib").val("Cancel Queue");
        alert(response.responseText);
    },
    error: function (xhr) {
        alert(xhr.responseText);
    }
});

However, if I change the problem line outside of ajax, it works fine:

$("#btn-queue-lib").val("Cancel Queue"); // Either Here
$.ajax({
    type: "POST",
    beforeSend: function (xhr) {
        xhr.setRequestHeader("XSRF-TOKEN",
        $('input:hidden[name="__RequestVerificationToken"]').val());
    },
    url: "/?handler=Queue",
    data: $.param(params),
    dataType: "json",
    success: function (response) {
        alert(response.responseText);
    },
    error: function (xhr) {
        alert(xhr.responseText);
    }
});
$("#btn-queue-lib").val("Cancel Queue"); // Or Here

@JackBashford Yup, I am sure that the call is succeed as the alert was shown. — FeoniX, Mar 20 '19 at 08:53
@JasminMistry Yup, as I was able to change its text anywhere outside of the callback using its id. — FeoniX, Mar 20 '19 at 08:56
Just to be sure, alert of success is called and not error function one? — Gaurav Gupta, Mar 20 '19 at 08:57
@GauravGupta Yup, as I set the success message differ from the error one. — FeoniX, Mar 20 '19 at 08:58
If you place `console.log($("#btn-queue-lib"))` inside the success callback, what log do you produce on your console? It seems like jQuery can't find any element with that id — gbalduzzi, Mar 20 '19 at 09:02
Possible duplicate of [how to change button text after succes in ajax](https://stackoverflow.com/questions/38374763/how-to-change-button-text-after-succes-in-ajax) — AhmadMM, Mar 20 '19 at 09:03

score 1 · Answer 1 · answered Mar 20 '19 at 09:16

I have found out the problem, I dunno for some reason the server is returning the success message but actually returning a badrequest. Hence I mistaken that the success function should be called. If I put the problem line in the error callback, it works fine. Thanks guys for your efforts !!! ~ (^_^)∠※

score 0 · Answer 2 · answered Mar 20 '19 at 08:55

0

document.getElementById('btn-queue-lib').innerText = 'Cancel Queue'

answered Mar 20 '19 at 08:55

Thamothara Kannan

11
2

score 0 · Answer 3 · answered Mar 20 '19 at 08:58

0

change

$("#btn-queue-lib").val("Cancel Queue");

to

$("#btn-queue-lib").text("Cancel Queue");

and place the statement in ajax success function right before alert.

answered Mar 20 '19 at 08:58

Shoyeb Sheikh

2,659
2
10
19

Please read comment "Yup, as I was able to change its text anywhere outside of the callback using its id". – Jasmin Mistry Mar 20 '19 at 08:59
what makes the difference ? outside ajax or inside ajax, button's id is never changing, btw he is using val() instead of text() – Shoyeb Sheikh Mar 20 '19 at 09:00
This does not work, and it actually didnt even work outside of the ajax callback also, but the val() works outside. – FeoniX Mar 20 '19 at 09:04

score 0 · Answer 4 · answered Mar 20 '19 at 09:09

0

In Success use

 $("#btn-queue-lib").html("Cancel Queue");

answered Mar 20 '19 at 09:09

AhmadMM

371
4
16

score 0 · Answer 5 · answered Mar 20 '19 at 09:14

Even I have faced the same issue... I managed it as below hope it will help for too

function changeAfterAjax(){
$.ajax({
    type: "GET",
    url:"https://reqres.in/api/users?page=2",
    //data: $.param(params),
    dataType: "json",
    success: function (response) {
        $("#btn-queue-lib").text("Cancel Queue");// this is also works fine 
        //changeBtnTxt('btn-queue-lib','Cancel Queue');
        //alert(response);
    },
    error: function (xhr) {
        console.log(xhr);
    }
})
}

function changeBtnTxt(id,txt){
  $("#"+id).text(txt);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="changeAfterAjax()" id="btn-queue-lib">Click to chanage after ajax</button>

ajax success function cant change button text

5 Answers5