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 相关文章推荐
jquery 简单应用示例总结
Aug 09 Javascript
jQuery实现的支持IE的html滑动条
Mar 16 Javascript
详谈javascript中的cookie
Jun 03 Javascript
在for循环中length值是否需要缓存
Jul 27 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
Jun 21 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
Nov 29 Javascript
Vue axios 中提交表单数据(含上传文件)
Jul 06 Javascript
vue.js学习笔记之v-bind和v-on解析
May 03 Javascript
实例详解BootStrap的动态模态框及静态模态框
Aug 13 Javascript
Vue2.0生命周期的理解
Aug 20 Javascript
JS运算符优先级与表达式示例详解
Sep 04 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
Sep 04 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
Wordpress 相册插件 NextGEN-Gallery 添加目录将中文转为拼音的解决办法
2010/12/29 PHP
php 生成唯一id的几种解决方法
2013/03/08 PHP
php结合curl实现多线程抓取
2015/07/09 PHP
php版微信支付api.mch.weixin.qq.com域名解析慢原因与解决方法
2016/10/12 PHP
一起来写段JS drag拖动代码
2010/12/09 Javascript
简单选项卡 js和jquery制作方法分享
2014/02/26 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
2015/03/03 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
2017/03/02 Javascript
最全的JavaScript开发工具列表 总有一款适合你
2017/06/29 Javascript
vue组件挂载到全局方法的示例代码
2018/08/02 Javascript
解决layer弹层遮罩挡住窗体的问题
2018/08/17 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
2020/05/28 Javascript
Electron-vue开发的客户端支付收款工具的实现
2019/05/24 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
2019/06/07 Javascript
javascript面向对象三大特征之封装实例详解
2019/07/24 Javascript
js实现鼠标滑动到某个div禁止滚动
2020/09/17 Javascript
Python简单实现安全开关文件的两种方式
2016/09/19 Python
Python脚本实现12306火车票查询系统
2016/09/30 Python
python+selenium实现京东自动登录及秒杀功能
2017/11/18 Python
Python实现破解12306图片验证码的方法分析
2017/12/29 Python
Python(TensorFlow框架)实现手写数字识别系统的方法
2018/05/29 Python
Python实现查找二叉搜索树第k大的节点功能示例
2019/01/24 Python
python中类的输出或类的实例输出为这种形式的原因
2019/08/12 Python
Python 共享变量加锁、释放详解
2019/08/28 Python
Python常用模块sys,os,time,random功能与用法实例分析
2020/01/07 Python
服务器端jupyter notebook映射到本地浏览器的操作
2020/04/14 Python
马来西亚最大的在线隐形眼镜商店:MrLens
2019/03/27 全球购物
工程管理造价应届生求职信
2013/11/13 职场文书
外贸业务员岗位职责
2013/11/24 职场文书
拾金不昧的表扬信
2014/01/16 职场文书
《临死前的严监生》教学反思
2014/02/13 职场文书
优秀实习生感言
2014/03/01 职场文书
毕业生的自我鉴定表范文
2019/05/16 职场文书
晶体管单管来复再生式收音机
2021/04/22 无线电
使用php的mail()函数实现发送邮件功能
2021/06/03 PHP
剧场版《转生恶役只好拔除破灭旗标》公开最新视觉图 2023年上映
2022/04/02 日漫