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 相关文章推荐
JS获取整个页面文档的实现代码
Dec 15 Javascript
整理Javascript数组学习笔记
Nov 29 Javascript
jQuery中常用动画效果函数(日常整理)
Sep 17 Javascript
微信小程序  modal弹框组件详解
Oct 27 Javascript
Web前端框架bootstrap实战【第一次接触使用】
Dec 28 Javascript
js cookie实现记住密码功能
Jan 17 Javascript
Angularjs自定义指令Directive详解
May 27 Javascript
JavaScript之创意时钟项目(实例讲解)
Oct 23 Javascript
vue.draggable实现表格拖拽排序效果
Dec 01 Javascript
Vue-input框checkbox强制刷新问题
Apr 18 Javascript
vue-router路由模式详解(小结)
Aug 26 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
Sep 03 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
造势之举?韩国总统候选人发布《星际争霸》地图
2017/04/22 星际争霸
PHP CodeBase:将时间显示为&quot;刚刚&quot;&quot;n分钟/小时前&quot;的方法详解
2013/06/06 PHP
phpmyadmin提示The mbstring extension is missing的解决方法
2014/12/17 PHP
php简单计算权重的方法示例【适合抽奖类应用】
2019/06/10 PHP
JavaScript去掉数组中的重复元素
2011/01/13 Javascript
初学js插入节点appendChild insertBefore使用方法
2011/07/04 Javascript
Extjs实现进度条的两种便捷方式
2013/09/26 Javascript
Nodejs中自定义事件实例
2014/06/20 NodeJs
JavaScript插件化开发教程 (一)
2015/01/27 Javascript
jQuery调用Webservice传递json数组的方法
2016/08/06 Javascript
详解在vue-cli项目中安装node-sass
2017/06/21 Javascript
vue之将echart封装为组件
2018/06/02 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
2018/08/09 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
2019/01/24 Javascript
修改NPM全局模式的默认安装路径的方法
2020/12/15 Javascript
[46:49]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.19
2020/12/24 DOTA
Python兔子毒药问题实例分析
2015/03/05 Python
python编程实现希尔排序
2017/04/13 Python
python urllib爬取百度云连接的实例代码
2017/06/19 Python
Python编程使用tkinter模块实现计算器软件完整代码示例
2017/11/29 Python
Numpy中stack(),hstack(),vstack()函数用法介绍及实例
2018/01/09 Python
Python学生成绩管理系统简洁版
2020/04/05 Python
Python之pandas读写文件乱码的解决方法
2018/04/20 Python
Python程序包的构建和发布过程示例详解
2019/06/09 Python
Python加密模块的hashlib,hmac模块使用解析
2020/01/02 Python
AmazeUI中各种的导航式菜单与解决方法
2020/08/19 HTML / CSS
加拿大著名时装品牌:SOIA & KYO
2016/08/23 全球购物
木马的传播途径主要有哪些
2016/04/08 面试题
租房安全协议书
2014/08/20 职场文书
学习党代会心得体会
2014/09/05 职场文书
大三学生学年自我鉴定
2014/09/12 职场文书
高中生第一学年自我鉴定2015
2014/09/28 职场文书
筑梦中国心得体会
2016/01/18 职场文书
css实现两栏布局,左侧固定宽,右侧自适应的多种方法
2021/08/07 HTML / CSS
在HTML中引入CSS的几种方式介绍
2021/12/06 HTML / CSS
V Rising 服务器搭建图文教程
2022/06/16 Servers