Forums
| Page 1 of 2 | [ 15 posts ] | Go to page 1, 2 Next |
|
I'm have the following code that works fine in IE and firefox but it doesn't work properly in Chrome. The problem is that History.Change fires automatically in Chrome and doesn't wait for the actual back button to be pressed. I'm not that great with JavaScript. I would appreciate some help fixing this. Thanks.
<html> <head><script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js" charset="utf-8"></script></head> <script> // Create a new YUI instance and populate it with the required modules. YUI().use('history', function (Y) { var history = new Y.History({ initialState: {kittens: null,}}); Y.on('history:change', function (e) { alert("hello");}); }); </script> </html> |
|
This may be happening because Chrome fires a popstate event on every single pageview, whereas other browsers only fire it on a back/forward button pageview.
The best way to deal with this is probably to check the actual state values returned by the change event (in e.changed) and only take action if you see that a state value you care about has changed. |
|
Thanks for that information. I will try to make sense of it, but I'm not very good with JavaScript.
Is there any simple examples that would help me out? Thanks, |
|
I implemented your suggestion and it solves my first problem if chrome firing the popstate event right away. But when I do finally hit the back button, google doesn't fire the popstate again.
Any Ideas? |
|
Can you share your code?
|
|
Thank you for helping me. I really appreciate it. I'm a newbie and I don't really know what I'm doing. I added a change for the source to see if its popstate but not it stops everything.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="en-ca" http-equiv="Content-Language" /> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>Core</title> <script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js" charset="utf-8"></script> </head> <body> <script> // Create a new YUI instance and populate it with the required modules. YUI().use('history', function (Y) { var history = new Y.History({ initialState: {kittens: null,} }); Y.on('history:change', function (e) { if (e.src != "popstate"){ alert("Works");} }); }); </script> </body> </html> |
|
I would recommend something like this:
Code: YUI().use('history', function (Y) { var history = new Y.History({ initialState: {kittens: null} }); Y.on('history:change', function (e) { if ('kittens' in e.changed) { // Only runs if the value of 'kittens' has actually changed. alert("Works"); } }); }); Ignoring all popstate events won't solve the problem, because as you said, you actually do want to handle some popstate events. A better solution is to ignore events in which the 'kittens' value (or some other value you care about) hasn't changed. |
|
Thanks for your reply. I still have a fundamental problem. I want it to fire when you click the back button on the browser. This code would only work if I changed the value in another way other that the back button is pressed.
Maybe I'm missing something, let me know. My original code works perfectly in IE and FF, I'm just trying to get it to work in Chrome. Thanks again, I really appreciate this. |
|
Let me quickly sum up the issue again, just to be clear: Chrome always fires popstate, even on non-back button pageviews. Other browsers only fire it on back button pageviews. The only way to tell whether the popstate event that Chrome fires is one we care about is to check whether any of our stored state data has changed due to the event.
This assumes that on every intentional history change, we change some state data. If a popstate event occurs but no state data has changed, then it was just a routine popstate that wasn't caused by the back button. If state data has changed, then we know the back button was used. Does this make sense? The idea here is that since we can't distinguish between two different causes for the exact same event, we have to use our own data to signal when we should act on the event. If you don't actually want to store state data and are just interested in doing URL-based routing, I'd recommend looking into the Controller component that will be released soon in YUI 3.4.0. |
|
That makes sense. My problem is not that chrome fires a popstate on pageload, the methods that you've described solve that.
This issue is that when the user does actually hit the back button, it doesn't fire a popstate, it only does it onload. You can test that with the code I provided. Do you have any solutions to this? Thanks |
| Page 1 of 2 | [ 15 posts ] | Go to page 1, 2 Next |
| You cannot post new topics in this forum You cannot reply to topics in this forum You cannot edit your posts in this forum You cannot delete your posts in this forum |
-
Re: Simplified YUI3 Datatable cell formatting
Luke Smith 4 hours ago
-
Mock Objects - How to handle calls to instanceof
Amity Binkert 8 hours ago
-
Re: Simplified YUI3 Datatable cell formatting
Michael Malak 9 hours ago
-
Re: Simplified YUI3 Datatable cell formatting
Luke Smith 9 hours ago
-
Re: Simplified YUI3 Datatable cell formatting
Luke Smith 9 hours ago
-
Re: Simplified YUI3 Datatable cell formatting
Juan Ignacio Dopazo 14 hours ago
-
Widget's focused CSS classes
Dave on 05/22/13
-
Re: How to extend paginator with my own custom component
Erik Stockton on 05/21/13
Recent YUI Blog Posts
-
YUI Weekly for May 17th, 2013
Derek Gathright May 17th -
Yahoo’s International Team Is Hiring!
Jenny Donnelly May 17th -
YUICompressor 2.4.8 Released
Joey Smith May 16th -
YUI 3.10.1 Released to Fix SWF Vulnerability
Andrew Wooldridge May 14th -
YUI Weekly for May 10th, 2013
Derek Gathright May 13th -
Yahoo Hack Europe 2013
Matt Parker May 9th
Online Users
© 2006-2013 Yahoo! Inc. All rights reserved.
All code on this site is licensed under the BSD License unless stated otherwise.
About This Site · Security Contact Info
Powered by phpBB® Forum Software © phpBB Group