How to embed a file in html using jquery.load() in chrome - javascript

I am trying to load a txt file using jquery in Chrome. Why it does not work? I have copied this code snippet from w3schools, and all i have changed is their url.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("http://stackoverflow.com/questions/15114993/how-to-embed-a-file-in-html-using-jquery-load");
alert("clicked");
});
});
</script>
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<button>Get External Content</button>
</body>
</html>

Chrome throws the following error when executing your code:
Origin null is not allowed by Access-Control-Allow-Origin.
You must:
Host your HTML code on your local web server, so that it is accessible at:
http://localhost/your_directory/index.html
Update your code to load your out.txt, placed in the same folder where your index.html file is, like this (using relative paths)...
$("#div1").load("out.txt");
...or like this (using absolute paths):
$("#div1").load("http://localhost/your_directory/out.txt");
And you are done! :-)

Ok the issue you are probably having here seems to happen allot with chrome and ajax requests. Chrome throws a security issue if running locally try putting your code on a web server, or try firefox.
Or if your on a mac you can open chrome using like this from the command line to prevent the security issue
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-file-access-from-files
There are loads of posts on google if your search for "allow file access from files chrome"
Good luck

Related

Loading external javascript in html when using TEdgeBrowser

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

Why does Firefox DevTools' Debugger show 'loadSourceError'?

Consider this simple HTML file:
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
alert('1');
</script>
</body>
</html>
When I enable Firefox JavaScript Debugger (via Ctrl+Shift+S), the panel shows me the following error message instead of the source code:
Error loading from source:
loadSourceError
What am I doing wrong?
My bet is that it comes from some server setting, since it works fine from another server (as well as locally), but I cannot identify any noticeable difference between both configurations (apache.conf are identical, /etc/apache2/sites-enabled/ configuration is similar, enabled modules are the same. I had the hope that installing the javascript-common debian package would help, but it does not…).
JavaScript itself is served correctly, though (even the embedded JS), and there is no loading problem for JS files.
Got it!
It seems that the debugger has issues with internationalized domain names (IDN).

Getting started with JSC3D. Creat a simple file viewer in JSC3D. File not loading

I have just started using JSC3D.
I have followed the getting started guide in the documentation: https://code.google.com/p/jsc3d/wiki/GettingStarted
The code seems fine but my file does not seem to load, the loading bar just freezes.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Loader</TITLE>
<script type="text/javascript" src="jsc3d/jsc3d.js"></script>
<script type="text/javascript" src="jsc3d/jsc3d.webgl.js"></script>
<script type="text/javascript" src="jsc3d/jsc3d.touch.js"></script>
</HEAD>
<BODY>
<div style="width:800px; margin:auto; position:relative;">
<canvas id="cv" style="border: 1px solid;" width="750" height="400">
It seems you are using an outdated browser that does not support canvas :-(
</canvas>
</div>
<script type="text/javascript">
var viewer = new JSC3D.Viewer(document.getElementById('cv'));
viewer.setParameter('SceneUrl', 'cube.obj');
viewer.setParameter('ModelColor', '#CAA618');
viewer.setParameter('BackgroundColor1', '#E5D7BA');
viewer.setParameter('BackgroundColor2', '#383840');
viewer.setParameter('RenderMode', 'flat');
viewer.init();
viewer.update();
</script>
</BODY>
</HTML>
Does anyone know where I am going wrong?
Regards,
Mr B
EDIT: Seem to work fine when not testing in chrome. Could be a problem with loading external files in chrome.
First if you display live URL will be easier to help :)
I think you have a problem with the path to the JS jsc3d flies:
<script type="text/javascript" src="jsc3d/jsc3d.js"></script>
<script type="text/javascript" src="jsc3d/jsc3d.webgl.js"></script>
<script type="text/javascript" src="jsc3d/jsc3d.touch.js"></script>
That works well for me when the paths are correct (with your html code).
You can check the paths in the source code of the page and see if it's true.
I hope I helped you!
The JSC3D demos (e.g., Statue) work fine when viewed from a server, however when the identical code is run from the local filesystem it fails to load models in either IE or Chrome. (IE says nothing about loading, Chrome displays a progress bar and hangs). Other viewer information (background colors, background image, option controls for the BMW demo, etc.) is displayed properly. And the Avatar demo, which contains the model definition in the html file instead of an external file, runs properly when stored on the local filesystem.
Chrome discloses the problem -- the browser believes that an HTML file on the local filesystem trying to load an object from the local filesystem is a cross-site scripting attack and blocks the load:
XMLHttpRequest cannot load file:///X:/jsc3d/demos/bank/Western_Bank.obj. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.JSC3D.ObjLoader.loadObjFile # jsc3d.js:5117
jsc3d.js:5111 The XMLHttpRequest progress event property 'position' is deprecated. Please use 'loaded' instead.
jsc3d.js:5111 The XMLHttpRequest progress event property 'totalSize' is deprecated. Please use 'total' instead.
jsc3d.js:5117 Uncaught NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///X:/jsc3d/demos/bank/Western_Bank.obj'.
The routine JSC3D.ObjLoader.loadObjFile (jsc3d.js lines 5071-5118) uses xhr to load objects regardless of the protocol scheme of the object file.
How to open a local disk file with Javascript? describes how to read a file from the local disk, and in order to work with local files loadObjFile() apparently needs to be modified to include a special case using FileReader instead of xhr when the object file URL refers to the local filesystem.
And even if jsc3d were modified to use FileReader, it still apparently would not work by default, according to Chrome FileReader. The browser needs to be started with the --allow-file-access-from-files switch.

Why is jQuery not working in the browser action popup of a google chrome extension?

I've created a button whose function is to hide itself when clicked. But, it isn't working.Here's the code :
<html>
<body>
<button id="b">HIDE</button>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#b").click(function(){
$("#b").hide();
});
});
</script>
</body>
</head>
What's wrong with it?
That should work, but I'd strongly suggest you research the HTML for a valid document, i.e. </head> must appear before <body>.
Along with what alex said, it's possible that Chrome is blocking your request to the CDN-hosted jQuery. You can either give that domain valid permissions in manifest.json or simply download the copy of jQuery and store it locally.
If you are using SSL for your site, then you should serve your javascript/js file via https, else chrome will block it and causing your site's feature that is using that script not working.
I noticed that you are using http to call jquery from google cdn. May be it is causing that problem.

jQuery: Can't run $.get (http get) on Chrome

I want to use JavaScript to make a simple http get.
I used jQuery to perform my request. My code runs on IE8.0 but not in Chrome (ver 6.0).
My page has the following code: (to simplify, i made a simple request to a html page, but my needs is other)
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html>
<script type"text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<SCRIPT TYPE="text/javascript" >
function sendGet(){
$.get(
"http://www.google.pt",
function(data) {
alert('page content: ' + data);
});
}
</SCRIPT>
<head>
<title> Http Get Demonstration </title>
</head>
<body>
<p/>
<input type="button" value="Http Get" onclick="sendGet();" />
</body>
</html>
As i said, when i load this page on IE and press the button, i get the alert with the html code. But in Chrome the alert appears with empty text (null?). In Chrome Console from "Developer tools" i get the message: "XMLHttpRequest cannot load http://www.google.pt/. Origin null is not allowed by Access-Control-Allow-Origin."
Anyone can explain me what's the meaning of this message? And what i should change to my page run in Chrome?
Thanks
Due to same origin policy you cannot send AJAX requests to different domains than the one hosting your page. So unless your page is hosted on http://google.pt you cannot send an AJAX request to this domain. One possible workaround is to setup a server side script on your domain which will act as bridge between google.pt and the client or use JSONP if the distant domain supports it.
Although i can't remember if i changed any IE option, the Darin Dimitrov seems explain my problem.
I found some tricks can be used (beyond the Dimitrov answer):
use a PHP script:
http://jquery-howto.blogspot.com/2009/04/cross-domain-ajax-querying-with-jquery.html
configure IE by editing regedit (not recomended):
http://msdn.microsoft.com/en-us/library/dd565656(VS.85).aspx
(I belive there's some other way to disable cross domain protection without editing regedit. But i couldn't find it)
Are you opening the html file directly from a file (e.g. does the address bar say file://usr/path/to/the/file)?
We've found chrome won't let you 'ajax' in files from other domains when running under file://. However, in Safari it works fine.
Best solution for us is to use something like MAMP to run a local Apache server.

Categories