关于 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 ...
随机推荐
- ZoneMinder配置与使用
ZoneMinder是一套基于Linux操作系统的摄像机的视像数据监控的应用软件.应用范围广泛,包括商业或家居防盗等.ZoneMinder支持单一或多台视像镜头应用,包括摄取.分析.记录.和监视来源, ...
- Aster及其它遥感数据下载地址
免费下载TM,ETM的网址,速度还行,本人下载过, http://glcfapp.umiacs.umd.edu 还有一个是下载其他数据的,也可以去看看免费下载·遥感数据http://daac.gsfc ...
- Data URL
Data URL 早在 1995 年就被提出,那个时候有很多个版本的 Data URL Schema 定义陆续出现在 VRML 之中,随后不久,其中的一个版本被提上了议案——将它做个一个嵌入式的资源放 ...
- 021ARM处理器工作模式
1.User模式:usr,普通应用程序运行的模式: 2.FIQ模式:fiq,快速中断模式,当一个程序正在运行时,突然产生一个中断,而且这种中断属于快速中断,那么将进入快速中断模式下运行: 3.IRQ模 ...
- app打包流程
1.什么是打包 将应用程序统一放在一个后缀是ipa的文件中,然后发给其他人,可以安装在手机上供用户或测试人员安装 2.可安装ipa的前提 ①说清楚是哪一个应用程序(App Id) ②可以安装在哪一台设 ...
- Jquery设置select控件指定text的值为选中项
<select name="streetid" id="streetid"> <option value="4">北 ...
- pap与chap协议
1.pap:直接在网络上发送密码明文 2.chap: 网络上发送的是密码的密文;server给client发一段随机数(challenge),client利用随机数对密码进行加密,将用户名和加密后的密 ...
- [leetcode]_Count and Say
题目:一开始没看懂, 后头经过WA发现 输出 的意义 是 出现的次数+值. 1 => 一个1 => 11 11 => 两个1 => 21 111=> 三个1 => ...
- SequoiaDB(巨杉数据库)(社区版)安装配置使用图解
SequoaiDB是一款新型企业级分布式非关系型数据库,提供了基于PC服务器的大规模集群数据平台.作为全球第一家企业级文档式 NoSQL分布式数据库,为用户提供了一个高扩展性.高可用性.高性能.易维护 ...
- Linux rabbitmq的安装和安装amqp的php插件
RabbitMQ是一个消息代理.它的核心原理非常简单:接收和发送消息.你可以把它想像成一个邮局:你把信件放入邮箱,邮递员就会把信件投递到你的收件人处.在这个比喻中,RabbitMQ是一个邮箱.邮局.邮 ...