0

We have an HTML/JS animation which is basically a fancy counter. The actual counter part is a div the value for which gets loaded from a PHP script that spits out a random number. It looks like this:

<?php

$val = file_get_contents("num.txt");
$val += rand(1, 5);
file_put_contents("num.txt", $val);

print $val;

We are hosting this PHP file on an external domain, because this animation will be packaged as part of an iPad publication. The idea is that when our animation gets loaded it will call to our PHP file and get it's value from there.

I was wondering what the most straightforward way of loading this data would be.

The div for the text part of the counter that we are changing is #Stage_Text. I've tried the following approach in the html of the animation, which unfortunately did not work:

$(document).ready(function () {
        $.ajax({
            url : "http://ourdomain.com/stat.php",
            dataType: "text",
            success : function (result) {
                $("#Stage_Text").html(result);
            }
        });
    });

Any assistance would be greatly appreciated.

user3196337
  • 1
  • your code seems fine, it may be because you are requesting a php file from an external domain, although I'm not sure – Bill Jan 15 '14 at 03:17
  • also, have you checked the php script is working? (I'm not too familiar with php.) you can do this by simply going to the url in your browser http://ourdomain.com/stat.php – Bill Jan 15 '14 at 03:19
  • Thanks for the reply - I've checked the PHP file and it definitely works. – user3196337 Jan 15 '14 at 03:31
  • if you have a live version of this I will probably be able to debug it for you. Have you checked the permissions on the PHP file? – Bill Jan 15 '14 at 03:39

2 Answers2

0

I've just tested your code, and it seems to work fine.

Is you ajax request completing okay? You can check this in Firebug or your developer tools.

That's my only thought without other information.

------UDPATE-----

Sorry, I didn't see that your Ajax request was to a different domain. Yeah, this won't work because of the same-origin policy - in essence, you can only make ajax calls to the domain that served the javascript file.

Lot's of ideas to get around it here.

The easiest way is probably to use a server-side proxy.

Community
  • 1
  • 1
Graham Nicol
  • 264
  • 2
  • 14
  • I'm not sure that it is. I'm not getting any errors for it in Firebug, but I've just created a test html file with a blank div and while it looks like it reaches the domain (200 OK although it's highlighted red) it doesn't actually return any value back to it. I'll try hosting it on another domain to see if maybe it's some sort of a restriction with that host. However, if you visit that url in a browser the PHP returns a value, so the script does work. – user3196337 Jan 15 '14 at 03:41
0

Thanks for the responses! In the end we solved this by simply hosting the entire animation on the server and calling it within the app. This way the code I posted originally worked beautifully, and solved a few other challenges that we had - for example what happens if the user viewing the app doesn't have an internet connection? Doing it as I originally intended meant that the value would simply be blank (you could have a placeholder but it's still not ideal). With our workaround the animation simply does not get loaded and we have another, more static element underneath.

I'd say that in this particular case this is the absolutely most straightforward and easiest way to achieve what we wanted.

user3196337
  • 1