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 相关文章推荐
修改file按钮的默认样式实现代码
Apr 23 Javascript
SyntaxHighlighter 3.0.83使用笔记
Jan 26 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
Dec 29 Javascript
ionic开发中点击input时键盘自动弹出
Dec 23 Javascript
vue双向绑定简要分析
Mar 23 Javascript
jQuery实现字体颜色渐变效果的方法
Mar 29 jQuery
基于JQuery和原生JavaScript实现网页定位导航特效
Apr 03 jQuery
使用vue-cli导入Element UI组件的方法
May 16 Javascript
微信二次分享报错invalid signature问题及解决方法
Apr 01 Javascript
Nuxt使用Vuex的方法示例
Sep 06 Javascript
vue-next/runtime-core 源码阅读指南详解
Oct 25 Javascript
微信小程序实现简单购物车功能
Dec 30 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
生成sessionid和随机密码的例子
2006/10/09 PHP
PHP常用特殊运算符号和函数总结(php新手入门必看)
2013/02/02 PHP
PHP实现数字补零功能的2个函数介绍
2014/05/12 PHP
PHP防盗链的基本思想 防盗链的设置方法
2015/09/25 PHP
PHP进阶学习之命名空间基本用法分析
2019/06/18 PHP
Dom在ajax技术中的作用说明
2010/10/25 Javascript
如何获取select下拉框的值(option没有及有value属性)
2013/11/08 Javascript
jquery实现效果比较好的table选中行颜色
2014/03/25 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
2014/12/18 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
2016/06/03 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
2016/07/12 Javascript
JavaScript实现翻页功能(附效果图)
2017/02/16 Javascript
微信小程序左滑动显示菜单功能的实现
2018/06/14 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
2018/07/25 Javascript
webpack4打包vue前端多页面项目
2018/09/17 Javascript
手把手15分钟搭一个企业级脚手架
2019/09/16 Javascript
JavaScript Array对象使用方法解析
2019/09/24 Javascript
Vue 监听元素前后变化值实例
2020/07/29 Javascript
[04:47]DOTA2-潍坊风行电子俱乐部探秘
2014/08/08 DOTA
[34:08]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS EG
2018/03/30 DOTA
[01:10:57]Liquid vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python实现斐波那契数列的方法示例
2017/01/12 Python
python使用selenium登录QQ邮箱(附带滑动解锁)
2019/01/23 Python
Pycharm+django2.2+python3.6+MySQL实现简单的考试报名系统
2019/09/05 Python
win10系统下python3安装及pip换源和使用教程
2020/01/06 Python
Django的CVB实例详解
2020/02/10 Python
python smtplib发送多个email联系人的实现
2020/10/09 Python
python实现猜拳游戏项目
2020/11/30 Python
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
2014/09/02 HTML / CSS
碧欧泉美国官网:Biotherm美国
2016/08/31 全球购物
外贸销售员求职的自我评价
2013/11/23 职场文书
庆祝新中国成立65周年“向国旗敬礼”网上签名寄语
2014/09/27 职场文书
我的法兰西岁月观后感
2015/06/09 职场文书
2016年感恩节活动总结大全
2016/04/01 职场文书
Golang全局变量加锁的问题解决
2021/05/08 Golang
GO语言异常处理分析 err接口及defer延迟
2022/04/14 Golang