How to print JavaScript based on Ajax request?

Question

Allow me to elaborate. I have this Ajax script which is fetching for one thing. The refresh_on. What does it do? It either returns 0 OR 1.

 function startRefresh() {
        setTimeout(startRefresh, 60000);
        $.ajax({
            url: 'refresh.php',
            type: 'POST',
            dataType: 'JSON',
            data: {task: "reload"},
            success: function(data) {
                $.each(data, function(i, attr){
                    if (attr.refresh_on == 0) {
                        //this doesn't work 
                        /*Write/return this in JavaScript:*/ line[1]="Offline.";
                    } else {
                        //this doesn't work
                        /*Write/return this in JavaScript:*/ line[1]="Online.";
                    };
                })
            }
        });
    }

If the ajax returns with refresh_on == 0 OR refresh_on == 1 - I want it to print its respective array item. It must be an array item.

</head>
  <body>
    <script type="text/javascript">
      var line=new Array()
      startRefresh();
      //output either "line[1]=\"Offline.\""; or "line[1]=\"Online.\"";
    </script>
  </body>

This is the PHP file:

if (isset($_POST['task']) && $_POST['task'] == "reload") {
    $stmt = $connection->prepare("SELECT refresh_on FROM refresh");
    $stmt->execute();

    $result = $stmt->get_result();

    $encode = Array();
    while ($row = $result->fetch_assoc()) {
        $encode[] = $row;
    }
    echo json_encode($encode);  
}

If it matters - this is the JSON response:

[{"refresh_on":1}]

Is there a way to insert/output/print the array item using the function?

Any help would be appreciated.

What does the 1 in line[1] suposed to mean? are you making a loging system where each refresh will say Online or Offline? — cgatian
– cgatian, Commented Nov 21, 2013 at 1:56
can't do much without seeing all the pieces of the puzzle. All you have is a string showing in $.each...where's it supposed to go? It's not even assigned to a variable. What does data look like also. Mention an array...but no idea what array you are talking about to output — charlietfl
– charlietfl, Commented Nov 21, 2013 at 2:06

James Lai · Accepted Answer · 2013-11-21 02:13:16Z

1

So there's a couple things that might be going on here, but to begin, you're wrapping your variable in a quote, so all that is happening is a string is being made and immediately being dropped to the floor. Let's start off by doing something like the following:

 function startRefresh() {
        setTimeout(startRefresh, 60000);
        $.ajax({
            url: 'refresh.php',
            type: 'POST',
            dataType: 'JSON',
            data: {task: "reload"},
            success: function(data) {
                $.each(data, function(i, attr){
                    if (attr.refresh_on == 0) {
                        //this doesn't work 
                        line[1] = "Offline.";
                    } else {
                        //this doesn't work
                        line[1]= "Online.";
                    };
                })
            }
        });
    }

Now, if I recall correctly, the ajax function is going to be calling your success callback, which is going to take over your local scope. I don't believe line is going to be accessible to that callback, so we should/could actually move that callback to its own function within a closure:

<script type="text/javascript">

(function() {                                                                                                                                                                                                                      

  var line = []; 
  startRefresh();

  function startRefresh() {
    setTimeout(startRefresh, 60000);
    $.ajax({
      url: 'refresh.php',
      type: 'POST',
      dataType: 'JSON',
      data: { task: "reload" },
      success: refreshResponse
    }); 
  }

  function refreshResponse(data) {
    $.each(data, function(i, attr) {
      if (attr.refresh_on == 0) {
        line[1] = "Offline.";
      } else {
        line[1] = "Online.";
      }   
    }); 
  }

})();

</script>

We've wrapped that in a self executing function to give us some nice encapsulation to work with, and because line is in a function which refreshResponse is found, that variable should be accessible to it.

But we're not done yet!

For one, we could easily make that variable assignment a little easier, like so:

line[1] = (attr.refresh_on == 0) ? "Offline." : "Online.";

...and we're also going to want to triple up on that equality statement, just to avoid variable coercion:

line[1] = (attr.refresh_on === 0) ? "Offline." : "Online.";

Give that a shot and let's see where we're at.

answered Nov 21, 2013 at 2:13

James Lai

2,07117 silver badges15 bronze badges

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

4 Comments

ChainFuse Over a year ago

I tried this. It is currently not putting it inside of the script at all. What I need is: After the function is called - based on what the json is - the script will return either :line[1] = "Offline."; or line[1] = "Online.";

ChainFuse Over a year ago

It's kind of like writing/adding more JavaScript into the script in which the startRefresh() is being called - using JavaScript.

James Lai Over a year ago

It really depends on where you are using that line variable, in addition to how you're using it. Perhaps you could include more context in a JSFiddle?

Rob M. Over a year ago

You are still recursively calling setTimeout.

Rob M. · Accepted Answer · 2013-11-21 02:09:20Z

0

Not sure what you are expecting "line[1]=\"Offline.\""; to do, but it's not going to do anything. Perhaps you mean: line[1]= "Offline";? Try putting this line of code there instead to test that it's working: console.log('Offline');

If the line is getting executed and you see the output in your console, you would just have to target some HTML element that you want to put the "Offline" string into, for instance:

<div id="status"></div>
<script>
....
var status = document.getElementById("status");
if (attr.refresh_on == 0) {
   status.textContent = "Offline";
} else {
    status.textContent = "Online";
};
....
</script>

answered Nov 21, 2013 at 2:09

Rob M.

36.6k6 gold badges56 silver badges51 bronze badges

Collectives™ on Stack Overflow

How to print JavaScript based on Ajax request?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related