發新話題
打印

讓Ajax可以正常支援上下頁

讓Ajax可以正常支援上下頁

應該有很多人都有發現到Ajax的這個缺陷吧?
仔細觀察Gmail卻發現Gmail可以支援,這到底是怎回事呢?
我在想應該是#搞的?
我有一點想法,可是都沒機會實作,先在這邊分享給大家我的想法:

我們可以先用一個script去抓取這個頁面的anchor,然後可以傳給相對應的div id,再啟動loading的部分達到這個效果?
可是按下回到上一頁時,真的可以這麼順嗎... 囧?
Think Different
[code]
[73, 32, 108, 111, 118, 101, 32, 121, 111, 117, 32, 115, 111, 32, 109, 117, 99, 104, 33].map{|c| c.chr}.join
[/code]

TOP


ccc~ 之前有看到很多AJAX的書&網站有寫這類的解法,不過都不好解就是了
大概就是回傳假的上下頁,不然就是內定function捕捉上下頁,然後判讀有的沒的|||

如果有AJAX view 1 , 2 , 3,都是網頁a
使用者在網頁a:2,按上頁時,a判定為執行了"上一頁"的動作,所以就用Ajax動態載入為a:1,相同的如果有下一頁也一樣(a:3)

JavaScript Framework有function可以製作出上一頁&下一頁的假象,也就是按下上一頁其實是沒跳頁的,而下一頁顯示時也能按,而執行Action後也可以模擬出轉跳到新頁的假象,不過這可能link_to_remote做不出來的樣子(未測),因為要另外call back & 定位的:)

有些網頁不是一定要連續按好幾個上一頁才會跳回真正的上一頁??,就是這個意思哩:)

最近來找找有沒有Rails用的這類的範例好了,這邊好用點的關鍵字會是"Ajax , Back Button",高興的話可以把ajax換成jquery or prototype,剛才找了一下,貌似都有該Framework的plug-in可以用哩:P

or 在這篇所查到的
ReallySimpleHistory
==w==" 有點愉快的感覺||||

[發覺現在要每篇都貼個圖......不然都是文字怪無聊的]

後記:wow,有看到這篇:"History Buttons with AJAX and Ruby on Rails",不知道是不是你想要的X"D
把History提出來的好處莫過於Rails & JRails都可以用啊!! :P
(Plurk) 人因夢想而偉大,如果沒有信仰,則將一無所有,持續往殉道的路邁進,獻祭著自己的靈魂,走著最極端的路;而那迷霧的後面,會是地獄,也是天堂
self.attributes #=> [惡搞之魂,貓化身,怪咖吸鐵石,邪道程式設計師,動漫宅,蘿莉控,惡趣味,Geek,H=F^3]
[82,117,98,121,32,79,110,32,82,97,105,108,115,32,105,115,32,77,121,32,76,105,102,101].map{|l|l.chr}.to_s

TOP

去年六月的時候我在 ptt 的 ruby 版討論過這個問題..
現在原文照貼..

有很多 js library 可以做這件事:
老牌的 reallysimplehistory http://code.google.com/p/reallysimplehistory/
用 jQuery 的人可以用 http://stilbuero.de/jquery/history/
YUI 等大型的 js library 應該都有 history management 之類的 lib 可用

大概講一下它的原理好了:
firefox 裡 ,在 ajax success 後,用 Javascript 幫網址加上 anchor
(因為安全性考量,只能加 anchor ,不能改變其它的部份)。
這樣 browser 會覺得它是新的位置,自動把它記到 history list 裡
所以上一頁下一頁就可以用了

ie 的話,就很笨,不會記...不過還好有個 hack 可以用,就是 iframe
按下上一頁下一頁的鈕的時候, iframe 的也會跟著上一頁下一頁的動
就利用這點,可以用 javascript 把 history 的資訊記到 iframe 裡面

詳細的話有很多麻煩事要解決..比如說離開這個站又回來的話.. history 會不見之類的
safari 還有 opera 也各有各的麻煩事
所以就自己看 code 吧!

TOP

多謝兩位了
難怪我在jquery.history中有看到針對msie的作法是iframe...
真神奇=.="
Think Different
[code]
[73, 32, 108, 111, 118, 101, 32, 121, 111, 117, 32, 115, 111, 32, 109, 117, 99, 104, 33].map{|c| c.chr}.join
[/code]

TOP

發新話題