Changing button value not working using Ajax

Question

I want to change the text of the span to processing... when user clicks

this is what I have tried already

$("#ibSave").text('Please wait...');
//$("#ibSave").prop('disabled', true);
$.ajax({
    type: "POST",
    url: "../Messgaes.asmx/InsertMembers",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    async: false,

    timeout: 900000,
    data: JSON.stringify(Postdata),
    success: function (result) {
        $('#csvimporthint').html("<div class='success'>" + result.d + " members successfully uploaded.</div>")
        $("#ibSave").text('Upload');
        //$('#ctl00_ContentPlaceHolder1_ibSave').prop('disabled', false);
        console.log(new Date() - dates);
    },
    error: function (result) {
        console.log(result.responseText);
    }

});

This is my html

<span id="ibSave" class="btn btn-primary mr5">Upload</span>

I have also tried using Jquery AJAX: How to Change button value on "success"? solutions button("refresh") but some how its not working I was using button previously it wasn't working also

$("#ibSave").val('Please wait...'); 
//when it was a button ^
$("#ibSave").val('Please wait...').button("refresh");
//this both wasn't working

Note: If I open the console in browser then value of button gets changed!!

I don't know what's I'm doing wrong same code with console window/ inspect window opened working fine.

Can you please guide me how to achieve this?

Updated :

Here's my full code

 $("#ibSave").click(function () {

     if ($('.green').length > 0) {
         var json = [];
         $('.green').each(function () {
             var firstname = '';
             var lastName = '';
             var email = '';
             var balance = '';
             var password = '';
             var obj = {},
             $td = $(this).find('td'),

                 firstname = $td.eq(0).text(),
                 lastName = $td.eq(1).text(),
                 email = $td.eq(2).text(),
                 balance = $td.eq(3).text();
             password = $td.eq(4).text();

             obj.FirstName = firstname;
             obj.LastName = lastName;
             obj.Email = email;
             obj.Balance = balance;
             obj.Password = password;
             json.push(obj);
         });
         //console.log(json);
         var Postdata = {
             members: json
         };
         var dates = new Date();


         $("#ibSave").html('Please wait...');
         //$("#ibSave").prop('disabled', true);
         $.ajax({
             type: "POST",
             url: "../Messgaes.asmx/InsertMembers",
             contentType: "application/json; charset=utf-8",
             dataType: "json",
             async: false,

             timeout: 900000,
             data: JSON.stringify(Postdata),
             success: function (result) {
                 $('#csvimporthint').html("<div class='success'>" + result.d + " members successfully uploaded.</div>")
                 $("#ibSave").html('Upload');
                 //$('#ctl00_ContentPlaceHolder1_ibSave').prop('disabled', false);
                 console.log(new Date() - dates);
             },
             error: function (result) {
                 console.log(result.responseText);
             }

         });
         return false;

     } else {
         alert("Sorry! you don't have enough valid rows to upload");
         return false;
     }
 });

Answer 1

Sorry to disturb but I will have to answer my own question for the future reference

I just had disabled

async: false,

I have changed it to

async: true,

And now its changing the values perfectly!

var interval;

                $this = $(this);
                //$("#ibSave").prop('disabled', true);
                $.ajax({
                    type: "POST",
                    url: "../Messgaes.asmx/InsertMembers",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    async: true,

                    beforeSend: function () {

                        $this.val('Uploading');

                        interval = window.setInterval(function () {
                            var text = $this.val();
                            if ($this.val().length < 13) {
                                $this.val($this.val() + '.');
                            } else {
                                $this.val('Uploading');
                            }
                        }, 200);
                    },
                    timeout: 900000,
                    data: JSON.stringify(Postdata),
                    success: function (result) {
                        $('#csvimporthint').html("<div class='success'>"+result.d+" members successfully uploaded.</div>")
                        $this.val("Upload");
                        $this.prop('disabled', false);
                        //$('#ctl00_ContentPlaceHolder1_ibSave').prop('disabled', false);
                        $this.val('Calculating.....');
                        $this.val('Done!');
                        $this.val('Upload');
                        window.clearInterval(interval);
                    },
                    error: function (result) {
                        console.log(result.responseText);
                    }

                });

here's ^ my full code

Special thanks to @mr.Green