上次的AJAX定时刷新多ID不正确,这次请教了高手之后补全
关键是setInterval无法传递参数,所以用了匿名函数再包裹一下就好了。
//重置发布进度
function resetPercent(id_data){
$.ajax({
url:'/autodeploy/reset_percent/' + id_data,
success: function(json){
},
});
};
//间隔刷新,显示百分比,AJAX调用rest_framework框架
var _interval = {};
function showPercent(id_data){
//var _interval;
var percent_value;
var id_subserver = id_data.split("-")[0]
$.getJSON("/api/subserver/" + id_subserver,
function(data,state){
if (state == 'success') {
percent_value_array = data.deploy_status.split(",");
percent_value = percent_value_array[0];
cmd_value = percent_value_array[1];
$('#' + id_data).html("<div class='uk-progress uk-progress-striped uk-progress-active'><div class='uk-progress-bar' style='width: " + percent_value + "%;'>" + cmd_value + ' ' + percent_value + "%</div><i class='uk-icon-cog uk-icon-spin'></i></div>");
console.log(percent_value[0])
if ( percent_value != 100 ){
//_interval = setInterval(showPercent(id_data), 3000);
} else {
clearInterval(_interval[id_data]);
$('#' + id_data).html("<div class='uk-progress uk-progress-striped uk-progress-success'><div class='uk-progress-bar' style='width: " + percent_value + "%;'>100%</div></div>");
};
};
}
);
};
$(".btn-multi-deploy").click(function(){
var deploypool_id = $(this).attr("deploypool_id")
var group_data = $("#deploy-form" + deploypool_id).serialize()
var deploy_type = $(this).attr("deploy_type")
var _self = this;
console.log(deploypool_id, group_data)
//因为涉及到模态对话态中的AJAX输出ID定位,所以用了两个数组来重置更新进度和刷新百分比。可以优化。
var id_array = []
var id_s_array = []
var group_array = group_data.split("&");
for (var key_data in group_array) {
if (group_array[key_data].indexOf("select-deployversion") != -1) {
deploy_id = group_array[key_data].split("=")[1]
};
if (group_array[key_data].indexOf("check-server") != -1) {
id_s_array.push(group_array[key_data].split("=")[1])
id_array.push(group_array[key_data].split("=")[1] + "-" +deploy_id)
};
};
promiseDEPLOY = $.ajax({
url:'{% url "autodeploy:group-cmd" %}',
type: 'post',
data:{
group_data: group_data,
deploy_type: deploy_type,
},
dataType: 'json',
beforeSend: function(){
result_output = $(_self).siblings("p.result_output");
result_output_desc = $(_self).siblings("p.result_output_desc");
$(_self).attr('disabled',"true");
$(_self).append(" <i class='uk-icon-cog uk-icon-spin'></i>");
result_output_desc.append(" <strong>集群发布中,请耐心等候....</strong>");
// result_output.html("<div >集群发布中,请耐心等候....</div>");
//发送前重置
for( index=0;index < id_s_array.length;index++){
resetPercent(id_s_array[index]);
}
},
success: function(json){
$(_self).children('i').remove();
$(_self).append(" <i class='uk-icon-check'></i>")
result_output_desc.append("<span class='uk-text-success'><i class='uk-icon-check'></i></span>");
result_output_desc.append("<span class='uk-text-success'>异步队列分发完成,每个服务器开始更新。</span>");
//发送后获取进度
for( index=0;index < id_array.length;index++){
var key = id_array[index];
//_interval = setInterval(function(){showPercent(key)}, 3000);
_interval[key] = setInterval(function(){showPercent(key);}, 3000);
}
},
error: function(){
result_output_desc.append("<span class='uk-text-muted'><br>服务器内部错误 </span>");
result_output_desc.append("<span class='uk-text-danger'><i class='uk-icon-remove'></i></span>");
$(_self).children('i').remove();
result_output.html("<div ></div>");
},
complete: function(){
}
});/* end cmd-run stop */
});
上次的AJAX定时刷新多ID不正确,这次请教了高手之后补全的更多相关文章
- jQuery实现AJAX定时刷新局部页面实例
本篇文章通过两种方法实例讲解ajax定时刷新局部页面,当然方法有很多种,也可以不使用ajax来刷新页面,可以使用jquery中的append来给指定内容加东西,但是都不太实用,最实用的方法还是ajax ...
- 【jQuery】: 定时刷新页面
<%@page import="qflag.ucstar.seatmonitor.manager.SeatMonitorManager"%><%@ page la ...
- 使用ajax+php+mysql实现数据库定时刷新
php版本5.5.9,mysql版本5.7. 所以php链接mysql就是使用mysql_connect. 如果遇到了连接时没有成功也没有失败的情况时,就重启mysql,或重启docker(睡一觉就好 ...
- Ajax定时局部刷新
1.局部刷新一个地方 function refreshOnTime(){ $.ajax({ //配置 }); //7秒后重复执行该函数 setInterval('refreshOnTime', 700 ...
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符
js中对arry数组的各种操作小结 最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...
- Ajax回退刷新页面问题的解决办法
在脚本之家看到一篇文章,觉得以后可能会用上,但是竟然不能收藏,所以只能将其转到博客园. 以下是原文地址: http://www.jb51.net/article/87856.htm 这篇文章主要介 ...
- 移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传
现在科技太发达,移动设备像素越来越高,随便一张照片2M+,但是要做移动端图片上传和pc上略有不同,移动端你不能去限制图片大小,让用户先处理图片再上传,这样不现实.所以理解的解决方案就是在上传先进行图片 ...
- Ajax无刷新提交
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- thinkphp ajax 无刷新分页效果的实现
思路:先做出传统分页效果,然后重新复制一份Page.class.php类,对它进行修改,把js中的函数传到page类中,把上一页.下一页.首页.尾页.链接页中的url地址改成js控制的函数,模板页面中 ...
随机推荐
- Web前端发展简史
Web前端发展简史 有人说“前端开发”是IT界最容易被误解的岗位,这不是空穴来风.如果你还认为前端只是从美工那里拿到切图, JS和CSS一番乱炖,难搞的功能就去网上信手拈来,CtrlC + Ctrl ...
- dede常用命令
获取日期:全局:{dede:field.pubdate function="MyDate('Y-m-d H:i',@me)"/} 局部:[field:pubdate funct ...
- java多线程总结四:volatile、synchronized示例
1.synchronized保证同步 先看一个生成偶数的类 <span style="font-size:16px;">package demo.thread; /** ...
- WCF编程系列(七)信道及信道工厂
WCF编程系列(七)信道及信道工厂 信道及信道栈 前面已经提及过,WCF中客户端与服务端的交互都是通过消息来进行的.消息从客户端传送到服务端会经过多个处理动作,在WCF编程模型中,这些动作是按层 ...
- 05_例子讲解:rlCollisionDemo.exe
碰撞检测的例子: "E:\Program Files (x86)\rl-0.6.2\bin\rlCollisionDemo.exe" "E:\Program Files ...
- 九度OJ 1531 货币面值(网易游戏2013年校园招聘笔试题) -- 动态规划
题目地址:http://ac.jobdu.com/problem.php?pid=1531 题目描述: 小虎是游戏中的一个国王,在他管理的国家中发行了很多不同面额的纸币,用这些纸币进行任意的组合可以在 ...
- 用Objective-C的foundation框架解决表达式求值问题
主要思想: 本程序分2个类 一个是ExpressionString类,主要用于存储表达式以及对它进行求值.以下是该类中的内容: (NSString *)expString//用于存储要计算的表达式: ...
- jxl和poi处理excel之比较
功能需求是根据客户提供的excel模板,程序动态填充其中的一些数据.该模板包含大量的宏,刚拿到的时候头都要晕了,本人虽天天和电脑打交道,但是excel咱不是高手啊,什么宏,之前光听过,听着都觉得是高级 ...
- [可拖动DIV]刚开通博客顺便就写了点东西!
说说我自己的思路 首先需要一个初始div div { border: 1px #333 solid; width: 200px; height: 50px; } <div id="od ...
- CRF图像语义分割
看了Ladicky的文章Associative Hierarchical CRFs for Object Class Image Segmentation,下载他主页的代码,文章是清楚了,但代码的RE ...