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浮点数运算出现Bug的方法
Mar 12 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
Apr 15 Javascript
js实现可拖动DIV的方法
Dec 17 Javascript
javascript通过元素id和name直接取得元素的方法
Apr 28 Javascript
关于延迟加载JavaScript
May 05 Javascript
学习Node.js模块机制
Oct 17 Javascript
原生js实现查询天气小应用
Dec 09 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
Jan 25 Javascript
react router4+redux实现路由权限控制的方法
May 03 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
Sep 27 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
js+canvas实现两张图片合并成一张图片的方法
Nov 01 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-timeit估计php函数的执行时间
2015/09/06 PHP
php代码检查代理ip的有效性
2016/08/19 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
jquery 笔记 事件
2011/11/02 Javascript
JS中实现replaceAll的方法(实例代码)
2013/11/12 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
2013/12/12 Javascript
鼠标拖拽移动子窗体的JS实现
2014/02/25 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
2014/05/05 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
2014/06/13 Javascript
基于jQuery创建鼠标悬停效果的方法
2015/03/07 Javascript
学习Bootstrap组件之下拉菜单
2015/07/28 Javascript
js实现数组去重方法及效率?Ρ? target=
2017/02/14 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
2017/02/28 Javascript
Node.js编写CLI的实例详解
2017/05/17 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
2017/05/25 Javascript
详解React native全局变量的使用(跨组件的通信)
2017/09/07 Javascript
webpack项目使用eslint建立代码规范实现
2019/05/16 Javascript
浅谈JS for循环中使用break和continue的区别
2020/07/21 Javascript
记录一次websocket封装的过程
2020/11/23 Javascript
Python中Scrapy爬虫图片处理详解
2017/11/29 Python
Python编程实现的简单神经网络算法示例
2018/01/26 Python
Python Scapy随心所欲研究TCP协议栈
2018/11/20 Python
Python设计模式之抽象工厂模式原理与用法详解
2019/01/15 Python
python 动态调用函数实例解析
2019/10/21 Python
Python操作MySQL数据库的示例代码
2020/07/13 Python
详解Pycharm安装及Django安装配置指南
2020/09/15 Python
如何在Win10系统使用Python3连接Hive
2020/10/15 Python
python安装sklearn模块的方法详解
2020/11/28 Python
Python结合百度语音识别实现实时翻译软件的实现
2021/01/18 Python
js实现移动端H5页面手指滑动刻度尺功能
2017/11/16 HTML / CSS
大学生2014全国两会学习心得体会
2014/03/10 职场文书
白血病捐款倡议书
2014/05/14 职场文书
创文明城市标语
2014/06/16 职场文书
基层党员四风问题自我剖析材料
2014/09/29 职场文书
员工开除通知书
2015/04/25 职场文书
如何利用Matlab制作一款真正的拼图小游戏
2021/05/11 Python