Hi, I have an ajax auto completer for a text field in a form. All''s good. Unfortunately, I also want the form to be submitted when the user hits ''return'' in the text field. This combination of circumstances means that if the user is typing his entry and then hits return to submit it is possible that dang auto completer will pop up and complete his entry for even if he doesn''t want it completed. How can I make the auto completer automatically show, but not have any element selected (and therefore do no autocompletion) until the user presses the down key or clicks on an item? This is like the completion in the URL bar of your web browser. Thanks, Scott
On Thursday 29 June 2006 01:06, Scott Fortmann-Roe wrote:> Hi, > > I have an ajax auto completer for a text field in a form. All''s good. > > Unfortunately, I also want the form to be submitted when the user hits > ''return'' in the text field. > > This combination of circumstances means that if the user is typing his > entry and then hits return to submit it is possible that dang auto > completer will pop up and complete his entry for even if he doesn''t > want it completed.I had this issue myself, and unfortunately couldn''t find an exact solution to it. I was able to make the autocompleter come up without a selection, but if the mouse pointer was hovering over where the autocompleter box was supposed to be, it triggered the mouseover event and selected the item. If anyone has a solution for that, I''d love to hear it :)) -Jeremy -- Jeremy Kitchen ++ kitchen-RA8HwDor7flnDGu+y90WmgC/G2K4zDHf@public.gmane.org http://www.pirate-party.us/ -- defend your rights _______________________________________________ Rails-spinoffs mailing list Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
How do you make the autocompleter come up without a suggestion? The mouse thing is also important, but that''s half the battle. Thanks, Scott On 7/6/06, Jeremy Kitchen <kitchen-RA8HwDor7flnDGu+y90WmgC/G2K4zDHf@public.gmane.org> wrote:> On Thursday 29 June 2006 01:06, Scott Fortmann-Roe wrote: > > Hi, > > > > I have an ajax auto completer for a text field in a form. All''s good. > > > > Unfortunately, I also want the form to be submitted when the user hits > > ''return'' in the text field. > > > > This combination of circumstances means that if the user is typing his > > entry and then hits return to submit it is possible that dang auto > > completer will pop up and complete his entry for even if he doesn''t > > want it completed. > > I had this issue myself, and unfortunately couldn''t find an exact solution to > it. I was able to make the autocompleter come up without a selection, but if > the mouse pointer was hovering over where the autocompleter box was supposed > to be, it triggered the mouseover event and selected the item. If anyone has > a solution for that, I''d love to hear it :)) > > -Jeremy > > -- > Jeremy Kitchen ++ kitchen-RA8HwDor7flnDGu+y90WmgC/G2K4zDHf@public.gmane.org > > http://www.pirate-party.us/ -- defend your rights > > > _______________________________________________ > Rails-spinoffs mailing list > Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs > > > >-- Easily help charity when you shop: www.GiveTeam.org I''m a member of the Give Team, are you?
Sergio Marques
2006-Jul-07 11:39 UTC
Ajax Bookmarks & Browser Navigation (Back Button Issue)
Hi, I''ve been reading a lot of articles about the back button and bookmark issue for Ajax Web Applications, but i would like to know some more opinions about that question. I know that exists some libraries that try to solve this problem, but i''m not convinced. - will the future web browsers have support for that kind of navigation (ajax calls)? - is it correct to fix the back button when trying to reload the whole page, or the best solution is to make ajax calls only for elements in the page and not for the page itself? - is there any solutions viable for you right now to fix the back button (if so what libraries)? Thanks in advance for the help, Sérgio
Maninder, Singh
2006-Jul-07 11:58 UTC
RE: Ajax Bookmarks & Browser Navigation (Back ButtonIssue)
http://www.contentwithstyle.co.uk/Articles/38/ http://dev2dev.bea.com/pub/a/2006/01/ajax-back-button.html http://www.onjava.com/pub/a/onjava/2005/10/26/ajax-handling-bookmarks-and-back-button.html Enjoy! -Mandy. _______________________________________________ Rails-spinoffs mailing list Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
devel - Fashion Content
2006-Jul-07 12:42 UTC
Re: Ajax Bookmarks & Browser Navigation (Back ButtonIssue)
Imo it''s just one of the things you have to design for when you plan your web app. Let''s say you have a page that shows a sorted table of information. Using Ajax you allow the user to change the sort order, and filter the view to only a certain match. Back button: Personally I wouldn''t expect anyone to want to use the back button to change back the filter/sort order, but I believe there is a listener for handling back button interaction. Linking/Favourites: You could show the page with a unique URL, and have the script tell the server whenever the sort/filter is changed. That way the user will return to the same preferences in the future. Alternately you could have a permalink kept up to date, and have the user use that rather than the current page. I don''t really see either as great challenges. Just something to implement. Henrik ----- Original Message ----- From: "Sergio Marques" <sergio.marques-2VnAkdGPfh6bmANx6dU759BPR1lH4CV8@public.gmane.org> To: <rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org> Sent: Friday, July 07, 2006 12:39 PM Subject: [Rails-spinoffs] Ajax Bookmarks & Browser Navigation (Back ButtonIssue) Hi, I''ve been reading a lot of articles about the back button and bookmark issue for Ajax Web Applications, but i would like to know some more opinions about that question. I know that exists some libraries that try to solve this problem, but i''m not convinced. - will the future web browsers have support for that kind of navigation (ajax calls)? - is it correct to fix the back button when trying to reload the whole page, or the best solution is to make ajax calls only for elements in the page and not for the page itself? - is there any solutions viable for you right now to fix the back button (if so what libraries)? Thanks in advance for the help, Sérgio _______________________________________________ Rails-spinoffs mailing list Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
2 things to try... 1) You could try using the document.onkeydown event to capture all enter keystrokes and submit the form before the autocompleter calls updateElement. 2) Try providing an updateElement function to the autocompleter which checks if the keystroke was an enter and either submits or completes. Because the event is not tossed into function i''m not sure how to go about capturing the event in some browsers but window.event.keyCode works IE I believe ( Is IE actually better in this respect ? ). I''m sure firefox has a way.> > Hi, > > > > I have an ajax auto completer for a text field in a form. All''sgood.> > > > Unfortunately, I also want the form to be submitted when the user > > hits ''return'' in the text field. > > > > This combination of circumstances means that if the user is typing > > his entry and then hits return to submit it is possible that dang > > auto completer will pop up and complete his entry for even if he > > doesn''t want it completed. > > I had this issue myself, and unfortunately couldn''t find an exact > solution to it. I was able to make the autocompleter come up without > a selection, but if the mouse pointer was hovering over where the > autocompleter box was supposed to be, it triggered the mouseover event> and selected the item. If anyone has a solution for that, I''d love to> hear it :)) > > -Jeremy > > -- > Jeremy Kitchen ++ kitchen-RA8HwDor7flnDGu+y90WmgC/G2K4zDHf@public.gmane.org > > http://www.pirate-party.us/ -- defend your rights > > > _______________________________________________ > Rails-spinoffs mailing list > Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs > > > >
Ryan Gahl
2006-Jul-07 14:13 UTC
Re: Ajax Bookmarks & Browser Navigation (Back ButtonIssue)
This really depends on the context of your usage of Ajax. Where each page is potentially it''s own mini application (RIA), I personally would not expect the back button to act as an undo for the operations done within that application (for that it would probably be best to create your own "undo/redo" control). I always expect the back button to go to the previous page in my browser''s history, which means the last mini application (page within your site) I was on, or the last site I came from. For instance, compare maps.google.com with maps.yahoo.com (the NEW yahoo maps, not the default old one you get). Google gets it right, I can move the map around all I want and when I hit the back button I go back to the page I was on last. Yahoo, however, is very frustrating because every time you move the map or change the zoom level it inserts an entry into the history. So now if I want to navigate back to where I came from I must hit back several (potentially many many) times. That is not what the back button is there for. IMHO, if you want undo/redo functionality in your RIA, make it yourself and separate it from the browser''s conventional history functionality. This is where all those frameworks should have spent their time: making undo/redo libraries rather than breaking the back button all over the place. On 7/7/06, devel - Fashion Content <devel-97RT7vlPcsBqTE8NIM3Zb9BPR1lH4CV8@public.gmane.org> wrote:> > Imo it''s just one of the things you have to design for when you plan your > web app. > > Let''s say you have a page that shows a sorted table of information. Using > Ajax you allow the user to change the sort order, and filter the view to > only a certain match. > > Back button: Personally I wouldn''t expect anyone to want to use the back > button to change back the filter/sort order, but I believe there is a > listener for handling back button interaction. > > Linking/Favourites: You could show the page with a unique URL, and have > the > script tell the server whenever the sort/filter is changed. That way the > user will return to the same preferences in the future. Alternately you > could have a permalink kept up to date, and have the user use that rather > than the current page. > > I don''t really see either as great challenges. Just something to > implement. > > Henrik > > ----- Original Message ----- > From: "Sergio Marques" <sergio.marques-2VnAkdGPfh6bmANx6dU759BPR1lH4CV8@public.gmane.org> > To: <rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org> > Sent: Friday, July 07, 2006 12:39 PM > Subject: [Rails-spinoffs] Ajax Bookmarks & Browser Navigation (Back > ButtonIssue) > > > Hi, > > I''ve been reading a lot of articles about the back button and bookmark > issue for Ajax Web Applications, but i would like to know some more > opinions about that question. I know that exists some libraries that try > to solve this problem, but i''m not convinced. > > - will the future web browsers have support for that kind of navigation > (ajax calls)? > > - is it correct to fix the back button when trying to reload the whole > page, or the best solution is to make ajax calls only for elements in > the page and not for the page itself? > > - is there any solutions viable for you right now to fix the back button > (if so what libraries)? > > Thanks in advance for the help, > > Sérgio > > _______________________________________________ > Rails-spinoffs mailing list > Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs > > > _______________________________________________ > Rails-spinoffs mailing list > Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs >_______________________________________________ Rails-spinoffs mailing list Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
Siegfried Puchbauer
2006-Jul-07 14:25 UTC
Re: Ajax Bookmarks & Browser Navigation (Back ButtonIssue)
Hey guys, Some time ago I investigated some time on this topic and implemented a small solution based on prototype. It''s tested in Firefox and IE6 (IMHO there is no working solution for Safari). Here is the mail I allready send to the list: In one of my previous projects I had to satisfy the requirement of handling> browser back- and forward calls within an Ajax application. Thus I didn''t > get an urge to switch the JS part of this project to an other framework like > dojo (which supports Browser history handling out-of-the-box), I had to come > up with an idea of doing this with prototype/scriptaculous. > > The arisen source code: > > Ajax.History = { > initialize: function(options) { > this.options = Object.extend({ > interval: 200 > },options||{}); > this.callback = this.options.callback || Prototype.emtpyFunction; > if(navigator.userAgent.toLowerCase ().indexOf(''msie'') > 0) > this.locator = new Ajax.History.Iframe(''ajaxHistoryHandler'', > this.options.iframeSrc); > else > this.locator = new Ajax.History.Hash(); > this.currentHash = ''''; > this.locked = false; > > }, > add: function(hash) { > this.locked = true; > clearTimeout(this.timer); > this.currentHash = hash; > this.locator.setHash(hash); > this.timer = setTimeout(this.checkHash.bind(this), > this.options.interval); > this.locked = false; > }, > checkHash: function(){ > if(!locked){ > var check = this.locator.getHash(); > > if(check != this.currentHash){ > this.callback(check); > this.currentHash = check; > } > } > this.timer = setTimeout(this.checkHash.bind(this), > this.options.interval); > }, > getBookmark: function(){ > return this.locator.getBookmark(); > } > } > // Hash Handler for IE (Tested with IE6) > Ajax.History.Iframe = Class.create(); > Ajax.History.Iframe.prototype = { > initialize: function(id, src) { > this.url = ''''; > this.id = id || ''ajaxHistoryHandler''; > this.src = src || ''''; > document.write(''<iframe src="''+this.src+''" id="''+this.id+''" > name="''+this.id+''" style="display: none;" ></iframe>''); > }, > setHash: function(hash){ > try { > $( this.id).setAttribute(''src'', this.src + ''?'' + hash); > }catch(e) {} > window.location.href = this.url + ''#'' + hash; > }, > getHash: function(){ > try { > return (document.frames[this.id > ].location.href||''?'').split(''?'')[1]; > }catch(e){ return ''''; } > }, > getBookmark: function(){ > try{ > return window.location.href.split(''#'')[1]||''''; > }catch(e){ return ''''; } > } > } > // Hash Handler for a modern browser (tested with firefox 1.5) > Ajax.History.Hash = Class.create(); > Ajax.History.Hash.prototype = { > initialize: function(){ > > }, > setHash: function(hash){ > window.location.hash = hash; > }, > getHash: function(){ > return window.location.hash.substring(1)||''''; > }, > getBookmark: function(){ > try{ > return window.location.hash.substring(1)||''''; > }catch(e){ return ''''; } > } > } > > > Sample Usage: > > first you have to define a callback method for the history handler which > replays a previous ajax request: > > var historyUpdate = function(hash) { > new Ajax.Request( > .... > } > > in the onSuccess/onComplete of a Ajax.Request or Ajax.Updater (etc) you > have to add an history point: > > var handleSuccess = function(request){ > //... update DOM or smth like that > Ajax.History.add(request.options.parameters) > //... > } > (might also be done an Ajax.Responder or something like that) > > and in the foot of your html page you have to insert smth like: > > <script type="text/javascript"> > // <![CDATA[ > var historyHandler = Ajax.History.initialize({ > callback: historyUpdate, > iframeSrc: '' http://url.of.an/empty/page.html'' > }); > // ]]> > </script> > > > > Explanation: > The Ajax.History object periodically (defined by the option intervall) > checks the hash object for a change. There are currently 2 implementations > for this hash object. iframe based for IE and window.location.hash based > for firefox/mozilla. When the hash changes the callback function gets called > with the changed hash as arguement. History entries are added with > Ajax.History.add(''a_new_hash''). > > This is a very simple implementation of history support and needs to be > radically extended to be usefull ;) >_______________________________________________ Rails-spinoffs mailing list Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
Ryan Gahl
2006-Jul-07 14:40 UTC
Re: Ajax Bookmarks & Browser Navigation (Back ButtonIssue)
Exactly the kind of thing I don''t think is necessary or even good. You should port that idea over to a user control that acts as an undo/redo control, and does not mess around with the history hash. Not knocking your work, it''s good code (except maybe for the document.write stuff -- use Builder instead)... but for a community that is so centered on standards and not breaking known conventions, I really don''t understand this mentality of breaking the back button to try to use it as an undo control for a rich internet application. If your page is using Ajax and has thus become an application in domain of the DOM, treat it as an application and add the necessary application level controls (including undo/redo) and stop hijacking the browser. When I see a link on a news site for the latest and greatest Ajax site and I go to it to check it out, and I do a few things in it and then I''m done and I want to go back to that news site, I darn well expect to hit the back button ONCE (one time, uno, 1) to get there. I don''t want to see every little operation I performed in that app undo itself before I can get back to the news site. On 7/7/06, Siegfried Puchbauer <siegfried.puchbauer-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> > Hey guys, > > Some time ago I investigated some time on this topic and implemented a > small solution based on prototype. It''s tested in Firefox and IE6 (IMHO > there is no working solution for Safari). > > Here is the mail I allready send to the list: > > In one of my previous projects I had to satisfy the requirement of > > handling browser back- and forward calls within an Ajax application. Thus I > > didn''t get an urge to switch the JS part of this project to an other > > framework like dojo (which supports Browser history handling > > out-of-the-box), I had to come up with an idea of doing this with > > prototype/scriptaculous. > > > > The arisen source code: > > > > Ajax.History = { > > initialize: function(options) { > > this.options = Object.extend({ > > interval: 200 > > },options||{}); > > this.callback = this.options.callback || Prototype.emtpyFunction > > ; > > if(navigator.userAgent.toLowerCase ().indexOf(''msie'') > 0) > > this.locator = new Ajax.History.Iframe(''ajaxHistoryHandler'', > > this.options.iframeSrc); > > else > > this.locator = new Ajax.History.Hash(); > > this.currentHash = ''''; > > this.locked = false; > > > > }, > > add: function(hash) { > > this.locked = true; > > clearTimeout(this.timer); > > this.currentHash = hash; > > this.locator.setHash(hash); > > this.timer = setTimeout(this.checkHash.bind(this), > > this.options.interval); > > this.locked = false; > > }, > > checkHash: function(){ > > if(!locked){ > > var check = this.locator.getHash(); > > > > if(check != this.currentHash){ > > this.callback(check); > > this.currentHash = check; > > } > > } > > this.timer = setTimeout(this.checkHash.bind(this), > > this.options.interval); > > }, > > getBookmark: function(){ > > return this.locator.getBookmark(); > > } > > } > > // Hash Handler for IE (Tested with IE6) > > Ajax.History.Iframe = Class.create(); > > Ajax.History.Iframe.prototype = { > > initialize: function(id, src) { > > this.url = ''''; > > this.id = id || ''ajaxHistoryHandler''; > > this.src = src || ''''; > > document.write(''<iframe src="''+this.src+''" id="''+this.id+''" > > name="''+this.id+''" style="display: none;" ></iframe>''); > > }, > > setHash: function(hash){ > > try { > > $( this.id).setAttribute(''src'', this.src + ''?'' + hash); > > }catch(e) {} > > window.location.href = this.url + ''#'' + hash; > > }, > > getHash: function(){ > > try { > > return (document.frames[this.id > > ].location.href||''?'').split(''?'')[1]; > > }catch(e){ return ''''; } > > }, > > getBookmark: function(){ > > try{ > > return window.location.href.split(''#'')[1]||''''; > > }catch(e){ return ''''; } > > } > > } > > // Hash Handler for a modern browser (tested with firefox 1.5) > > Ajax.History.Hash = Class.create(); > > Ajax.History.Hash.prototype = { > > initialize: function(){ > > > > }, > > setHash: function(hash){ > > window.location.hash = hash; > > }, > > getHash: function(){ > > return window.location.hash.substring(1)||''''; > > }, > > getBookmark: function(){ > > try{ > > return window.location.hash.substring(1)||''''; > > }catch(e){ return ''''; } > > } > > } > > > > > > Sample Usage: > > > > first you have to define a callback method for the history handler which > > replays a previous ajax request: > > > > var historyUpdate = function(hash) { > > new Ajax.Request( > > .... > > } > > > > in the onSuccess/onComplete of a Ajax.Request or Ajax.Updater (etc) you > > have to add an history point: > > > > var handleSuccess = function(request){ > > //... update DOM or smth like that > > Ajax.History.add(request.options.parameters) > > //... > > } > > (might also be done an Ajax.Responder or something like that) > > > > and in the foot of your html page you have to insert smth like: > > > > <script type="text/javascript"> > > // <![CDATA[ > > var historyHandler = Ajax.History.initialize({ > > callback: historyUpdate, > > iframeSrc: '' http://url.of.an/empty/page.html'' > > }); > > // ]]> > > </script> > > > > > > > > Explanation: > > The Ajax.History object periodically (defined by the option intervall) > > checks the hash object for a change. There are currently 2 implementations > > for this hash object. iframe based for IE and window.location.hash based > > for firefox/mozilla. When the hash changes the callback function gets called > > with the changed hash as arguement. History entries are added with > > Ajax.History.add(''a_new_hash''). > > > > This is a very simple implementation of history support and needs to be > > radically extended to be usefull ;) > > > > > > _______________________________________________ > Rails-spinoffs mailing list > Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs > > >_______________________________________________ Rails-spinoffs mailing list Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
Siegfried Puchbauer
2006-Jul-07 15:14 UTC
Re: Ajax Bookmarks & Browser Navigation (Back ButtonIssue)
The application this code was written for is a little object browser with the ability to search, browse and view objects. It was a requirement of the customer not to break the functionality of the back- and forward button when you eg. move into a directory. AJAX was chosen for this application because it provided significant performance benefits (Loading the content of a folder is about 4 times faster when using an ajax request instead of loading the whole page). I used the document.write stuff because I read a lot of problems in IE when inserting iframes as DOM elements. Most history-supporting frameworks use this approach btw. I totally agree with you to not use smth like that to get an undo/redo behavior, but for content navigation this might be useful. On 7/7/06, Ryan Gahl <ryan.gahl-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> > Exactly the kind of thing I don''t think is necessary or even good. You > should port that idea over to a user control that acts as an undo/redo > control, and does not mess around with the history hash. Not knocking your > work, it''s good code (except maybe for the document.write stuff -- use > Builder instead)... but for a community that is so centered on standards and > not breaking known conventions, I really don''t understand this mentality of > breaking the back button to try to use it as an undo control for a rich > internet application. If your page is using Ajax and has thus become an > application in domain of the DOM, treat it as an application and add the > necessary application level controls (including undo/redo) and stop > hijacking the browser. When I see a link on a news site for the latest and > greatest Ajax site and I go to it to check it out, and I do a few things in > it and then I''m done and I want to go back to that news site, I darn well > expect to hit the back button ONCE (one time, uno, 1) to get there. I don''t > want to see every little operation I performed in that app undo itself > before I can get back to the news site. > > On 7/7/06, Siegfried Puchbauer <siegfried.puchbauer-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > > Hey guys, > > Some time ago I investigated some time on this topic and implemented a > small solution based on prototype. It''s tested in Firefox and IE6 (IMHO > there is no working solution for Safari). > > Here is the mail I allready send to the list: > > In one of my previous projects I had to satisfy the requirement of > > handling browser back- and forward calls within an Ajax application. Thus I > > didn''t get an urge to switch the JS part of this project to an other > > framework like dojo (which supports Browser history handling > > out-of-the-box), I had to come up with an idea of doing this with > > prototype/scriptaculous. > > > > The arisen source code: > > > > Ajax.History = { > > initialize: function(options) { > > this.options = Object.extend({ > > interval: 200 > > },options||{}); > > this.callback = this.options.callback || Prototype.emtpyFunction > > ; > > if(navigator.userAgent.toLowerCase ().indexOf(''msie'') > 0) > > this.locator = new Ajax.History.Iframe(''ajaxHistoryHandler'', > > this.options.iframeSrc); > > else > > this.locator = new Ajax.History.Hash(); > > this.currentHash = ''''; > > this.locked = false; > > > > }, > > add: function(hash) { > > this.locked = true; > > clearTimeout(this.timer); > > this.currentHash = hash; > > this.locator.setHash(hash); > > this.timer = setTimeout(this.checkHash.bind(this), > > this.options.interval); > > this.locked = false; > > }, > > checkHash: function(){ > > if(!locked){ > > var check = this.locator.getHash(); > > > > if(check != this.currentHash){ > > this.callback(check); > > this.currentHash = check; > > } > > } > > this.timer = setTimeout(this.checkHash.bind(this), > > this.options.interval); > > }, > > getBookmark: function(){ > > return this.locator.getBookmark(); > > } > > } > > // Hash Handler for IE (Tested with IE6) > > Ajax.History.Iframe = Class.create(); > > Ajax.History.Iframe.prototype = { > > initialize: function(id, src) { > > this.url = ''''; > > this.id = id || ''ajaxHistoryHandler''; > > this.src = src || ''''; > > document.write(''<iframe src="''+this.src+''" id="''+this.id+''" > > name="''+this.id+''" style="display: none;" ></iframe>''); > > }, > > setHash: function(hash){ > > try { > > $( this.id).setAttribute(''src'', this.src + ''?'' + hash); > > }catch(e) {} > > window.location.href = this.url + ''#'' + hash; > > }, > > getHash: function(){ > > try { > > return (document.frames[this.id > > ].location.href||''?'').split(''?'')[1]; > > }catch(e){ return ''''; } > > }, > > getBookmark: function(){ > > try{ > > return window.location.href.split(''#'')[1]||''''; > > }catch(e){ return ''''; } > > } > > } > > // Hash Handler for a modern browser (tested with firefox 1.5) > > Ajax.History.Hash = Class.create(); > > Ajax.History.Hash.prototype = { > > initialize: function(){ > > > > }, > > setHash: function(hash){ > > window.location.hash = hash; > > }, > > getHash: function(){ > > return window.location.hash.substring(1)||''''; > > }, > > getBookmark: function(){ > > try{ > > return window.location.hash.substring(1)||''''; > > }catch(e){ return ''''; } > > } > > } > > > > > > Sample Usage: > > > > first you have to define a callback method for the history handler which > > replays a previous ajax request: > > > > var historyUpdate = function(hash) { > > new Ajax.Request( > > .... > > } > > > > in the onSuccess/onComplete of a Ajax.Request or Ajax.Updater (etc) you > > have to add an history point: > > > > var handleSuccess = function(request){ > > //... update DOM or smth like that > > Ajax.History.add(request.options.parameters) > > //... > > } > > (might also be done an Ajax.Responder or something like that) > > > > and in the foot of your html page you have to insert smth like: > > > > <script type="text/javascript"> > > // <![CDATA[ > > var historyHandler = Ajax.History.initialize({ > > callback: historyUpdate, > > iframeSrc: '' http://url.of.an/empty/page.html'' > > }); > > // ]]> > > </script> > > > > > > > > Explanation: > > The Ajax.History object periodically (defined by the option intervall) > > checks the hash object for a change. There are currently 2 implementations > > for this hash object. iframe based for IE and window.location.hash based > > for firefox/mozilla. When the hash changes the callback function gets called > > with the changed hash as arguement. History entries are added with > > Ajax.History.add(''a_new_hash''). > > > > This is a very simple implementation of history support and needs to be > > radically extended to be usefull ;) > > > > > > _______________________________________________ > Rails-spinoffs mailing list > Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs > > > > > _______________________________________________ > Rails-spinoffs mailing list > Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs > > >-- Mit freundlichen Grüßen Siegfried Puchbauer _______________________________________________ Rails-spinoffs mailing list Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
Ryan Gahl
2006-Jul-07 15:20 UTC
Re: Ajax Bookmarks & Browser Navigation (Back ButtonIssue)
Oh yea, don''t get me wrong. Requirements are requirements, and I''m sure there are plenty of valid use cases, and your code is good. I''m just off on another of my rants :-) I guess I should have qualified my comments with "when talking about public facing sites/applications where standards and conventions reign supreme" For internal or controlled environment/user base type applications, all that talk goes right out the window. Heck, for a long time I worked on a product that only supported IE 6, but that was fine because our target audience/customers were all MS shops and that was expected. On 7/7/06, Siegfried Puchbauer <siegfried.puchbauer-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> > The application this code was written for is a little object browser with > the ability to search, browse and view objects. It was a requirement of the > customer not to break the functionality of the back- and forward button when > you eg. move into a directory. AJAX was chosen for this application because > it provided significant performance benefits (Loading the content of a > folder is about 4 times faster when using an ajax request instead of loading > the whole page). > > I used the document.write stuff because I read a lot of problems in IE > when inserting iframes as DOM elements. Most history-supporting frameworks > use this approach btw. > > I totally agree with you to not use smth like that to get an undo/redo > behavior, but for content navigation this might be useful. > > > On 7/7/06, Ryan Gahl <ryan.gahl-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > > > Exactly the kind of thing I don''t think is necessary or even good. You > > should port that idea over to a user control that acts as an undo/redo > > control, and does not mess around with the history hash. Not knocking your > > work, it''s good code (except maybe for the document.write stuff -- use > > Builder instead)... but for a community that is so centered on standards and > > not breaking known conventions, I really don''t understand this mentality of > > breaking the back button to try to use it as an undo control for a rich > > internet application. If your page is using Ajax and has thus become an > > application in domain of the DOM, treat it as an application and add the > > necessary application level controls (including undo/redo) and stop > > hijacking the browser. When I see a link on a news site for the latest and > > greatest Ajax site and I go to it to check it out, and I do a few things in > > it and then I''m done and I want to go back to that news site, I darn well > > expect to hit the back button ONCE (one time, uno, 1) to get there. I don''t > > want to see every little operation I performed in that app undo itself > > before I can get back to the news site. > > > > On 7/7/06, Siegfried Puchbauer < siegfried.puchbauer-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > > > > Hey guys, > > > > Some time ago I investigated some time on this topic and implemented a > > small solution based on prototype. It''s tested in Firefox and IE6 (IMHO > > there is no working solution for Safari). > > > > Here is the mail I allready send to the list: > > > > In one of my previous projects I had to satisfy the requirement of > > > handling browser back- and forward calls within an Ajax application. Thus I > > > didn''t get an urge to switch the JS part of this project to an other > > > framework like dojo (which supports Browser history handling > > > out-of-the-box), I had to come up with an idea of doing this with > > > prototype/scriptaculous. > > > > > > The arisen source code: > > > > > > Ajax.History = { > > > initialize: function(options) { > > > this.options = Object.extend({ > > > interval: 200 > > > },options||{}); > > > this.callback = this.options.callback || > > > Prototype.emtpyFunction; > > > if(navigator.userAgent.toLowerCase ().indexOf(''msie'') > 0) > > > this.locator = new Ajax.History.Iframe(''ajaxHistoryHandler'', > > > this.options.iframeSrc); > > > else > > > this.locator = new Ajax.History.Hash(); > > > this.currentHash = ''''; > > > this.locked = false; > > > > > > }, > > > add: function(hash) { > > > this.locked = true; > > > clearTimeout(this.timer); > > > this.currentHash = hash; > > > this.locator.setHash(hash); > > > this.timer = setTimeout(this.checkHash.bind(this), > > > this.options.interval); > > > this.locked = false; > > > }, > > > checkHash: function(){ > > > if(!locked){ > > > var check = this.locator.getHash(); > > > > > > if(check != this.currentHash){ > > > this.callback(check); > > > this.currentHash = check; > > > } > > > } > > > this.timer = setTimeout(this.checkHash.bind(this), > > > this.options.interval); > > > }, > > > getBookmark: function(){ > > > return this.locator.getBookmark(); > > > } > > > } > > > // Hash Handler for IE (Tested with IE6) > > > Ajax.History.Iframe = Class.create(); > > > Ajax.History.Iframe.prototype = { > > > initialize: function(id, src) { > > > this.url = ''''; > > > this.id = id || ''ajaxHistoryHandler''; > > > this.src = src || ''''; > > > document.write(''<iframe src="''+this.src+''" id="''+this.id+''" > > > name="''+this.id+''" style="display: none;" ></iframe>''); > > > }, > > > setHash: function(hash){ > > > try { > > > $( this.id).setAttribute(''src'', this.src + ''?'' + hash); > > > }catch(e) {} > > > window.location.href = this.url + ''#'' + hash; > > > }, > > > getHash: function(){ > > > try { > > > return (document.frames[this.id > > > ].location.href||''?'').split(''?'')[1]; > > > }catch(e){ return ''''; } > > > }, > > > getBookmark: function(){ > > > try{ > > > return window.location.href.split(''#'')[1]||''''; > > > }catch(e){ return ''''; } > > > } > > > } > > > // Hash Handler for a modern browser (tested with firefox 1.5) > > > Ajax.History.Hash = Class.create(); > > > Ajax.History.Hash.prototype = { > > > initialize: function(){ > > > > > > }, > > > setHash: function(hash){ > > > window.location.hash = hash; > > > }, > > > getHash: function(){ > > > return window.location.hash.substring(1)||''''; > > > }, > > > getBookmark: function(){ > > > try{ > > > return window.location.hash.substring(1)||''''; > > > }catch(e){ return ''''; } > > > } > > > } > > > > > > > > > Sample Usage: > > > > > > first you have to define a callback method for the history handler > > > which replays a previous ajax request: > > > > > > var historyUpdate = function(hash) { > > > new Ajax.Request( > > > .... > > > } > > > > > > in the onSuccess/onComplete of a Ajax.Request or Ajax.Updater (etc) > > > you have to add an history point: > > > > > > var handleSuccess = function(request){ > > > //... update DOM or smth like that > > > Ajax.History.add(request.options.parameters) > > > //... > > > } > > > (might also be done an Ajax.Responder or something like that) > > > > > > and in the foot of your html page you have to insert smth like: > > > > > > <script type="text/javascript"> > > > // <![CDATA[ > > > var historyHandler = Ajax.History.initialize({ > > > callback: historyUpdate, > > > iframeSrc: '' http://url.of.an/empty/page.html'' > > > }); > > > // ]]> > > > </script> > > > > > > > > > > > > Explanation: > > > The Ajax.History object periodically (defined by the option intervall) > > > checks the hash object for a change. There are currently 2 implementations > > > for this hash object. iframe based for IE and window.location.hashbased for firefox/mozilla. When the hash changes the callback function gets > > > called with the changed hash as arguement. History entries are added with > > > Ajax.History.add(''a_new_hash''). > > > > > > This is a very simple implementation of history support and needs to > > > be radically extended to be usefull ;) > > > > > > > > > > > _______________________________________________ > > Rails-spinoffs mailing list > > Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs > > > > > > > > > > _______________________________________________ > > Rails-spinoffs mailing list > > Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs > > > > > > > > > -- > Mit freundlichen Grüßen > > Siegfried Puchbauer > > _______________________________________________ > Rails-spinoffs mailing list > Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs > > >_______________________________________________ Rails-spinoffs mailing list Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs