How can I load a remote file using jQuery?

Question

I'm currently using this code:

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<div class="div"></div>
<script>
var timer = 10;
var source = 'file.php';

$(document).ready(function() {
  refresh();
  setInterval(function() { refresh() }, timer * 1000);
});

function refresh() {
    $('.div').load(source);
}
</script>

But, if I put a link to the file.php file, say http://example.com/file.php, it doesn't load anything.

What I would like to do is to be able to load remote files.

How can I go about doing this? Or is this disabled for security reasons?

My console shoots the following error:

XMLHttpRequest cannot load SOURCE. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'URL' is therefore not allowed access.

SOURCE is the place I was trying to load from, and URL is the place I was trying to load the source.

You need to run the code on a web server, not from your local hard drive. What JavaScript errors do you see in your browser console? — Blazemonger
– Blazemonger, Commented Dec 9, 2014 at 20:32
I was running it on a web server. I didn't check for any errors. — Cody
– Cody, Commented Dec 9, 2014 at 20:36
Checking for errors is the first thing you should have done; post them here verbatim if you don't understand them. — Blazemonger
– Blazemonger, Commented Dec 9, 2014 at 20:39
Sorry, I'm not a Javascript developer. I'll learn. I'll check for errors now, thank you. — Cody
– Cody, Commented Dec 9, 2014 at 20:40

Eric OSW · Accepted Answer · 2014-12-09 20:36:23Z

1

I think the jquery load() function can only load content from the same domain.

You might be able to fetch the results with a crossdomain ajax call (documentation on http://api.jquery.com/jquery.ajax/), depending on what you are trying to fetch.

answered Dec 9, 2014 at 20:36

Eric OSW

893 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Cody Over a year ago

All the script really does is print a string of text and some HTML. Should I be able to do it?

Cody Over a year ago

Error added to the main question.

Meta_data · Accepted Answer · 2014-12-09 20:40:56Z

0

from what i understand you are trying to get the 'file.php' Code text .. this is not possible Server side scripts only output their Screen . e.g echos / print / Var dump.

if you are trying to activate a php script at a remote server you can use post / get using JQuery and get the script reply.

edited Dec 9, 2014 at 20:40

answered Dec 9, 2014 at 20:34

Meta_data

6081 gold badge4 silver badges14 bronze badges

1 Comment

Cody Over a year ago

Error added to the main question.

Cody · Accepted Answer · 2014-12-11 21:54:52Z

0

Alright.

My issue was that I didn't have CORS enabled.

I fixed this by adding the following code to the top of my request file (file.php)

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET');
header("Access-Control-Allow-Headers: X-Requested-With");

Now it works.

Allowing the origin to be anyone is insecure and I don't recommend but for what I'm doing, it's fine.

edited Dec 11, 2014 at 21:54

answered Dec 9, 2014 at 21:13

Cody

2192 silver badges12 bronze badges

3 Comments

Blazemonger Over a year ago

Keep in mind that 'Access-Control-Allow-Origin: *' will allow ANY other site to load this file via AJAX as well, whether you want them to or not. You're better off replacing * with the narrowest domain possible.

Cody Over a year ago

Can I allow multiple domains with commas? Like header('Access-Control-Allow-Origin: tumblr.com, facebook.com');?

Blazemonger Over a year ago

stackoverflow.com/questions/1653308/…

Collectives™ on Stack Overflow

How can I load a remote file using jQuery?

3 Answers 3

2 Comments

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related