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 相关文章推荐
[原创]图片分页查看
Aug 28 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
Apr 06 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
Dec 03 Javascript
火狐和ie下获取javascript 获取event的方法(推荐)
Nov 26 Javascript
JavaScript中的子窗口与父窗口的互相调用问题
Feb 08 Javascript
微信小程序中顶部导航栏的实现代码
Mar 30 Javascript
JavaScript数据结构之二叉树的删除算法示例
Apr 13 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
Mar 07 Javascript
使用webpack搭建react开发环境的方法
May 15 Javascript
Vue和React组件之间的传值方式详解
Jan 31 Javascript
微信小程序实现列表的横向滑动方式
Jul 15 Javascript
vue实现抽屉弹窗效果
Nov 15 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
PHP4和PHP5性能测试和对比 测试代码与环境
2007/08/17 PHP
工厂模式在Zend Framework中应用介绍
2012/07/10 PHP
php文件夹与文件目录操作函数介绍
2013/09/09 PHP
PHP判断一个数组是另一个数组子集的方法详解
2017/07/31 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
php设计模式之抽象工厂模式分析【星际争霸游戏案例】
2020/01/23 PHP
javascript IFrame 强制刷新代码
2009/07/23 Javascript
统计出现最多的字符次数的js代码
2010/12/03 Javascript
Node.js中调用mysql存储过程示例
2014/12/20 Javascript
JavaScript的9种继承实现方式归纳
2015/05/18 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
2016/05/18 Javascript
jQuery+Ajax实现限制查询间隔的方法
2016/06/07 Javascript
JS实现重新加载当前页面或者父页面的几种方法
2016/11/30 Javascript
ThinkPHP+jquery实现“加载更多”功能代码
2017/03/11 Javascript
js+html5实现手机九宫格密码解锁功能
2018/07/30 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
2019/02/02 Javascript
ES6基础之数组和对象的拓展实例详解
2019/08/22 Javascript
浅析Vue下的components模板使用及应用
2019/11/27 Javascript
详解Vue的ref特性的使用
2020/01/24 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
2020/08/17 Javascript
python类和函数中使用静态变量的方法
2015/05/09 Python
Python实现提取谷歌音乐搜索结果的方法
2015/07/10 Python
Python 绘图库 Matplotlib 入门教程
2018/04/19 Python
django自带的server 让外网主机访问方法
2018/05/14 Python
使用TensorFlow实现简单线性回归模型
2019/07/19 Python
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
2019/01/17 HTML / CSS
杭州信雅达系统.NET工程师面试试题
2015/02/08 面试题
中学生运动会入场词
2014/02/12 职场文书
学习雷锋倡议书
2014/04/15 职场文书
难忘的一课教学反思
2014/04/30 职场文书
给校长的建议书400字
2014/05/15 职场文书
人事行政助理岗位职责
2015/04/11 职场文书
学校工会工作总结2015
2015/05/19 职场文书
iPhone13将有八大升级
2021/04/15 数码科技
Python3使用Qt5来实现简易的五子棋小游戏
2022/05/02 Python
html中相对位置与绝对位置的具体使用
2022/05/15 HTML / CSS