jQuery Div中加載其他頁面的實(shí)現(xiàn)代碼
更新時(shí)間:2009年02月27日 20:54:50 作者:
在做一個(gè)表單簽核系統(tǒng)時(shí),需在要簽核頁面中將表單內(nèi)容(事先做好的PHP頁面)顯示出來,于就是想能不能利用Ajax技術(shù)把這個(gè)事先做好的頁面嵌入到簽核頁面中呢?
經(jīng)過一翻嘗試,終于找到了一個(gè)自大比較滿意的解決方法,現(xiàn)寫在自己的博客中與大家分享。
第一步需要在簽核頁面中提供一個(gè)區(qū)域用來顯示表單內(nèi)容,這里使用的是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>") //這個(gè)DIv就是用來顯示表單內(nèi)容的容器
->render();
echo $this->partial("approval/CommentsList.phtml", array("approval_list" => $this->approval_list));
?>
第二步就是編寫一段JavaScript用來獲取表單頁面,使用jQuery
//動(dòng)態(tài)加載頁面
//id 顯示頁面的容器組件ID
//url 欲加載頁面網(wǎng)址
function loadPage(id, url) {
$("#"+id).addClass("loader");
$("#"+id).append("Loading......");
$.ajax({
type: "get",
url: url,
cache: false,
error: function() {alert('加載頁面' + url + '時(shí)出錯(cuò)!');},
success: function(msg) {
$("#"+id).empty().append(msg);
$("#"+id).removeClass("loader");
}
});
}
第一步需要在簽核頁面中提供一個(gè)區(qū)域用來顯示表單內(nèi)容,這里使用的是DIV。
復(fù)制代碼 代碼如下:
<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>") //這個(gè)DIv就是用來顯示表單內(nèi)容的容器
->render();
echo $this->partial("approval/CommentsList.phtml", array("approval_list" => $this->approval_list));
?>
第二步就是編寫一段JavaScript用來獲取表單頁面,使用jQuery
復(fù)制代碼 代碼如下:
//動(dòng)態(tài)加載頁面
//id 顯示頁面的容器組件ID
//url 欲加載頁面網(wǎng)址
function loadPage(id, url) {
$("#"+id).addClass("loader");
$("#"+id).append("Loading......");
$.ajax({
type: "get",
url: url,
cache: false,
error: function() {alert('加載頁面' + url + '時(shí)出錯(cuò)!');},
success: function(msg) {
$("#"+id).empty().append(msg);
$("#"+id).removeClass("loader");
}
});
}
您可能感興趣的文章:
- jQuery+ajax實(shí)現(xiàn)滾動(dòng)到頁面底部自動(dòng)加載圖文列表效果(類似圖片懶加載)
- 基于jquery實(shí)現(xiàn)頁面滾動(dòng)到底自動(dòng)加載數(shù)據(jù)的功能
- jquery實(shí)現(xiàn)在頁面加載的時(shí)自動(dòng)為日期插件添加當(dāng)前日期
- 運(yùn)用JQuery的toggle實(shí)現(xiàn)網(wǎng)頁加載完成自動(dòng)彈窗
- jquery 頁面滾動(dòng)到底部自動(dòng)加載插件集合
- 基于JQuery實(shí)現(xiàn)滾動(dòng)到頁面底端時(shí)自動(dòng)加載更多信息
- jquery 圖片預(yù)加載 自動(dòng)等比例縮放插件
- jquery加載頁面的方法(頁面加載完成就執(zhí)行)
- jQuery頁面加載初始化常用的三種方法
- 用jQuery模擬頁面加載進(jìn)度條的實(shí)現(xiàn)代碼
- Jquery實(shí)現(xiàn)頁面加載時(shí)彈出對(duì)話框代碼
- jQuery實(shí)現(xiàn)的自動(dòng)加載頁面功能示例
相關(guān)文章
jquery簡單的拖動(dòng)效果實(shí)現(xiàn)原理及示例
本文為大家詳細(xì)介紹下jQuery拖曵的簡單實(shí)例,具體的實(shí)現(xiàn)思路及代碼如下,感興趣的朋友可以參考下哈,希望對(duì)大家有所幫助2013-07-07
jquery實(shí)現(xiàn)點(diǎn)擊按鈕顯示與隱藏效果
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)點(diǎn)擊按鈕顯示與隱藏效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04
jQuery中ajax獲取數(shù)據(jù)賦值給頁面的實(shí)例
下面小編就為大家分享一篇jQuery中ajax獲取數(shù)據(jù)賦值給頁面的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2017-12-12
jQuery插件zTree實(shí)現(xiàn)清空選中第一個(gè)節(jié)點(diǎn)所有子節(jié)點(diǎn)的方法
這篇文章主要介紹了jQuery插件zTree實(shí)現(xiàn)清空選中第一個(gè)節(jié)點(diǎn)所有子節(jié)點(diǎn)的方法,涉及jQuery樹形插件zTree針對(duì)節(jié)點(diǎn)的遍歷與移除相關(guān)操作技巧,需要的朋友可以參考下2017-03-03
Jquery css函數(shù)用法(判斷標(biāo)簽是否擁有某屬性)
Jquery css函數(shù)用法(判斷標(biāo)簽是否擁有某屬性) ,需要的朋友可以參考下。2011-05-05
jQuery實(shí)現(xiàn)固定在網(wǎng)頁頂部的菜單效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)固定在網(wǎng)頁頂部的菜單效果,通過jquery頁面scroll事件及邊距計(jì)算實(shí)現(xiàn)網(wǎng)頁的菜單固定效果,非常簡單實(shí)用,需要的朋友可以參考下2015-09-09
JQuery實(shí)現(xiàn)的按鈕倒計(jì)時(shí)效果
這篇文章主要介紹了JQuery實(shí)現(xiàn)的按鈕倒計(jì)時(shí)效果,涉及jQuery結(jié)合時(shí)間函數(shù)動(dòng)態(tài)修改按鈕屬性的相關(guān)技巧,需要的朋友可以參考下2015-12-12

