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;
     }
 });

its a <button> or <input>? can you please also share some html code of your problem — Rohit Batra
– Rohit Batra, Commented Dec 19, 2014 at 5:52
when i try with simple button click it works jsfiddle.net/aforpxsL . How'r you triggering the ajax? — Rohit Batra
– Rohit Batra, Commented Dec 19, 2014 at 5:58

Community · Accepted Answer · 2017-05-23 11:49:27Z

2

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

edited May 23, 2017 at 11:49

CommunityBot

11 silver badge

answered Dec 19, 2014 at 8:45

Just code

13.8k10 gold badges54 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Raúl Monge Over a year ago

By default, all requests are sent asynchronously (i.e. this is set to true by default). If you need synchronous requests, set this option to false. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active. api.jquery.com/jquery.ajax

Just code Over a year ago

@RaúlMonge exactly this is where I was going wrong but didn't aware that browser will block my actions during the sync actions

Collectives™ on Stack Overflow

Changing button value not working using Ajax

Updated :

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Updated :

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related