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 相关文章推荐
IE6中使用position导致页面变形的解决方案(js代码)
Jan 09 Javascript
JavaScript中的变量声明早于赋值分析
Mar 01 Javascript
对比分析json及XML
Nov 28 Javascript
AngularJS包括详解及示例代码
Aug 17 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
Dec 27 Javascript
微信小程序通过api接口将json数据展现到小程序示例
Jan 20 Javascript
完美的js图片轮换效果
Feb 05 Javascript
基于vue+ bootstrap实现图片上传图片展示功能
May 17 Javascript
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
JavaScript 保护变量不被随意修改的实现代码
Sep 27 Javascript
webpack 4.0.0-beta.0版本新特性介绍
Feb 10 Javascript
Node.js创建HTTP文件服务器的使用示例
May 11 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 DOMElement 操作xml 文档的实现代码
2013/05/10 PHP
DOM XPATH获取img src值的query
2013/09/23 PHP
php基于socket实现SMTP发送邮件的方法
2015/03/05 PHP
php判断输入是否是纯数字,英文,汉字的方法
2015/03/05 PHP
PHP 5.6.11 访问SQL Server2008R2的几种情况详解
2016/08/08 PHP
基于JQUERY的两个ListBox子项互相调整的实现代码
2011/05/07 Javascript
分页栏的web标准实现
2011/11/01 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
2013/03/19 Javascript
bootstrap改变按钮加载状态
2014/12/01 Javascript
JavaScript中的数组特性介绍
2014/12/30 Javascript
js中使用使用原型(prototype)定义方法的好处详解
2016/07/04 Javascript
JS在浏览器中解析Base64编码图像
2017/02/09 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
2017/04/16 Javascript
three.js加载obj模型的实例代码
2017/11/10 Javascript
Javacript中自定义的map.js  的方法
2017/11/26 Javascript
使用socket.io制做简易WEB聊天室
2018/01/02 Javascript
jQuery 点击获取验证码按钮及倒计时功能
2018/09/20 jQuery
详解js中的几种常用设计模式
2020/07/16 Javascript
js实现简单选项卡制作
2020/08/05 Javascript
JS画布动态实现黑客帝国背景效果
2020/11/08 Javascript
使用Python进行目录的对比方法
2018/11/01 Python
Python基础教程之if判断,while循环,循环嵌套
2019/04/25 Python
在Python中构建增广矩阵的实现方法
2019/07/01 Python
如何基于Python爬取隐秘的角落评论
2020/07/02 Python
HTML里显示pdf、word、xls、ppt的方法示例
2020/04/14 HTML / CSS
MUGLER官方网站:蒂埃里·穆勒香水
2019/11/26 全球购物
书香校园活动方案
2014/02/28 职场文书
法人授权委托书
2014/04/03 职场文书
文化产业实施方案
2014/06/07 职场文书
2014年光棍节活动策划方案(创意集锦)
2014/09/29 职场文书
捐款通知怎么写
2015/04/24 职场文书
道歉信范文
2015/05/12 职场文书
2015年教师党员个人总结
2015/11/24 职场文书
MySQL时间盲注的五种延时方法实现
2021/05/18 MySQL
Django对接elasticsearch实现全文检索的示例代码
2021/08/02 Python
python套接字socket通信
2022/04/01 Python