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下操作css的float属性的特殊写法
Aug 22 Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
Jul 20 Javascript
JavaScript设置获取和设置属性的方法
Mar 04 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
Jul 05 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
Dec 31 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
Jan 05 Javascript
详解angularjs popup-table 弹出框表格指令
Sep 20 Javascript
vue项目开发中setTimeout等定时器的管理问题
Sep 13 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
Sep 30 Javascript
使用pm2自动化部署node项目的方法步骤
Jan 28 Javascript
element-ui 文件上传修改文件名的方法示例
Nov 05 Javascript
关于AngularJS中几种Providers的区别总结
May 17 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读取数据库信息的几种方法
2008/05/24 PHP
PHP垃圾回收机制简单说明
2010/07/22 PHP
php 阴历-农历-转换类代码
2012/01/16 PHP
记录mysql性能查询过程的使用方法
2013/05/02 PHP
PHP+jQuery+Ajax实现用户登录与退出
2015/04/27 PHP
PHP MYSQL实现登陆和模糊查询两大功能
2016/02/05 PHP
一键生成各种尺寸Icon的php脚本(实例)
2017/02/08 PHP
Ajax请求PHP后台接口返回信息的实例代码
2018/08/21 PHP
怎么用javascript进行拖拽
2006/07/20 Javascript
jQuery asp.net 用json格式返回自定义对象
2010/04/07 Javascript
再探JavaScript作用域
2014/09/24 Javascript
WEB前端设计师常用工具集锦
2014/12/09 Javascript
jQuery+easyui中的combobox实现下拉框特效
2015/02/27 Javascript
Lab.js初次使用笔记
2015/02/28 Javascript
js事件监听器用法实例详解
2015/06/01 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
2015/11/13 Javascript
Bootstrap栅格系统的使用和理解2
2016/12/14 Javascript
NodeJS基础API搭建服务器详细过程记录
2017/04/01 NodeJs
js中url对象化管理分析
2017/12/29 Javascript
微信小程序日期时间选择器使用方法
2018/02/01 Javascript
javascript少儿编程关于返回值的函数内容
2018/05/27 Javascript
JavaScript高级函数应用之分时函数实例分析
2018/08/03 Javascript
layui 设置table 行的高度方法
2018/08/17 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
2019/09/10 Javascript
Python验证码识别处理实例
2015/12/28 Python
python3.5 email实现发送邮件功能
2018/05/22 Python
Python Process多进程实现过程
2019/10/22 Python
使用Html5、CSS实现文字阴影效果
2018/01/17 HTML / CSS
Brookstone美国官网:独特新奇产品
2017/03/04 全球购物
巴西最大的巴士票务门户:Quero Passagem
2020/11/21 全球购物
Skechers越南官方网站:来自美国的运动休闲品牌
2021/02/22 全球购物
网友共享的几个面试题关于Java和Unix等方面的
2016/09/08 面试题
网络工程师个人的自我评价范文
2013/10/01 职场文书
十岁生日父母答谢词
2014/01/18 职场文书
党员“一帮一”活动总结
2015/05/07 职场文书
春节慰问简报
2015/07/21 职场文书