关于 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 ...
随机推荐
- oracle表中某个字段含有字符回车、空格的手动修改方式
select t.*, t.rowid from TB_SD_STANDARD_CHOOSE_ADVISE t where t.id =323900000 update TB_SD_STANDARD_ ...
- MFC中release版本和debug版本区别
最近MFC写了个程序,生成release版,原来正常,后来删掉了些控件再编译运行,结果竟然报内存读写错误,debug却是正常的.后来将“Project Settings” 中 “C++/C ...
- rel="stylesheet" 描述
<link type="text/css" rel="stylesheet" href="css/style.css"/> re ...
- 移动端的头部标签和meta
<!DOCTYPE html><!--HTML5 doctype--> <html> <head> <title>xxx</title ...
- Groovy安装与入门实例
摘自: http://blog.csdn.net/dc_726/article/details/8576205 1 Groovy是什么? 来看下官网的介绍:http://groovy.codehaus ...
- Android IOS WebRTC 音视频开发总结(六一)-- 大数据解密国内实时通讯行业开发现状
本文主要介绍国内实时通讯行业现状,文章最早发表在我们的微信公众号上,详见这里,欢迎关注微信公众号blackerteam,更多详见www.blackerteam.com 这几年移动互联网发展势头很猛,与 ...
- PayPal 开发详解(二):开启【自动返回】和【数据传输】
1.使用我们的商家测试帐号登录 sandbox :http://www.sandbox.paypal.com Business帐号登录 2.登录以后点击:[我的paypal]->[用户信息]-& ...
- DPDK中断机制简析
DPDK通过在线程中使用epoll模型,监听UIO设备的事件,来模拟操作系统的中断处理. 一.中断初始化 在rte_eal_intr_init()函数中初始化中断.具体如下: 1.首先初始化intr_ ...
- 使用Visual Studio Code开发Asp.Net Core WebApi学习笔记(八)-- 多环境开发
本篇将演示Asp.Net Core如何在多环境下进行开发适配. 在一个正规的开发流程里,软件开发部署将要经过三个阶段:开发.测试.上线,对应了三个环境:开发.测试.生产.在不同的环境里,需要编写不同的 ...
- 【原】RDD专题
RDD是什么东西?在Spark中有什么作用?如何使用? 1.RDD是什么 (1)为什么会产生RDD? 传统的MapReduce虽然具有自动容错.平衡负载和可拓展性的优点,但是其最大缺点是采用非循环式 ...