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 相关文章推荐
JavaScript获取页面上某个元素的代码
Mar 13 Javascript
JS获取整个页面文档的实现代码
Dec 15 Javascript
JavaScript初学者应注意的七个细节详细介绍
Dec 27 Javascript
jQuery中parents()和parent()的区别分析
Oct 28 Javascript
javascript每日必学之条件分支
Feb 17 Javascript
javascript中JSON.parse()与eval()解析json的区别
May 19 Javascript
jQuery Mobile动态刷新页面样式的实现方法
May 28 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
Aug 01 Javascript
Vue.js动态组件解析
Sep 09 Javascript
smartupload实现文件上传时获取表单数据(推荐)
Dec 12 Javascript
JavaScript仿聊天室聊天记录
Dec 27 Javascript
Node.js常用工具之util模块
Mar 09 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
深入PHP数据加密详解
2013/06/18 PHP
php中利用str_pad函数生成数字递增形式的产品编号
2013/09/30 PHP
php递归使用示例(php递归函数)
2014/02/14 PHP
PHP7之Mongodb API使用详解
2015/12/26 PHP
PHP 7.0.2 正式版发布
2016/01/08 PHP
CI框架教程之优化验证码机制详解【验证码辅助函数】
2019/04/16 PHP
Laravel5.4简单实现app接口Api Token认证方法
2019/08/29 PHP
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
2010/09/19 Javascript
js图片延迟加载的实现方法及思路
2013/07/22 Javascript
Jquery 的outerHeight方法使用介绍
2013/09/11 Javascript
关于原生js中bind函数的简单实现
2016/08/10 Javascript
vue2.0父子组件间通信的实现方法
2017/04/19 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
2017/06/13 jQuery
vue+springboot前后端分离实现单点登录跨域问题解决方法
2018/01/30 Javascript
webpack 4.0.0-beta.0版本新特性介绍
2018/02/10 Javascript
Vue数据双向绑定的深入探究
2018/11/27 Javascript
Python中字典(dict)和列表(list)的排序方法实例
2014/06/16 Python
在Python程序中实现分布式进程的教程
2015/04/28 Python
python win32 简单操作方法
2017/05/25 Python
python通过ffmgep从视频中抽帧的方法
2018/12/05 Python
python 画三维图像 曲面图和散点图的示例
2018/12/29 Python
Python timer定时器两种常用方法解析
2020/01/20 Python
python和pywin32实现窗口查找、遍历和点击的示例代码
2020/04/01 Python
Python 操作 PostgreSQL 数据库示例【连接、增删改查等】
2020/04/21 Python
美国杰西潘尼官网:JCPenney
2019/06/12 全球购物
大整数数相乘的问题
2012/07/22 面试题
程序员跳槽必看面试题总结
2013/06/28 面试题
如何执行一个shell程序
2012/11/23 面试题
大专生简历的自我评价
2013/11/26 职场文书
医院实习介绍信
2014/01/12 职场文书
《再别康桥》教学反思
2014/02/12 职场文书
2014道德模范事迹材料
2014/02/16 职场文书
八一建军节营销活动方案
2014/08/31 职场文书
公司给客户的感谢信
2015/01/23 职场文书
小学生心理健康活动总结
2015/05/08 职场文书
Java如何实现树的同构?
2021/06/22 Java/Android