-5

I have the following code in one file (invasions.php):

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta http-equiv='content-type' content='text/html;charset=utf-8' />
    <script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
    <script type='text/javascript' src='script.js'></script>
  </head>
<body>
  <div id='output'>
<?php
$url = "my api link here";
$data = json_decode(file_get_contents($url));
if(!empty($data->invasions)) {
    foreach ($data->invasions as $title => $inv) {
        print "<h3 style='text-align:center;margin:auto;'><b>District:</b> {$title}</h3><br style='font-size:1px;'><h3 style='text-align:center;margin:auto;'><b>Cog:</b> {$inv->type}</h3><br style='font-size:1px;'><h3 style='text-align:center;margin:auto;'><b>Progress:</b> {$inv->progress}</h3>";
        if (count(($data->invasions) > 1)) {
        if(end($data->invasions) !== $inv){
        print "<hr>";
        } else { 
        print "<br style='font-size:2px;'>"; }
        }
        }
} else {
echo "<h1 style='text-align:center;margin:auto;padding:2px;color:darkred;font-weight:bold;'>No invasions!</span>";
}
?>
</div>
</body>
</html>

In my invasionapi.php, I have:

<?php
$assocArray = "https://www.toontownrewritten.com/api/invasions";
echo (file_get_contents($assocArray));
?>

In my script.js, I have:

$(function(){
function getData(){
  $.post('invasions.php', function(data){
    // var htm = do a bunch of stuff with the data Object, creating HTML
    $('#output').html(htm);
  });
}
setInterval(getData, 10000); // query every 10 seconds
});

I'm looking for some help to convert this php code to javascript so I can make this data update every 10 seconds through ajax. On a previous question, I received this response, but I don't know how to do it. I'd appreciate any help I could get. I've never ran data through javascript, or used ajax, I'm not sure where to start.

Community
  • 1
  • 1
llw
  • 201
  • 1
  • 3
  • 15
  • I don't really understand why this was downvoted; I'm simply looking for help getting rid of my php code and doing it through JS so I can implement a settimeout/setinterval.. how is this not useful for other people? I don't know what I'm doing with JS or AJAX, I've never worked with them, I can't ask for some help being pointed to a guide or something? – llw Oct 07 '14 at 17:23
  • You posted almost the same question again. On your previous question the answer is enough to help you get rid of your problem. That is why your question was downvoted. – DontVoteMeDown Oct 07 '14 at 17:24
  • 1
    This question appears to be off-topic because Stack Overflow is not a language-conversion service – LittleBobbyTables - Au Revoir Oct 07 '14 at 17:25
  • send jquery ajax evry 10 second on this php file – Harutyun Abgaryan Oct 07 '14 at 17:32
  • @LittleBobbyTables I'm trying to figure out how to make my PHP code automatically be updated every 10 seconds, but I don't know how to make it happen. In my previous question, I was provided a lot of great answers, but I can't put the pieces together. I'm going to update my OP with the code I tried. – llw Oct 07 '14 at 17:40
  • @Harutyun Abgaryan Is there a guide that I can learn how to do this? :( I updated my OP with the new code I tried using. – llw Oct 07 '14 at 17:48
  • you need write ajax request in javasxript set interval functions – Harutyun Abgaryan Oct 07 '14 at 17:55

3 Answers3

2

Use this set url = "your php file url"

$(document).ready(function(){
        var callAjax = function(){
          $.ajax({
            method:'get',
            url:'random.php',
            dataType:'html',
            success:function(data){
              $("#sample").html(data);
            }
          });
        }
        setInterval(callAjax,2000);
      });
Harutyun Abgaryan
  • 2,013
  • 1
  • 12
  • 15
  • Thank you @Harutyun Abgaryan, right now it is outputting the JSON. I'd like it to output a formatted version of the JSON. I tried changing `$("#main").html(data);` to `$("#main").html("

    District: "+index+"


    Cog: "+value.type+"


    Progress: "+value.progress+"

    ");` but it doesn't work correctly (code in Sameer's answer). Could you help me?     – llw Oct 07 '14 at 18:25
  • YEs send me your skype name – Harutyun Abgaryan Oct 07 '14 at 18:27
  • i change code add dataType:html in ajax – Harutyun Abgaryan Oct 07 '14 at 18:28
  • Thanks, this worked perfectly. No nasty flicker, and I can style it with my PHP. yay! – llw Oct 08 '14 at 02:50
  • You can do that but definitely not a good practice, when you can do the whole thing in client side Javascript, why use server side PHP and cause server load. Check my Fiddle fork. – Sameer Shemna Oct 08 '14 at 05:54
1

It can be surely done by Javascript, it's an API sevice.

Use the jQuery Library then add the following:

var url = "https://www.toontownrewritten.com/api/invasions";
    $.get(url,{},function(data){
        for(var index in data.invasions){
              console.log(index);
            var value = data.invasions[index];
            console.dir(value);

                  $('#main').append("<h3 style='text-align:center;margin:auto;'><b>District:</b> "+index+"</h3><br style='font-size:1px;'><h3 style='text-align:center;margin:auto;'><b>Cog:</b> "+value.type+"</h3><br style='font-size:1px;'><h3 style='text-align:center;margin:auto;'><b>Progress:</b> "+value.progress+"</h3>");
             }     
});

I have not completed it, just done enough to get you started, you figure out the rest, and don't be shy to ask for help.

Here is the JSFiddle, play with it: http://jsfiddle.net/sameersemna/atyz2nw7/ Enjoy! ;)

Edit:

Forked your fiddle for 'no data available': http://jsfiddle.net/sameersemna/1tskmv1k/ also added jQuery fade animations to remove the 'flicker'

Sameer Shemna
  • 886
  • 10
  • 19
  • I probably did it wrong because it's not working :/ but I tried adding a setInterval to it.. [here](http://jsfiddle.net/atyz2nw7/1/) Thank you for the help you've provided so far @Sameer Shemna – llw Oct 07 '14 at 18:14
  • I dont think you properly understand the concept of Asynchronous Requests, you should read more, and refer to this fork of your JSFiddle: http://jsfiddle.net/sameersemna/rfrcb7oc/ also do check out the console to see when event is fired and data is received – Sameer Shemna Oct 07 '14 at 18:24
  • Thank you @Sameer Shemna, I just tested it and it works fine. – llw Oct 07 '14 at 18:39
  • Do yourself a favor read about AJAX and jQuery, do me a favor mark answer as accepted ;) – Sameer Shemna Oct 07 '14 at 19:03
  • Thanks @Sameer Shemna, I am reading up on it as I'm trying to customize it. Is there a way to change my text that says "invasion tracker" at the top to say something else if there is no data? [here](http://i.imgur.com/jwAH3N1.png) is what it looks like when there is no data. I'd like to change the text to say something else if there is no data, until there is data, which then it can say "Invasion Tracker". I [updated the jsfiddle](http://jsfiddle.net/atyz2nw7/5/) – llw Oct 07 '14 at 19:30
0

It cannot be done with JavaScript for security reasons. You cannot fetch data from domains other then your domain.

BUT, it's possible with JSON-RPC, if your API provide JSON-RPC interface.

And I think your have been downvoted because you not asking a question but a service, it's not the StackOverflow goal

Fathy
  • 4,939
  • 1
  • 23
  • 25