JS script calls a PHP script but then I can't handle the JSON for the html

Question

I'm a beginner and I'm writing a js function that every 1 second it calls a PHP script where it checks some values on mysql DB, PHP encodes them in Json, then JS again decode it and throw them into html.

I have two questions for you:

-Why do you think this code is not properly working? It only writes the first value into the <p> list.

-How can I make this scalable? Every call to the php script executes a query. I need something like realtime, but I think using this way I'll destroy my server soon xD

JS

setInterval(function(){

    $.getJSON("php/checkstatus.php", function(result){

                $("#status").html(result['status']);
                $("#tempint").html(result['tempint']);
                $("#tempext").html(result['tempext'] + " ");
                $("#humidityext").html(result['humidityext'] + " ");


        });

  },1000);

The json is like this:

{"status":"0","tempext":"25","tempint":"150","humidityext":"65"}

and the HTML is like this:

<p>status: <span id='status'>xx</span> .</p>
<p>Inside temperature: <span id='tempint'>xx</span> °C</p>
<p>Outside temperature: <span id='tempext'>xx</span> °C</p>
<p>Outside humidity: <span id='humidityext'>xx</span> </p>

`result['status']` and `result.status` are two similar things. @ReaganGallant — viral, Jul 31 '15 at 11:16

score 1 · Accepted Answer · answered Jul 31 '15 at 11:12

Possibility is, there are multiple elements with same id in your HTML for tempint, tempext and humidityext.

To debug, open browser's console, then query all four elements like,

$("#status")

and similar with the remaining three, now you will get HTML tag as a result, hover over that tag and see if your desired tag to put data on highlights or not.

If you see any other than your desired tag to highlight, that means you have elements with duplicate IDs. You need to workaround for that.

For the second question, you can give http://socketo.me/demo a try.

score 0 · Answer 2 · answered Jul 31 '15 at 11:10

0

The 'result' variable returned from your call is not an array but an object (json stands for JavaScript Object Notation). You can access them with a ".", like:

$("#status").html(result.status);

Can't help you with your second question.

answered Jul 31 '15 at 11:10

jvv

188
1
14

1

Good hint :) This was helpful for the future! – notme Jul 31 '15 at 13:45

score 0 · Answer 3 · answered Jul 31 '15 at 11:12

0

The code above seems to be fine. I tested it on the local server and it works well.

Make sure to include a jquery library, for example:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Furthermore, do you test it through a web server?

Check your console tab if you are using Google Crome and report any errors.

answered Jul 31 '15 at 11:12

JoomlaEvolved Development

381
1
2
9

Actually this solved my problems, can you explain me how? I was already including: `` – notme Jul 31 '15 at 12:09
are you sure? With works well too. – JoomlaEvolved Development Jul 31 '15 at 12:21

score 0 · Answer 4 · edited May 23 '17 at 12:06

Try using the jQuery $.ajax function instead of $.getJSON. You have access to error handling if the request fails.

function GetData() {
    $.ajax({
        url: 'php/checkstatus.php',
        dataType: 'json'
    }).done(function(result) {
        $("#status").html(result['status']);
        $("#tempint").html(result['tempint']);
        $("#tempext").html(result['tempext'] + " ");
        $("#humidityext").html(result['humidityext'] + " ");
    }); 
}
setInterval(function() { GetData(); }, 1000);

This was working for me in IE, Chrome and Firefox.

I tested with the following JSON file:

<?php
$tempext = rand(20, 100);
$tempint = rand(100, 200);
$humidityext = rand(30, 100);
echo '{"status":"0","tempext":"'.$tempext.'","tempint":"'.$tempint.'","humidityext":"'.$humidityext.'"}';

As for performance of your server, take a look at this post for an interesting option that describes how Facebook handled some of their traffic. How does facebook, gmail send the real time notification?

JS script calls a PHP script but then I can't handle the JSON for the html

4 Answers4