关于 ajax 动态返回数据 css 以及 js 失效问题
ajax 毕竟是异步的 所以动态加载出来的数据 难免遇到 css 或者 js 失效的问题,所以要动态加载 css ji等文件了
1.公共方法 load
//动态加载 js /css
function loadjscssfile(filename, filetype) {
if (filetype == "js") { //判定文件类型
var fileref = document.createElement('script')//创建标签
fileref.setAttribute("type", "text/javascript")//定义属性type的值为text/javascript
fileref.setAttribute("src", filename)//文件的地址
}
else if (filetype == "css") { //判定文件类型
var fileref = document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", filename)
}
if (typeof fileref != "undefined")
document.getElementsByTagName("head")[0].appendChild(fileref)
}
2. 示例代码
//初始化左侧 管理菜单
function InitLeftMenu() { var flag = false; //标识,表示页面上数据还未处理完成 $("#side-menu").empty();
var menulist = ' <li class="nav-header"><div class="dropdown profile-element">';
menulist += '<span><img alt="image" class="img-circle" src="/WebClient/static//BC.P.plus/img/profile_small.jpg" /></span>';
menulist += '<a data-toggle="dropdown" class="dropdown-toggle" href="#">';
menulist += '<span class="clear">';
menulist += '<span class="block m-t-xs"><strong class="font-bold">OCP-admin</strong></span>';
menulist += '<span class="text-muted text-xs block">管理员<b class="caret"></b></span>';
menulist += '</span>';
menulist += '</a>';
menulist += '</div>';
menulist += '<div class="logo-element"> QPTS </div>';
menulist += '</li>';
//同步获取
$.ajax({
type: 'GET',
url: '/Handler/MenuPermissionsASHX.ashx?Func=GetEasyUIMenuList',
async: false,//同步
dataType: 'json',
success: function (json) {
_menus = eval('(' + json.data + ')'); $.each(_menus.menus, function (i, n) {
menulist += "<li>";
menulist += '<a href="#"> <i class="fa fa fa-bar-chart-o"></i><span class="nav-label">' + n.menuname + '</span><span class="fa arrow"></span></a> ';
menulist += '<ul class="nav nav-second-level">';
$.each(n.menus, function (j, o) { menulist += '<li><a class="J_menuItem" href="' + o.url + '" title="' + o.menuname + '">' + o.menuname + '</a></li> '; })
menulist += '</ul>';
menulist += '</li>';
}) flag = true;
$("#side-menu").html(menulist); },
error: function (xhr, status, error) {
alert("操作失败"); //xhr.responseText
}
}); var loadFile; loadFile = setInterval(function() {//定时检测
if(flag) {//如果数据已经处理完毕
loadjscssfile('static/Bootstrap/css/bootstrap.min.css', "css"); //加载你的css文件
loadjscssfile('static/jQuery/jquery-2.1.1.js', "js"); //加载你的js文件
loadjscssfile('static/Bootstrap/js/bootstrap.min.js', "js"); //加载你的js文件
clearTimeout(t);//取消定时检测节省开销
}
},50); }
相关链接:http://www.cnblogs.com/lkf18/archive/2012/05/24/2515935.html
关于 ajax 动态返回数据 css 以及 js 失效问题的更多相关文章
- 关于 ajax 动态返回数据 css 以及 js 失效问题(动态引入JS)
ajax 毕竟是异步的 所以动态加载出来的数据 难免遇到 css 或者 js 失效的问题,所以要动态加载 css ji等文件了 1.公共方法 load //动态加载 js /css function ...
- ajax请求返回数据,模板中的数据处理
/*ajax请求返回数据,模板中的数据处理*/ function QueryGameAsset(){ var new_start_time=$('#new_start_time').val();//开 ...
- echarts通过ajax动态获取数据的方法
echarts表格的数据一般都需要动态获取,所以总结了一下通过ajax动态获取数据的操作: 插入的方法应该不止一种,我也是接触不久,所以刚学会了一种插入方法: 灵感和经验来自:https://www. ...
- $.ajax请求返回数据中status为200,回调的却是error?
$.ajax({ type:'get',//使用get方法访问后台 dataType:'json',//访问json格式的数据 url:'http://job.hainan.net/api/recru ...
- 用JavaScript动态加载CSS和JS文件
本文转载自:http://www.cnblogs.com/xiaochaohuashengmi/archive/2011/11/14/2248451.html 今天项目中需要用到动态加载 CSS 文件 ...
- 关于ajax请求数据后,数据本身的js失效的一些想法
今天遇到一个头疼的问题.我做一个左右翻页效果(客户要求能够无限翻页),所以只能动态请求数据,进行局部刷新操作. 这时候问题就出来了,当我请求翻页的时候,数据通过js填充到div里面,但这些数据,自身带 ...
- nginx实现动态分离,解决css和js等图片加载问题
改帖专门为使用nginx,通过nginx把请求转发到web服务器再返回客户端的时候,解决css和js和图片加载不出来的问题. 如果没安装nginx,请访问一下地址进行安装 http://www.cnb ...
- ajax正确返回数据,却进入了error分支
.net 开发: $.ajax({ type: "POST", //post没有数据量限制 url: "ashx/PostHandle.ashx", data: ...
- js实用方法记录-js动态加载css、js脚本文件
js实用方法记录-动态加载css/js 附送一个加载iframe,h5打开app代码 1. 动态加载js文件到head标签并执行回调 方法调用:dynamicLoadJs('http://www.yi ...
随机推荐
- iOS百度地图探索
新建工程后,几项准备: 1.工程中一个文件设为.mm后缀 2.在Xcode的Project -> Edit Active Target -> Build -> Linking -&g ...
- C++ 学习基础一
1.预处理器指示符如果文件名用尖括号“<”和”>”括起来的,则表示该文件是工程或标准头文件,查找过程会检查预定义的目录.如果文件名用双引号括起来,则表示该文件是用户自定义的头文件,查找该文 ...
- Rich控件一
Calendar控件 Calendar控件用来在Web页面中显示日历中的可选日期,并显示与特定日期关联的数据. 控件声明代码如下: <asp: Calendar id=" Calend ...
- PHP版实现友好的时间显示方式(例如:2小时前)
完整php类,通常我会配合smary使用,快捷使用 (plugins/function.rdate.php),更多php技术开发就去php教程网,http://php.662p.com <?PH ...
- 必须会的SQL语句(六)查询
1.基础的查询 1)重命名列 select name as '姓名' from 表名 2)定义常量列 select 是否 ='是' from 表名 3) ...
- atexit注册的函数是在main函数之后执行?
跟atexit函数相识已久,man手册里对atexit的解释是这么一段: The atexit() function registers the given function to be called ...
- Django搭建及源码分析(一)
一.关于Django以下两个站点,在使用方面有详细说明. http://www.nowamagic.net/academy/part/13/286 http://www.w3cschool.cc/dj ...
- 实现Win7远程桌面关机和重启
通过远程桌面控制Win7系统时,菜单中没有关机和重启按钮, 1.方法1 关机 shutdown -s -t 0重启 shutdown -r -t 0 可以先打开运行框(Win+R键),输入上述命令即可 ...
- mysql实体关系(mysql学习五)
实体关系 表设计 1:1 两个实体表内,存在相同的主键字段 如果记录的主键值等于另一个关系表内记录的主键值,则两条记录的对应为一一对应 优化上称为垂直分割 1:n 一个实体对应多个其他实体(一个班级 ...
- linux中文显示乱码的解决办法
linux中文显示乱码的解决办法 linux中文显示乱码是一件让人很头疼的事情. linux中文显示乱码的解决办法:[root@kk]#vi /etc/sysconfig/i18n将文件中的内容修改为 ...