Hello fellow Rails programmers, I really love the new way of AJAX requests in Rails3. It really cleans up my HTML code and it makes using AJAX in your application a lot easier. I only have one - kinda big - problem with it. When the page is still loading and the user clicks an AJAX link, the AJAX call will not be executed and he/she will be redirected to another page. That''s because the DOM needs to be loaded before all the links get the AJAX functions attached to them. I know I should also add HTML callbacks for these links, but for some AJAX links I don''t want the user to see another page: I want them to see my fancy AJAX and nothing else. I didn''t have this problem when using link_to_remote and wonder if somebody here knows a solution when using UJS. I tried adding onclick="return false;" to the links, but the normal page was still loaded. I asked around for some solutions, but the best one I got was adding some <div> over the whole page so all links can''t be clicked. Then after the DOM is loaded the <div> can be removed. IMO that''s even worse when it comes to usability, so I wondered if you people know a fancy solution for my problem. To sum up my question: I want my AJAX links not clickable until the DOM is loaded. When the DOM is loaded I want them to have the standard AJAX functionality they already have. Any suggestions? -- You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group. To post to this group, send email to rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org To unsubscribe from this group, send email to rubyonrails-talk+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-talk?hl=en.
On Oct 29, 2010, at 11:40 AM, RobinBrouwer wrote:> Hello fellow Rails programmers, > > I really love the new way of AJAX requests in Rails3. It really cleans > up my HTML code and it makes using AJAX in your application a lot > easier. I only have one - kinda big - problem with it. When the page > is still loading and the user clicks an AJAX link, the AJAX call will > not be executed and he/she will be redirected to another page. That''s > because the DOM needs to be loaded before all the links get the AJAX > functions attached to them. I know I should also add HTML callbacks > for these links, but for some AJAX links I don''t want the user to see > another page: I want them to see my fancy AJAX and nothing else. I > didn''t have this problem when using link_to_remote and wonder if > somebody here knows a solution when using UJS. > > I tried adding onclick="return false;" to the links, but the normal > page was still loaded. I asked around for some solutions, but the best > one I got was adding some <div> over the whole page so all links can''t > be clicked. Then after the DOM is loaded the <div> can be removed. IMO > that''s even worse when it comes to usability, so I wondered if you > people know a fancy solution for my problem. > > To sum up my question: I want my AJAX links not clickable until the > DOM is loaded. When the DOM is loaded I want them to have the standard > AJAX functionality they already have. Any suggestions?If your UJS is wired to the dom:loaded event (Prototype) or the jQuery equivalent, then everything should work even before the page is visible in the browser. How are you wiring these links? The other way to do this is by putting all your script at the bottom of the page, but that can definitely lead to what you describe -- particularly on very heavy pages, where the browser will try to stagger the loading. //load prototype first, then <script type="text/javascript"> document.observe(''dom:loaded'',function(){ $(''foo'').observe(''click'',function(evt){ evt.stop(); //cancel the event //do something wizzy here }); }); </script> ...bunch of html <a id="foo" href="/bar">baz</a> The dom:loaded stuff gets instantiated in most cases before the browser even gets around to displaying things on the page. Walter -- You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group. To post to this group, send email to rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org To unsubscribe from this group, send email to rubyonrails-talk+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-talk?hl=en.
Thank you for your response. I''m using the jQuery rails.js (which uses the dom:loaded event) and use :remote => true on the link_to helper to set the AJAX links (data-remote="true"). I tested clicking one of these AJAX links while the whole page wasn''t fully visible yet (clicked it VERY fast :P) and it didn''t fire the AJAX request but just redirected me to the HTML page. But when I wait a little bit it all works perfectly. I also thought the dom:loaded event was fired before showing the page, but apparently it doesn''t in my case. Is anyone else having the same issue or is it just me clicking links too fast? ;) On Oct 29, 6:32 pm, Walter Lee Davis <wa...-HQgmohHLjDZWk0Htik3J/w@public.gmane.org> wrote:> On Oct 29, 2010, at 11:40 AM, RobinBrouwer wrote: > > > > > Hello fellow Rails programmers, > > > I really love the new way of AJAX requests in Rails3. It really cleans > > up my HTML code and it makes using AJAX in your application a lot > > easier. I only have one - kinda big - problem with it. When the page > > is still loading and the user clicks an AJAX link, the AJAX call will > > not be executed and he/she will be redirected to another page. That''s > > because the DOM needs to be loaded before all the links get the AJAX > > functions attached to them. I know I should also add HTML callbacks > > for these links, but for some AJAX links I don''t want the user to see > > another page: I want them to see my fancy AJAX and nothing else. I > > didn''t have this problem when using link_to_remote and wonder if > > somebody here knows a solution when using UJS. > > > I tried adding onclick="return false;" to the links, but the normal > > page was still loaded. I asked around for some solutions, but the best > > one I got was adding some <div> over the whole page so all links can''t > > be clicked. Then after the DOM is loaded the <div> can be removed. IMO > > that''s even worse when it comes to usability, so I wondered if you > > people know a fancy solution for my problem. > > > To sum up my question: I want my AJAX links not clickable until the > > DOM is loaded. When the DOM is loaded I want them to have the standard > > AJAX functionality they already have. Any suggestions? > > If your UJS is wired to the dom:loaded event (Prototype) or the jQuery > equivalent, then everything should work even before the page is > visible in the browser. How are you wiring these links? The other way > to do this is by putting all your script at the bottom of the page, > but that can definitely lead to what you describe -- particularly on > very heavy pages, where the browser will try to stagger the loading. > > //load prototype first, then > <script type="text/javascript"> > document.observe(''dom:loaded'',function(){ > $(''foo'').observe(''click'',function(evt){ > evt.stop(); //cancel the event > //do something wizzy here > });}); > > </script> > ...bunch of html > > <a id="foo" href="/bar">baz</a> > > The dom:loaded stuff gets instantiated in most cases before the > browser even gets around to displaying things on the page. > > Walter-- You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group. To post to this group, send email to rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org To unsubscribe from this group, send email to rubyonrails-talk+unsubscribe@googlegroups.com. For more options, visit this group at http://groups.google.com/group/rubyonrails-talk?hl=en.
Walter Lee Davis
2010-Oct-29 17:09 UTC
Re: Re: Rails3 UJS AJAX links when DOM is not loaded
On Oct 29, 2010, at 1:00 PM, RobinBrouwer wrote:> Thank you for your response. I''m using the jQuery rails.js (which uses > the dom:loaded event) and use :remote => true on the link_to helper to > set the AJAX links (data-remote="true"). I tested clicking one of > these AJAX links while the whole page wasn''t fully visible yet > (clicked it VERY fast :P) and it didn''t fire the AJAX request but just > redirected me to the HTML page. But when I wait a little bit it all > works perfectly. I also thought the dom:loaded event was fired before > showing the page, but apparently it doesn''t in my case. Is anyone else > having the same issue or is it just me clicking links too fast? ;) > > On Oct 29, 6:32 pm, Walter Lee Davis <wa...-HQgmohHLjDZWk0Htik3J/w@public.gmane.org> wrote: >> On Oct 29, 2010, at 11:40 AM, RobinBrouwer wrote: >> >> >> >>> Hello fellow Rails programmers, >> >>> I really love the new way of AJAX requests in Rails3. It really >>> cleans >>> up my HTML code and it makes using AJAX in your application a lot >>> easier. I only have one - kinda big - problem with it. When the page >>> is still loading and the user clicks an AJAX link, the AJAX call >>> will >>> not be executed and he/she will be redirected to another page. >>> That''s >>> because the DOM needs to be loaded before all the links get the AJAX >>> functions attached to them. I know I should also add HTML callbacks >>> for these links, but for some AJAX links I don''t want the user to >>> see >>> another page: I want them to see my fancy AJAX and nothing else. I >>> didn''t have this problem when using link_to_remote and wonder if >>> somebody here knows a solution when using UJS. >> >>> I tried adding onclick="return false;" to the links, but the normal >>> page was still loaded. I asked around for some solutions, but the >>> best >>> one I got was adding some <div> over the whole page so all links >>> can''t >>> be clicked. Then after the DOM is loaded the <div> can be removed. >>> IMO >>> that''s even worse when it comes to usability, so I wondered if you >>> people know a fancy solution for my problem. >> >>> To sum up my question: I want my AJAX links not clickable until the >>> DOM is loaded. When the DOM is loaded I want them to have the >>> standard >>> AJAX functionality they already have. Any suggestions? >> >> If your UJS is wired to the dom:loaded event (Prototype) or the >> jQuery >> equivalent, then everything should work even before the page is >> visible in the browser. How are you wiring these links? The other way >> to do this is by putting all your script at the bottom of the page, >> but that can definitely lead to what you describe -- particularly on >> very heavy pages, where the browser will try to stagger the loading. >> >> //load prototype first, then >> <script type="text/javascript"> >> document.observe(''dom:loaded'',function(){ >> $(''foo'').observe(''click'',function(evt){ >> evt.stop(); //cancel the event >> //do something wizzy here >> });}); >> >> </script> >> ...bunch of html >> >> <a id="foo" href="/bar">baz</a> >> >> The dom:loaded stuff gets instantiated in most cases before the >> browser even gets around to displaying things on the page. >> >> Walter >Can you post a link that shows this problem? It could be a whole combination of different things -- browser, platform, connection speed, etc. I know that jQuery used to be the champ of this particular trick, and I also know (since I follow that project more closely) that Prototype had to do a LOT of browser branching to make this particular part of the library work correctly in all cases. It''s possible that Prototype is better at it at the moment, or that there''s something else about your page that is showing up this problem more clearly. In any case, it''s not been my experience that this would happen. Things that happen inside the dom:loaded event loop are usually way out there ahead of the visible page appearing in the browser. Walter -- You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group. To post to this group, send email to rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org To unsubscribe from this group, send email to rubyonrails-talk+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-talk?hl=en.
I can''t really post a link because it''s a project for work and the AJAX links are behind a private user login. I did however find out something about my problem. When just clicking the link fast while the page is loading, the AJAX request works like it''s supposed to. So not really a problem there. It only happens when I rapidly click the link while the page is loading from a refresh with the cache turned off. I then tried adding return false as an onclick attribute and removing :remote => true. When I reload the page the link isn''t clickable (as it''s supposed to be). But when I try the same (rapidly clicking after a refresh with cache off) with this onclick attribute it still does the same. So it isn''t the dom:loaded event that''s not working correctly, because now it just has inline javascript that tells it shouldn''t execute the default behavior. I guess it''s not a big deal and I''ll leave it as it is. I haven''t heard anyone else trying out the website having this problem, so I think it''s just me being (very) impatient with a refresh. :P Anyways, thanks a lot for helping! On Oct 29, 7:09 pm, Walter Lee Davis <wa...-HQgmohHLjDZWk0Htik3J/w@public.gmane.org> wrote:> On Oct 29, 2010, at 1:00 PM, RobinBrouwer wrote: > > > > > Thank you for your response. I''m using the jQuery rails.js (which uses > > the dom:loaded event) and use :remote => true on the link_to helper to > > set the AJAX links (data-remote="true"). I tested clicking one of > > these AJAX links while the whole page wasn''t fully visible yet > > (clicked it VERY fast :P) and it didn''t fire the AJAX request but just > > redirected me to the HTML page. But when I wait a little bit it all > > works perfectly. I also thought the dom:loaded event was fired before > > showing the page, but apparently it doesn''t in my case. Is anyone else > > having the same issue or is it just me clicking links too fast? ;) > > > On Oct 29, 6:32 pm, Walter Lee Davis <wa...-HQgmohHLjDZWk0Htik3J/w@public.gmane.org> wrote: > >> On Oct 29, 2010, at 11:40 AM, RobinBrouwer wrote: > > >>> Hello fellow Rails programmers, > > >>> I really love the new way of AJAX requests in Rails3. It really > >>> cleans > >>> up my HTML code and it makes using AJAX in your application a lot > >>> easier. I only have one - kinda big - problem with it. When the page > >>> is still loading and the user clicks an AJAX link, the AJAX call > >>> will > >>> not be executed and he/she will be redirected to another page. > >>> That''s > >>> because the DOM needs to be loaded before all the links get the AJAX > >>> functions attached to them. I know I should also add HTML callbacks > >>> for these links, but for some AJAX links I don''t want the user to > >>> see > >>> another page: I want them to see my fancy AJAX and nothing else. I > >>> didn''t have this problem when using link_to_remote and wonder if > >>> somebody here knows a solution when using UJS. > > >>> I tried adding onclick="return false;" to the links, but the normal > >>> page was still loaded. I asked around for some solutions, but the > >>> best > >>> one I got was adding some <div> over the whole page so all links > >>> can''t > >>> be clicked. Then after the DOM is loaded the <div> can be removed. > >>> IMO > >>> that''s even worse when it comes to usability, so I wondered if you > >>> people know a fancy solution for my problem. > > >>> To sum up my question: I want my AJAX links not clickable until the > >>> DOM is loaded. When the DOM is loaded I want them to have the > >>> standard > >>> AJAX functionality they already have. Any suggestions? > > >> If your UJS is wired to the dom:loaded event (Prototype) or the > >> jQuery > >> equivalent, then everything should work even before the page is > >> visible in the browser. How are you wiring these links? The other way > >> to do this is by putting all your script at the bottom of the page, > >> but that can definitely lead to what you describe -- particularly on > >> very heavy pages, where the browser will try to stagger the loading. > > >> //load prototype first, then > >> <script type="text/javascript"> > >> document.observe(''dom:loaded'',function(){ > >> $(''foo'').observe(''click'',function(evt){ > >> evt.stop(); //cancel the event > >> //do something wizzy here > >> });}); > > >> </script> > >> ...bunch of html > > >> <a id="foo" href="/bar">baz</a> > > >> The dom:loaded stuff gets instantiated in most cases before the > >> browser even gets around to displaying things on the page. > > >> Walter > > Can you post a link that shows this problem? It could be a whole > combination of different things -- browser, platform, connection > speed, etc. I know that jQuery used to be the champ of this particular > trick, and I also know (since I follow that project more closely) that > Prototype had to do a LOT of browser branching to make this particular > part of the library work correctly in all cases. It''s possible that > Prototype is better at it at the moment, or that there''s something > else about your page that is showing up this problem more clearly. In > any case, it''s not been my experience that this would happen. Things > that happen inside the dom:loaded event loop are usually way out there > ahead of the visible page appearing in the browser. > > Walter-- You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group. To post to this group, send email to rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org To unsubscribe from this group, send email to rubyonrails-talk+unsubscribe@googlegroups.com. For more options, visit this group at http://groups.google.com/group/rubyonrails-talk?hl=en.
If your users absolutely must not see the page other than in the container (I''m guessing lightbox), you can disable the links and enable them once all of the JS is loaded. However, this will cause your site to be perceived as slow in the cases where a user clicks on the link before the entire page is loaded. You can also profile what causes slowdowns in the page rendering and try to move those bottlenecks to be the last thing loaded or to be loaded on demand, so that it doesn''t prevent the Javascript for your links from activating. The best possible solution, IMO, is to have a page formatted in such a way that it wouldn''t be a big deal if a user loads it independently of where you''re trying to pull it in through ajax. Remember that for accessibility purposes, your entire site should be operable without JS and that fancy stuff like loading pages through ajax is the icing on top of the cake, it''s not the cake unto itself. On Oct 29, 1:09 pm, Walter Lee Davis <wa...-HQgmohHLjDZWk0Htik3J/w@public.gmane.org> wrote:> On Oct 29, 2010, at 1:00 PM, RobinBrouwer wrote: > > > > > > > > > > > Thank you for your response. I''m using the jQuery rails.js (which uses > > the dom:loaded event) and use :remote => true on the link_to helper to > > set the AJAX links (data-remote="true"). I tested clicking one of > > these AJAX links while the whole page wasn''t fully visible yet > > (clicked it VERY fast :P) and it didn''t fire the AJAX request but just > > redirected me to the HTML page. But when I wait a little bit it all > > works perfectly. I also thought the dom:loaded event was fired before > > showing the page, but apparently it doesn''t in my case. Is anyone else > > having the same issue or is it just me clicking links too fast? ;) > > > On Oct 29, 6:32 pm, Walter Lee Davis <wa...-HQgmohHLjDZWk0Htik3J/w@public.gmane.org> wrote: > >> On Oct 29, 2010, at 11:40 AM, RobinBrouwer wrote: > > >>> Hello fellow Rails programmers, > > >>> I really love the new way of AJAX requests in Rails3. It really > >>> cleans > >>> up my HTML code and it makes using AJAX in your application a lot > >>> easier. I only have one - kinda big - problem with it. When the page > >>> is still loading and the user clicks an AJAX link, the AJAX call > >>> will > >>> not be executed and he/she will be redirected to another page. > >>> That''s > >>> because the DOM needs to be loaded before all the links get the AJAX > >>> functions attached to them. I know I should also add HTML callbacks > >>> for these links, but for some AJAX links I don''t want the user to > >>> see > >>> another page: I want them to see my fancy AJAX and nothing else. I > >>> didn''t have this problem when using link_to_remote and wonder if > >>> somebody here knows a solution when using UJS. > > >>> I tried adding onclick="return false;" to the links, but the normal > >>> page was still loaded. I asked around for some solutions, but the > >>> best > >>> one I got was adding some <div> over the whole page so all links > >>> can''t > >>> be clicked. Then after the DOM is loaded the <div> can be removed. > >>> IMO > >>> that''s even worse when it comes to usability, so I wondered if you > >>> people know a fancy solution for my problem. > > >>> To sum up my question: I want my AJAX links not clickable until the > >>> DOM is loaded. When the DOM is loaded I want them to have the > >>> standard > >>> AJAX functionality they already have. Any suggestions? > > >> If your UJS is wired to the dom:loaded event (Prototype) or the > >> jQuery > >> equivalent, then everything should work even before the page is > >> visible in the browser. How are you wiring these links? The other way > >> to do this is by putting all your script at the bottom of the page, > >> but that can definitely lead to what you describe -- particularly on > >> very heavy pages, where the browser will try to stagger the loading. > > >> //load prototype first, then > >> <script type="text/javascript"> > >> document.observe(''dom:loaded'',function(){ > >> $(''foo'').observe(''click'',function(evt){ > >> evt.stop(); //cancel the event > >> //do something wizzy here > >> });}); > > >> </script> > >> ...bunch of html > > >> <a id="foo" href="/bar">baz</a> > > >> The dom:loaded stuff gets instantiated in most cases before the > >> browser even gets around to displaying things on the page. > > >> Walter > > Can you post a link that shows this problem? It could be a whole > combination of different things -- browser, platform, connection > speed, etc. I know that jQuery used to be the champ of this particular > trick, and I also know (since I follow that project more closely) that > Prototype had to do a LOT of browser branching to make this particular > part of the library work correctly in all cases. It''s possible that > Prototype is better at it at the moment, or that there''s something > else about your page that is showing up this problem more clearly. In > any case, it''s not been my experience that this would happen. Things > that happen inside the dom:loaded event loop are usually way out there > ahead of the visible page appearing in the browser. > > Walter-- You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group. To post to this group, send email to rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org To unsubscribe from this group, send email to rubyonrails-talk+unsubscribe@googlegroups.com. For more options, visit this group at http://groups.google.com/group/rubyonrails-talk?hl=en.