jQuery Div中加載其他頁面的實現(xiàn)代碼
更新時間：2009年02月27日 20:54:50 作者：
在做一個表單簽核系統(tǒng)時，需在要簽核頁面中將表單內容（事先做好的PHP頁面）顯示出來，于就是想能不能利用Ajax技術把這個事先做好的頁面嵌入到簽核頁面中呢？
經過一翻嘗試，終于找到了一個自大比較滿意的解決方法，現(xiàn)寫在自己的博客中與大家分享。
第一步需要在簽核頁面中提供一個區(qū)域用來顯示表單內容，這里使用的是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
//動態(tài)加載頁面
//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");
}
});
}
第一步需要在簽核頁面中提供一個區(qū)域用來顯示表單內容，這里使用的是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
復制代碼 代碼如下:
//動態(tài)加載頁面
//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");
}
});
}
您可能感興趣的文章:
- jQuery+ajax實現(xiàn)滾動到頁面底部自動加載圖文列表效果(類似圖片懶加載)
- 基于jquery實現(xiàn)頁面滾動到底自動加載數據的功能
- jquery實現(xiàn)在頁面加載的時自動為日期插件添加當前日期
- 運用JQuery的toggle實現(xiàn)網頁加載完成自動彈窗
- jquery 頁面滾動到底部自動加載插件集合
- 基于JQuery實現(xiàn)滾動到頁面底端時自動加載更多信息
- jquery 圖片預加載 自動等比例縮放插件
- jquery加載頁面的方法(頁面加載完成就執(zhí)行)
- jQuery頁面加載初始化常用的三種方法
- 用jQuery模擬頁面加載進度條的實現(xiàn)代碼
- Jquery實現(xiàn)頁面加載時彈出對話框代碼
- jQuery實現(xiàn)的自動加載頁面功能示例
相關文章
本文通過一段實例代碼給大家介紹jquery實現(xiàn)下拉加載功能，代碼簡單易懂，需要的朋友參考下吧2016-04-04
這篇文章主要介紹了jquery+ajax實現(xiàn)注冊實時驗證的方法,結合實例形式較為詳細的分析了jQuery基于ajax請求實現(xiàn)注冊時無刷新驗證的相關技巧,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了jQuery通用的全局遍歷方法$.each()用法,結合實例形式分析了$.each()方法實現(xiàn)遍歷功能的相關技巧,需要的朋友可以參考下2016-07-07
這篇文章主要以實例的方式詳細介紹了jQuery結合GridView控件的使用方法，感興趣的小伙伴們可以參考一下2016-01-01
setInterval,setTimeout與jquery混用的問題
當遇到setInterval,setTimeout與jquery混用的問題 時，直接按JavaScript中的語法寫并不起作用，有以下兩種解決方法2013-04-04
昨天做一個Jqery效果，要獲取相應元素的索引值，暈，又忘記了?，F(xiàn)在記錄下來，以后再次忘記好查怎么獲取相應元素的索引值2012-10-10
這篇文章主要介紹了jQuery手機撥號界面特效，整體特效非常逼真自然，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
這篇文章主要介紹了jquery如何獲取元素的滾動條高度等實現(xiàn)代碼,需要的朋友可以參考下2015-10-10
全屏自適應jquery焦點圖切換特效,在IE6這個瀏覽器兼容性問題上得到了和諧,兼容IE6,適用瀏覽器：IE6、IE7、IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.相關代碼2013-08-08
ligerGrid是ligerui系列插件的核心控件，用戶可以快速地創(chuàng)建一個美觀,而且功能強大的表格,支持排序、分頁、多表頭、固定列等等2012-01-01