CODEWITHSUNDEEP
javascripthtmlajax
FeoniX
FeoniX

Reputation: 11

ajax success function cant change button text

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

Upvotes: 0

Views: 440

Answers (5)

FeoniX
FeoniX

Reputation: 11

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 !!! ~ (^_^)∠※

Upvotes: 1

Rakshith Gowda
Rakshith Gowda

Reputation: 11

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>

Upvotes: 0

AhmadMM
AhmadMM

Reputation: 369

In Success use

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

Upvotes: 0

Shoyeb Sheikh
Shoyeb Sheikh

Reputation: 2866

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.

Upvotes: 0

Thamothara Kannan
Thamothara Kannan

Reputation: 11

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

Upvotes: 0

Related Questions