使用ajax和data-*属性更新按钮
Update button using ajax and data-* attribute
我试图使一个更新功能,而不是使用表单,我使用data-*属性和ajax。我只是想防止按钮在我更新值后触发,但我有一个问题,我的脚本更新按钮后不应该被触发,因为输入(数字)的值和我的按钮的数据-*属性已经是相同的。我希望你们能帮我。提前感谢:)
$('body').on('click', '.btn-edituser', function(){
var button = $(this);
var upval = button.parent().prev().find('.data-avail').val();//get the value of the input(number)
var updateId = button.data('updateid');// this is the user id to be pass on to the php file
var tempAv = button.data('tempavail'); //doesn't get the new values after updating this is my PROBLEM
if(upval != tempAv){ //check if the input(number) has been changes value / doesn't have the same value with the data attribute (temporary)
button.addClass('disabled');
button.html('<i class="fa fa-refresh fa-spin"></i> Updating...');
$.ajax({
url:'./inc/update-avail.php',
type: 'POST',
data:{upval:upval, updateId:updateId},
success:function(data){
button.removeClass('disabled');
button.attr('data-tempavail', upval); //update the data attribute (temporary)
button.removeClass('btn-info').addClass('btn-success').html('<i class="fa fa-check"></i> Success');
setTimeout(function(){
button.removeClass('btn-success').addClass('btn-info').html('<i class="fa fa-pencil"></i> Edit');
}, 1000);
}
});
} });
在success:
处理程序中尝试通过$.data
而不是$.attr
设置数据,因为稍后会将信息直接存储在属性中的元素上。代码应该是这样的:
success:function(data){
button.removeClass('disabled');
button.data('tempavail', upval); //update the data which can be seen via button.data('tempavail') again on next button click
button.removeClass('btn-info').addClass('btn-success').html('<i class="fa fa-check"></i> Success');
setTimeout(function(){
button.removeClass('btn-success').addClass('btn-info').html('<i class="fa fa-pencil"></i> Edit');
}, 1000);
}
相关文章:
- Css order属性不't在Jquery设置时更新
- 通过jQuery添加ng样式属性,angular不更新
- 更新属性工作不正常Meteor/MongoDB
- Es6:能够在设置/更新/删除对象属性时调用自定义方法
- 如何动态更新输入值属性
- 无法使用编程加载的属性更新范围滑块.js
- 使用Angular Directive用$scope属性更新DOM-只要指令运行(无需等待事件)
- 使用 HTML + Javascript 的多项选择测验:回复:使用数组对象和属性更新分数(帮助分析代码)
- 从新对象的属性更新对象的属性,但前提是新对象上的属性不是未定义的
- 浏览器如何从内部HTML属性更新DOM
- 使用计算属性更新 Ember 模型
- 从 AngularJS 中的服务属性更新$scope
- Ember绑定属性没有更新,尽管控制器属性更新得很好
- HTML5自定义属性更新值
- 数据变量没有从Vue.js中的监视器上的计算属性更新
- 使用ajax和data-*属性更新按钮
- 为什么我不能用Javascript innerHTML属性更新HTML列表项?
- 当数组中的任何项被更改时,如何使Ember计算属性更新
- 属性更新以触发对象的另一个方法
- Vue.js计算属性更新数量