I'm having a bit of a problem getting my custom JavaScript file to play nice in Google chrome when jquery is being loaded in 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.
Related
It seems when i use TEdgeBrowser and navigate to my html file, that loading external local javascript files in that html does not work. -nothing happens
for example i have in html:
<!DOCTYPE>
<html>
<head>
</head>
<body>
<script src="test.js"></script>
</body>
</html>
And javascript file:
alert('HELLO');
It is simple example that should message me HELLO, but doesn't matter what is in javascript, it just doesn't load.
I don't get any DevTools errors.
When i run the html in normal browser for example chrome or edge on my pc, it works fine.
Also, when i have a script that is not local, but remote, then it works too. So it seems that the problem is only with local files. (I run delphi as administrator).
What could be the problem? I have delphi 10.4.2
A very basic question
Cannot load external javascript resource on server
I am working on a Play framework project. I've made some basic html view with some Javascript. It works correctlly when I have my js code in the actual view.
However, when I tried moving js code to a separate file and load it using
<script> src="main.js" </script>
It works correctly when opened using plain chrome browser. However when I run it on server and it fails and chrome dev console prints the following message
GET http://localhost:9000/main.js 404 (Not Found)
I've tried setting up a GET request on targer URL but cannot pass main.js as an arguement to Ok method
def getmainJs()= Action {
Ok()
}
Is there a painless way to access the js code or do I have to go through the process of setting up the JavacriptRouter menntioned here. The app is only going to be 2 views to I kind of don't care about scalability
I created an example on how to serve a Javascript file:
Routes:
GET /foo sk.ygor.stackoverflow.q53319493.controller.ApplicationController.foo
GET /assets/*file controllers.Assets.versioned(file)
View:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="#routes.Assets.versioned("main.js")"></script>
</body>
</html>
I'm trying to host a webpage on my PC (Running Windows 7), and intend to use bootstrap css/javascript library, but I am having trouble using the bootstrap javascript library from a CDN. Here is a minimal example, index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello world</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
Hello world
</div>
</body>
</html>
I have tried to host the page on localhost using both "python -m SimpleHTTPServer" and using node.js + express, but I get the same result, where I get the message "Uncaught SyntaxError: Unexpected token ILLEGAL" with reference to bootstrap.min.js:1 in chrome's javascript/html debugger.
If I open bootstrap.min.js it only shows lots of chinese signs (which is translated to meaningless text in google translate). All this goes for other CDN scripts also, such as socket.io.
*Edit 1:
I tried downloading the source and loading the bootstrap.min.js script locally
with
<script src="/js/bootstrap.min.js"></script>
but I get the excact same problem as before.
I had the same problem on my own local page. I thought it might be an issue with the way I was loading bootstrap or jquery as these files were showing what looked like Chinese characters in Chrome Dev tools, even though the js and css files looked ok when loaded from a URL. Googling "Unexpected token ILLEGAL" came up with this question on Stack Overflow, so I'll answer. The issue turned out to be invalid characters in my HTML.
My method to solve was to create a dead simple page from scratch and add the features from the failing page one by one until it resembled my failing page. In the end, the source looked identical in a text editor, but the newly constructed page worked fine while and the original page had the "unexpected token" error in Chrome console. So I compared the files and found some hidden characters (which I had copy and pasted from a web page snippet) which were causing the failure.
When I copy and paste your HTML above into a text file and open it in Chrome, it displays correctly.
In my case the character coding made the same issue.
As soon as I forced the output to save as UTF-8, the issue gone.
So I have a variable in my iframe like so:
<script>
var zipphone = "<?= $phone ?>";
</script>
Now I want to pass that variable to the parent frame after the iframe is loaded. What is the simplest way to do that?
If the pages are both on the same domain, you could call a function of the parent window:
window.parent.zipPhoneCallback(zipphone);
In the parent window, you could define a function like this:
function zipPhoneCallback(zipphone) {
((console&&console.log)||alert)("zipphone = " + zipphone);
}
Beware there seems to be a Chrome browser issue with addressing variables from webpages to or from IFRAMES. This issue appears in offline testing.
That aside, assuming your browser actually implements basic functions of Javascript, you address your variable from your main webpage using window.myiframename.zipphone
<IFRAME NAME="myiframename" SRC="myzipphoneiframefile.htm" ....
<script type="text/javascript">
<!--
// then whatever you do with your variable
// read it
var z = window.myiframename.zipphone;
// write to it
window.myiframename.zipphone = "....";
and so on.
Example.
DOC1.HTM contents -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>DOC1.HTM</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor=pink>
<h1>DOC1.HTM</h1>
<iframe name="iframename" src="doc2.htm"></iframe>
<p>
<br />
check variable
</p>
</body>
</html>
DOC2.HTM contents -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>DOC2.HTM</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor=red>
<script type="text/javascript">
var test_var="testing, testing . . .";
</script>
<h1>DOC2.HTM</h1>
</body>
</html>
That works beautifully even with older versions of Internet Explorer but try it when offline testing with Chrome and window.iframename.test_var appears to be undefined because of the Chrome issue.
Anyway, look out for future versions of Chrome fixing this because it is a lot of egg on Google's face while they haven't.
I have a work-around for this issue in Chrome offline testing.
Thanks to Lucy24 on WebmasterWorld for helping. http://www.webmasterworld.com/google_chrome/4689258.htm#msg4689342
This issue with Chrome arose when my javascript was being tested off line and files doc1.htm and doc2.htm are in the same folder on my PC.
Moving the doc1.htm & doc2.htm files to a folder where I test my server side php programs, which runs using Windows Internet Services Manager means I can address the files using h t t p : / / l o c a l h o s t addresses and bingo, Chrome behaves as it should have behaved in offline mode.
It is not "legitimate" in my opinion for Chrome's javascript not to be able to directly address files in the same offline folder.
There's absolutely no security issue when you are running your own javascript files on your own PC. Or if Chrome wanted to offer a security setting that allowed or disallowed offline IFRAME variable scoping then OK, that would be fine.
The error message is not at all clear I submit and Lucy24 did well to figure out what it meant.
If Internet Explorer and Firefox etc allow you to test your javascript offline then why not Chrome?
So well done Lucy24. Not so well done Chrome.
I wanted to run a test of a sketch I just made ported to processing.js. When I load the webpage, I get the following errors from the javascript console in Chrome:
XMLHttpRequest cannot load file:///Users/aoeuaoeu/Desktop/projects/local%20site%20files/_/ee.pde. Origin null is not allowed by Access-Control-Allow-Origin.
processing.js:27Uncaught Error: NETWORK_ERR: XMLHttpRequest Exception 101
Here's the source of the page I'm loading:
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Earnest Emporium</title>
<!--Contact: earnestemporium#gmail.com-->
<script src="processing.js"></script>
<canvas data-processing-sources="ee.pde"></canvas>
</head>
<body>
</body>
</html>
ee.pde and processing.js are in the same directory as the html file, so I'm not really sure what's going on. I should also point out that I'm testing this locally, and I get a different error when I load the page once uploaded onto my ftp server. (Maybe it's chrome? I get a black box which doesn't show up on chrome on firefox once it's uploaded to the ftp server. It works fine on firefox locally)
/processing.js:17946Uncaught SyntaxError: Unexpected token <
Processing.Sketch.attach/processing.js:17946
Processing.Processing.executeSketch/processing.js:16209
Processing/processing.js:16237
init/processing.js:17991
window.addEventListener.i
I just noticed this:
file:///Users/aoeuaoeu/Desktop/projects/local%20site%20files/_/ee.pde.
Are you running this on your desktop? If I recall correctly AJAX does NOT run from your desktop, you need a native web server setup, and running it by calling your localhost.