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 Ajax学习实例7 Ajax所有过程事件分析示例
Mar 23 Javascript
this和执行上下文实现代码
Jul 01 Javascript
js中关于new Object时传参的一些细节分析
Mar 13 Javascript
jQuery的deferred对象使用详解
Aug 20 Javascript
JQuery入门——移除绑定事件unbind方法概述及应用
Feb 05 Javascript
Bootstrap每天必学之导航条(二)
Mar 01 Javascript
基于JS实现Android,iOS一个手势动画效果
Apr 27 Javascript
React中常见的动画实现的几种方式
Jan 10 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
Jun 07 Javascript
vue中设置height:100%无效的问题及解决方法
Jul 27 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
Oct 28 Javascript
angular 服务随记小结
May 06 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
PHP5 操作MySQL数据库基础代码
2009/09/29 PHP
php empty,isset,is_null判断比较(差异与异同)
2010/10/19 PHP
PHP 面向对象详解
2012/09/13 PHP
php array_merge函数使用需要注意的一个问题
2015/03/30 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
2015/08/05 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
2015/09/15 Javascript
js输出数据精确到小数点后n位代码
2016/07/02 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
2016/09/08 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
2016/11/01 Javascript
原生JS实现圣旨卷轴展开效果
2017/03/06 Javascript
javaScript之split与join的区别(详解)
2017/11/08 Javascript
浅谈es6中export和export default的作用及区别
2018/02/07 Javascript
vue cli 全面解析
2018/02/28 Javascript
用vue-cli开发vue时的代理设置方法
2018/09/20 Javascript
node使用Mongoose类库实现简单的增删改查
2018/11/08 Javascript
Vue实现星级评价效果实例详解
2019/12/30 Javascript
利用Python学习RabbitMQ消息队列
2015/11/30 Python
CentOS安装pillow报错的解决方法
2016/01/27 Python
Python实现的FTP通信客户端与服务器端功能示例
2018/03/28 Python
Pandas之MultiIndex对象的示例详解
2019/06/25 Python
用Python爬取QQ音乐评论并制成词云图的实例
2019/08/24 Python
PyTorch实现AlexNet示例
2020/01/14 Python
python selenium自动化测试框架搭建的方法步骤
2020/06/14 Python
Keras自定义IOU方式
2020/06/10 Python
pycharm使用技巧之自动调整代码格式总结
2020/11/04 Python
手机端用rem+scss做适配的详解
2017/11/15 HTML / CSS
迪斯尼商品官方网站:ShopDisney
2016/08/01 全球购物
微软巴西官方网站:Microsoft Brasil
2019/09/26 全球购物
怎么写好自荐信
2013/10/30 职场文书
2014乡镇党委副书记对照检查材料思想汇报
2014/10/09 职场文书
环境卫生工作汇报材料
2014/10/28 职场文书
2014年节能降耗工作总结
2014/12/11 职场文书
简单的辞职信怎么写
2015/02/28 职场文书
苦儿流浪记读书笔记
2015/07/01 职场文书
springboot 全局异常处理和统一响应对象的处理方式
2022/06/28 Java/Android