作者tomin (stuffy)
看板Ajax
標題Re: [ajax] jQuery有可以即時編輯、新增、刪除的pl …
時間Sat Sep 19 22:38:25 2009
※ 引述《andreli (小狗跟正妹是我的死穴)》之銘言：
: 因為小弟我對JavaScript實在沒有很熟,
: 搞來搞去只能使用偽裝的Ajax來處理被刪除的資料,
: <div id="my_show">
: 內容
: </div>
: 刪除我就只能利用onClick的事件把display變成none, 然後再使用jQuery到php檔案裡
: 刪除資料。
: 新增則是用append的方式加在原來內容後面...自己假裝是Ajax...
: 實際上最後一筆的資料並不是從資料庫裡讀出來的...
: 但是好像有些問題會導致IE出現無法判定字串常數的結尾這類的錯誤訊息,
: 我想應該是我沒把回傳的資料用xml或json整理好的原因。
: 所以我想我還是不能這樣繼續偽裝我的Ajax...
你原本的辦法很好啊，本來就該這樣做吧，雖然我不知道IE是怎麼回事。
理想中，應該都是先完成使用者的動作，呈現結果，再偷偷更新後端的資料。
不過也要看情況，有時候必須讓使用者等待一下，有calltback後再呈現結果。
使用者送出資料前，系統應該檢查資料送到後端不會有問題，才讓資料送出，
也才讓結果呈現。萬一不幸後端出現錯誤，或許要考慮出現警告，或還原先前的狀況。
: 離題了, 所以今天早上上網Google後發現了jeditable這個jQuery的套件,
: 差了即時新增和刪除這兩個功能就超完美了,
: 不知道有沒有先進使用過這樣的套件,
: 可以讓我想顯示資料庫的資料和新增刪除編輯都沒有postback的感覺。
: 因為真的找不到資料所以只好上來求救大家, 拜託了, 謝謝!
: 或是如果沒有這樣的套件,
: 可以跟我說一下使用jQuery如何在新增或刪除後reload的方法嗎?
: 因為我不知道如何在一個div裡reload原先show出來的data。
我看不太懂問題。
如果你知道怎麼用ajax load data，新增、刪除後的load法還是一樣啊，
呼叫原本的load data方法，不就load進來了？！
那我示範如何在一個div裡，reload flickr最新的相片！
改編自jQuery文件與一個許久前在網路上搜尋到的code。
Demo:
http://noking.googlepages.com/flickr.html
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<script type="text/javascript"
src="
http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<title>JSON Flickr Feed Test</title>
</head>
<body style="margin:2px">
<div id="refresh" style="margin-bottom:4px">
<input type="button" value="Refresh Photos">
</div>
<!-- 要讓images這個div reload照片!-->
<div id="images"></div>
<script type="text/javascript">
function flickrFeed() {
$.getJSON("
http://www.flickr.com/services/feeds/
photos_public.gne?format=json&jsoncallback=?",
function(json){
$("#images").html("");//reset
$.each(json.items, function(i,item){
var images=
[
'<span style="margin:4px;">',
'<a href="', item.link, '" title="', item.title, '">',
'<img src="', item.media.m, '" border="0" />',
'</a>',
'</span>'
].join('');
$(images).appendTo("#images");
if ( i == 7 ) return false;
});
});
}
//綁定click，讓（第二次以後的）資料能夠reload於div images
$("#refresh").bind("click",flickrFeed);
flickrFeed();//load第一次資料
</script>
</body>
</html>
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 122.116.40.183
※ 編輯: tomin 來自: 122.116.40.183 (09/19 22:47)