1

I'm running into a very strange problem. I should probably start by pointing out I'm sorta new to ajax.

Through lots of reading on here and all of you experts, I've managed to create a script that through ajax calls allows me read a text file on my server that contains links to images. These images are then displayed on my html page.

It may seem a strange thing to do, but I have actually created a windows program that writes to this text file frequently. This allows my html page to have dynamic images displayed based on the text output from my windows program.

Now, the problem...

When the text file is sitting on my dropbox public folder, the website works great. Ajax pulls the text from within the text file and displays the images.

Now when I take that SAME text file, and ftp it up to my ubuntu server, Ajax no longer reads the text file. All other configurations remain the same except the ajax URL src of course pointing to the new text file location.

Code that works:

<html>
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex,nofollow" />
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
            $.ajax({
            url : "https://dl.dropboxusercontent.com/u/********/status.txt",
            dataType: "text",
            success : function (data) {
            console.log(data)
               var lines = data.split(",")
                for (var i = 0; i < lines.length; i++) {
                    var img = $('<img class="dynamic">'); 
                    img.attr('src', lines[i]);
                    img.appendTo('#status');
                }
            }
        });         
    });
</script>
</head>
<body>
<div id="status"></div>      
</body>
</html>

And the code that doesn't work (all images and text files the same except text file hosted on a different server)

<html>
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex,nofollow" />
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
            $.ajax({
            url : "http://a-different-server.com/status.txt",
            dataType: "text",
            success : function (data) {
            console.log(data)
               var lines = data.split(",")
                for (var i = 0; i < lines.length; i++) {
                    var img = $('<img class="dynamic">'); 
                    img.attr('src', lines[i]);
                    img.appendTo('#status');
                }
            }
        });         
    });
</script>
</head>
<body>
<div id="status"></div>      
</body>
</html>

Is this have something to do perhaps with mime-types or some setting on my server?

Thanks for all your help!

Mark
  • 11
  • 2
  • are you getting any error messages when looking at the developer console in Chrome? – JanR Mar 17 '16 at 23:17
  • Great, that sounds like a cross-domain issue. look at this post: http://stackoverflow.com/questions/20035101/no-access-control-allow-origin-header-is-present-on-the-requested-resource – JanR Mar 17 '16 at 23:23
  • 1
    Got it! Just needed to enable cors in the config file in Apache. THANK YOU so much! – Mark Mar 18 '16 at 01:43

1 Answers1

0

As JanR suggestion, this was cross domain problem. This was resolved by adding CORS support to the server, according to the instructions here: http://enable-cors.org/server_apache.html

Mark
  • 11
  • 2