I'm using w3schools to try to understand how simple AJAX requests work and I came across this exercise page:
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax_load
I thought it was a simple example of an ajax request, so I copied and pasted the code into a plain ajax.htm file and copied and pasted the txt file it refers to:
http://www.w3schools.com/jquery/demo_test.txt
...and saved it as demo_test.txt file it refers to and saved them both in the same folder. (Keep in mind, I have an Apache server that processes PHP locally with no problem, so I would think a simple request like this would work on my local machine).
However when I click the button locally I get nothing. Then, when I upload the files to a different server (a "web host") suddenly it works.
So, this works on a webhost and it works at w3schools but it doesn't work locally on my machine in my root folder (where php works without a problem).
I would prefer to not have to upload my code before being able to test whether it works and would rather be able to process everything locally, like I do with PHP. Is it possible to do this locally or can I only make these requests remotely from my web host?
Why is my machine not processing this code? Any help would be appreciated. Thanks.
There are a lot of reasons you might not be able to load the file locally, but most will have to do with how you're serving the files. If you're using file:// you're going to run into problems; you said you have an Apache server, but didn't mention whether you were actually serving this site from it.
Have you checked to make sure that the route you're loading via your AJAX call is actually loading properly? E.g. if the ajax file is at your web root (http://local.site/ajax.html) and so is your txt file (http://local.site/demo_test.txt).
In this situation you can also always check your browser's Javascript console to see if you get any errors or if the files are actually loaded correctly. Depending on how you're serving and accessing the various files, you might be getting CORS errors as well.
The simplest solution is to make sure you're running on a local webserver (your Apache) instead of directly viewing files.
Related
The Problem:
I edit an asset file such has .js or .css via my code editor Sublime Editor 3. I then save those files to the server via an SFTP plugin on sublime. Then when I refresh the live website to view changes from my chrome browser (I have a plugin that flushes the browser cache so I see new changes.) I sometimes get a error on the chrome console that reads:
net::ERR_HTTP2_PROTOCOL_ERROR 200
Where the browser is not served the requested file. When I check my log file for Apache I see the following:
[alert] 657967#657967: *188534 pread() read only 7497 of 7498
My server is setup with Nginx running as a Web Server and Reverse Proxy for Apache.
How can I make it so that Nginx does not fail server the requested files even though they were just edited. Maybe sending back cache until it updates the new changes. Please advise because it is driving me nuts and I have no idea how to overcome it.
My workflow for JavaScript consists of me writing code and refreshing the live site to view web console on chrome. I need to be able to view the changes I made from the server via browser. I don't like local environments. I tried to google this topic many times with no luck so any help would be much appreciated.
I have a locally-stored project whose directory structure is the following (I minimized non-relevant folders):
What I want to do is that in an HTML file, like index.html, to add a <header> such that its contents would be loaded from an external HTML file, so all of what I'll have to write in index.html would be <header>, and my solution would load the content automatically.
To do this, I'd like to use JavaScript (preferably jQuery, but I'll accept other solutions if they work and jQuery doesn't, or if they work and executed faster than jQuery).
I don't think that I should use an <iframe> due to the fact that it'd probably increase loading times more than using jQuery/JavaScript (which, like I said, is what works now, when the website is live).
Right now, I'm using the jQuery .load() function. I don't know much about jQuery, but I've been told that it should work locally - and it doesn't, for me.
My browser's console shows me the problem:
jquery-3.1.1.min.js:4 XMLHttpRequest cannot load file:///C:/Users/GalGr/Desktop/eiomw/header.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
And I'm trying to overcome it.
This code works on my live website - it might not be updated to the code of the files that I linked to below, but it doesn't matter - their code matters.
This is the index.html file:
index.html
This is the header.html file:
header.html
This is `main_script.js:
main_script
The reason you're having a problem with this locally is mainly down to security measures in your browser.
Essentially whenever you're using jQuery's load() function it makes a separate HTTP request (approach known as AJAX) for the file or URL you give it.
Modern browsers enforce that the URL you request using AJAX methods is from the same origin (server) as a security feature to stop pages randomly loading content from anywhere on the internet in the background. In your case it seems like this shouldn't affect you because you're browsing your pages locally and the request you're making using load() is also for a local file (header.html).
However, I am assuming you're just opening up the page directly in your browser, so your browser's URL will look something like 'file:///C:/Users...' (similar example in the error message you gave). This means your browser is directly reading the file from disk and interpreting it as HTML to display the page. It seems likely you don't actually have a local HTTP server hosting the page, otherwise the URL would start with 'http://'. It is for this reason that the browser is giving the security error, even though your AJAX request for header.html is technically from the same source as the page it is executed on.
Your server will have an HTTP server which it's using to host the pages, and so everything works fine as you're then using HTTP as normal, and this security feature does not get in your way.
I would suggest that you simply install an HTTP server locally on your dev machine. You don't even need to 'install' one per-se, there are loads of development HTTP servers that just run standalone, so you start them up when you want to browse your local HTML files. As you appear to be on Windows, I'd check out either IIS (Windows' HTTP server) or IIS Express (like IIS but runs standalone). There are also many others available like Apache, Nginx, etc. etc.
If you do this, you can host your pages on something like 'http://localhost/index.html'. Then, any AJAX requests you make for local files will work fine, just like your server.
Hope that makes sense, and I'm not telling you something you already know?
Why not using something more straight foreword like mustache.js ?
I found a solution:
Using phpStorm's built-in localhost, I was able to emulate a server that handles my requests and responses.
I am trying to load some content inside a div #display. I have read many questions regarding this matter here, but still I have been unable to get it working. The alert function which I have just added for testing purpose works without any problem.
Here is what I have tried
$(document).ready(function(){
$('#townships').click(function() {
$('#display').load("helloworld.html");
alert("Hi");
});
});
I am trying this offline. The helloworld.html file is in the same folder with the homepage file.
I am trying this offline
I believe this is your problem. AJAX requests to the local filesystem will be blocked by the browsers' security settings.
You need to run it under a webserver, either on your local machine, such as WAMP/LAMP/IIS or on a remote machine.
You can not do AJAX request without loading files from some server. Doing it by loading files from file system won't work because of SAME ORIGIN policy. Since there is no domain to compare to the AJAX requests fail. You can see the exception while doing it in Chrome.
This is relevant
AJAX code do not run locally
You should put your html file in a web server. If you have python installed, you can just type
python -m SimpleHTTPServer [port]``
In order to have a rapid web server in your working directory.
I'm trying to setup my laptop to be able to test java scripts, in particular in need to be able to make AJAX calls to .csv/.tsv files.
To do this I have setup xampp and moved my files to the xampp directory. Will I need to do anything else (e.g. configuration) to be able to open the .html file saved in the xampp directory and have it be able to make AJAX calls. When I do this I still get the usual "same origin" error.
I know that the code should work as I am trying to reproduce one of the d3 examples to see if the server works.
Would anyone be able to point out what I'm doing wrong?
I noticed that when I open HTML file locally by double clicking on it, it will not "run" the same as if I had it on a web server and opened it by HTTP GET request.
I need to have a local HTML file a user can open by double clicking on it. This HTML file has several JQuery load calls such as this:
$("#content").load("http://somepage.com/index.html");
I want to update several divs with content from remote sites.
This works fine If I have this file on a web server but not if I double click it under windows explorer... How can I "make" the file "run" as it would on a web server?
I think you pretty much cannot. This has to do with domain-access restrictions, which are there to avoid cross site scripting and the likes.
The files on your hard drive are especially limited - think what the life could be if they were allowed to treat your whole hard-drive as a single domain.
If you want things to work properly you need to be running a server. XAMPP is a pretty good bet as it's easy to install and set up.
Any non-AJAX javascript will work fine as is though, as long as the paths to include any css or js are relative.
You can't do this locally. You have to have it hosted somewhere for this to work. It's done this way for the sake of security.
What are you trying to do that you "need" to have this?