jQuery Div中加载其他页面的实现代码


Posted in Javascript onFebruary 27, 2009

经过一翻尝试,终于找到了一个自大比较满意的解决方法,现写在自己的博客中与大家分享。
第一步需要在签核页面中提供一个区域用来显示表单内容,这里使用的是DIV。

<script type="text/javascript"> 
$(document).ready(function() { 
loadPage("doc_view", "<?php echo $this->doc_view_url . '/flag/1'; ?>"); 
}); 
</script> 
<?php 
$p = new Portlet(); 
$p->setCaption("Document View") 
->setShowBorder(false) 
->addItem("<div id='doc_view'></div>") //这个DIv就是用来显示表单内容的容器 
->render(); 
echo $this->partial("approval/CommentsList.phtml", array("approval_list" => $this->approval_list)); 
?>

第二步就是编写一段JavaScript用来获取表单页面,使用jQuery
//动态加载页面 
//id 显示页面的容器组件ID 
//url 欲加载页面网址 
function loadPage(id, url) { 
$("#"+id).addClass("loader"); 
$("#"+id).append("Loading......"); 
$.ajax({ 
type: "get", 
url: url, 
cache: false, 
error: function() {alert('加载页面' + url + '时出错!');}, 
success: function(msg) { 
$("#"+id).empty().append(msg); 
$("#"+id).removeClass("loader"); 
} 
}); 
}
Javascript 相关文章推荐
chrome下jq width()方法取值为0的解决方法
May 26 Javascript
javascript中类的定义方式详解(四种方式)
Dec 22 Javascript
js编写一个简单的产品放大效果代码
Jun 27 Javascript
JavaScript面试开发常用的知识点总结
Aug 08 Javascript
JS验证input输入框(字母,数字,符号,中文)
Mar 23 Javascript
总结js中的一些兼容性易错的问题
Dec 18 Javascript
vue实现组件之间传值功能示例
Jul 13 Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
Aug 31 Javascript
vue-router的HTML5 History 模式设置
Sep 08 Javascript
详解微信小程序用定时器实现倒计时效果
Apr 30 Javascript
JS手写一个自定义Promise操作示例
Mar 16 Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
Oct 31 Javascript
jQuery 使用个人心得
Feb 26 #Javascript
javascript div 弹出可拖动窗口
Feb 26 #Javascript
javascript URL锚点取值方法
Feb 25 #Javascript
javascript 特殊字符串
Feb 25 #Javascript
javascript 密码强弱度检测万能插件
Feb 25 #Javascript
javascript 常用代码技巧大收集
Feb 25 #Javascript
input、button的不同type值在ajax提交表单时导致的陷阱
Feb 24 #Javascript
You might like
粗略计算在线时间,bug:ip相同
2006/12/09 PHP
九个你必须知道而且又很好用的php函数和特点
2013/08/08 PHP
php微信公众号开发之欢迎老朋友
2018/10/20 PHP
分享别人写的一个小型js框架
2007/08/13 Javascript
Javascript 八进制转义字符(8进制)
2011/04/08 Javascript
js前台判断开始时间是否小于结束时间
2012/02/23 Javascript
JS中setTimeout()的用法详解
2013/04/14 Javascript
js将当前时间格式转换成时间搓(自写)
2013/09/26 Javascript
jquery组件使用中遇到的问题整理及解决
2014/02/21 Javascript
详解js私有作用域中创建特权方法
2016/01/25 Javascript
使用struts2+Ajax+jquery验证用户名是否已被注册
2016/03/22 Javascript
轻松实现jquery选项卡切换效果
2016/10/10 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
2016/11/04 Javascript
iframe高度自适应及隐藏滚动条的实例详解
2017/09/29 Javascript
React中上传图片到七牛的示例代码
2017/10/10 Javascript
详解使用React进行组件库开发
2018/02/06 Javascript
浅谈webpack 自动刷新与解析
2018/04/09 Javascript
关于node-bindings无法在Electron中使用的解决办法
2018/12/18 Javascript
移动端JS实现拖拽两种方法解析
2020/10/12 Javascript
[01:03:09]完美世界DOTA2联赛PWL S2 Forest vs SZ 第二场 11.25
2020/11/26 DOTA
numpy判断数值类型、过滤出数值型数据的方法
2018/06/09 Python
Python三元运算与lambda表达式实例解析
2019/11/30 Python
Python进程间通信multiprocess代码实例
2020/03/18 Python
python实现三壶谜题的示例详解
2020/11/02 Python
python wsgiref源码解析
2021/02/06 Python
CSS3样式linear-gradient的使用实例
2017/01/16 HTML / CSS
使用 CSS3 中@media 实现网页自适应的示例代码
2020/03/24 HTML / CSS
巴塞罗那观光通票:Barcelona Pass
2019/10/30 全球购物
2014全国两会学习心得体会2000字
2014/03/10 职场文书
机关干部作风建设剖析材料
2014/10/23 职场文书
党的群众路线教育实践活动心得体会(医院)
2014/11/03 职场文书
陕西导游词
2015/02/04 职场文书
运动会加油稿30字
2015/07/21 职场文书
关于vue中如何监听数组变化
2021/04/28 Vue.js
关于JavaScript回调函数的深入理解
2021/06/27 Javascript
Java elasticsearch安装以及部署教程
2021/06/28 Java/Android