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)頁面滾動到底自動加載數(shù)據(jù)的功能
- 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)思路及代碼如下，感興趣的朋友可以參考下哈，希望對大家有所幫助2013-07-07
這篇文章主要為大家詳細介紹了jquery實現(xiàn)點擊按鈕顯示與隱藏效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
jQuery中ajax獲取數(shù)據(jù)賦值給頁面的實例
下面小編就為大家分享一篇jQuery中ajax獲取數(shù)據(jù)賦值給頁面的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
jQuery插件zTree實現(xiàn)清空選中第一個節(jié)點所有子節(jié)點的方法
這篇文章主要介紹了jQuery插件zTree實現(xiàn)清空選中第一個節(jié)點所有子節(jié)點的方法,涉及jQuery樹形插件zTree針對節(jié)點的遍歷與移除相關操作技巧,需要的朋友可以參考下2017-03-03
Jquery css函數(shù)用法(判斷標簽是否擁有某屬性)
Jquery css函數(shù)用法(判斷標簽是否擁有某屬性) ，需要的朋友可以參考下。2011-05-05
這篇文章主要介紹了jQuery實現(xiàn)固定在網頁頂部的菜單效果,通過jquery頁面scroll事件及邊距計算實現(xiàn)網頁的菜單固定效果,非常簡單實用,需要的朋友可以參考下2015-09-09
這篇文章主要介紹了JQuery實現(xiàn)的按鈕倒計時效果,涉及jQuery結合時間函數(shù)動態(tài)修改按鈕屬性的相關技巧,需要的朋友可以參考下2015-12-12
正好項目中有個小需求, 要求把表格指定列中內容相同的單元格進行合并,本質上涉及的就是td的rowspan屬性, 數(shù)出含相同內容單元格的個數(shù), 然后給第一個與上一行內容不同的td其rowspan屬性附上正確的值即可, 為了能直觀的理解2011-06-06
本文實例講述了jquery比較簡潔的軟鍵盤特效實現(xiàn)方法。而且?guī)в袛?shù)字與字母切換功能，效果非常不錯，分享給大家供大家參考。2015-08-08
隨著DOM結構的復雜化和Ajax等動態(tài)腳本技術的運用，事件委托自然浮出了水面2011-11-11