magento javascript not playing nice with jquery
I'm having a bit of a problem getting my custom JavaScript file to play nice in Google chrome when jquery is being loaded i开发者_开发技巧n my Magento site. This problem only seems to be appearing in Google chrome. I've tested for the problem in both Linux Ubuntu 10.10 (chrome 10.0.648.114 beta) and Windows XP (chrome 9.0.597.98). FF, Safari, IE don't seem to have this problem.
When jQuery is added to the JS files to include, my personal JS file does not work when a hard refresh is sent (force a 200 request of the js file). if I do a regular refresh (304 request of the js file) and have it load from cache, then it works.
I have gone so far as to create a dummy page outside my magento site and I'm still getting this problem when I include the JS files from the magento site. but, if I move the JS files outside the magento site it works fine?
I have caching disabled in my magento admin and to my knowledge there isn't any module or custom code/plugins that would affect JS files that are to be included.
Here is an example of my dummy page that is sitting in the root directory of my server
The only thing gearlists.js has in it, is
alert('external');
so I would expect two alert popups when I load that page. but on hard refreshes, I'm only getting one popup. "Internal".
If i turn around and do a regular refresh, both JS files are loaded from the browser cache w/ a 304 status code and I get two popups "External" then "Internal"
Does Not Work With Hard Refresh
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://VIRTUAL_SERVER_FOR_MAGENTO_SITE/catalog/js/jquery/jquery-1.5.1.js"></script>
<script type="text/javascript" src="http://VIRTUAL_SERVER_FOR_MAGENTO_SITE/catalog/js/ads/gearlists.js"></script>
<script type="text/javascript">
alert('Internal');
</script>
</head>
<body>
</body>
</html>
Always Works
In this example, if I move the JS files out of the magento virtual server and into the root directory of my server, everything always works as expected. two popups are shown w/ every page refresh
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://localhost/jquery-1.5.1.js"></script>
<script type="text/javascript" src="http://localhost/gearlists.js"></script>
<script type="text/javascript">
alert('here');
</script>
</head>
<body>
</body>
</html>
Now if I remove the jquery file from my test, my custom js file always works fine whether its served from withing my magento VS or not...There is always two popups.
I'm a bit stuck on what could be causing this. Any ideas would be greatly appreciated.
OK, I figured this out. dumb mistake, but it took some time. The directory for the files were the initials for the site name js/ads/gearlists.js
turns out my adblock extension uses a regex to find the word "ads" and filtered my script out. when I adjusted the directory from ads to adsinc problem went away.
makes sense that id didn't work in linux or windows since my chrome extensions are synced.
Two tips:
You may want to install the mxperts jquery plugin extension on Magento Connect - it is free and helps debugging jquery scripts that people put on your Magento site.
Google Chrome has no known way of refreshing the cache - you can rename your js files though, then it loads new ones.
加载中,请稍侯......
精彩评论