jquery - 使用 Ajax 更改按钮值不起作用

标签 jquery ajax button

当用户点击时,我想将范围的文本更改为正在处理...

这是我已经尝试过的

$("#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);
    }

});

这是我的html

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

我也尝试过使用Jquery AJAX: How to Change button value on "success"?解决方案 按钮(“刷新”) 但有些它不起作用 我之前使用过按钮,但它也不起作用

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

注意:如果我在浏览器中打开控制台,则按钮的值会更改!!

我不知道我做错了什么,控制台窗口/检查窗口打开时的相同代码工作正常。

您能指导我如何实现这一目标吗?

更新:

这是我的完整代码

 $("#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;
     }
 });

最佳答案

抱歉打扰,但我必须回答我自己的问题以供将来引用

我刚刚禁用了

async: false,

我已将其更改为

async: true,

现在它完美地改变了值(value)观!

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

                });

这是^我的完整代码

特别感谢@mr.Green

关于jquery - 使用 Ajax 更改按钮值不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27560401/

相关文章:

ajax - meteor HTTP.call 和 jquery ajax

javascript - php 未输出 JSON 数据

javascript - ListenOnce() 在backbone.js 事件中运行两次

asp.net - 小屏幕上的 Ajax 模态弹出位置

c# - Repeater 中的按钮不会触发 ItemCommand

php - 如何使用 SQL 查询生成的按钮获取 id/name onclick?

Javascript 将 switch 的大小写绑定(bind)到 html 按钮

javascript - 在html中动态添加事件监听器

javascript - Nouislider 设置范围可变

javascript - 需要 jqgrid saverow 相关帮助