0

I have written some PHP that successfully extracts a value from a JSON GET request (via URL with API key through an external service called 'teledu Pino').

How can I refresh that number from my WordPress page (by a button or automatically every x seconds etc) (without refreshing the whole page)? Because extracting the variables needs PHP, which is no longer active once the page has loaded. So I need to call the PHP from javascript using ajax (preferably with jquery). I get that. But after many days of trying relevant solutions from this site and others, I still don't know how to get the code right, and what needs to be separate files and where to put them exactly. Since I'm using WordPress, maybe I need to write a plugin? There must be a simple way to use ajax for this.

Here's what I do know : I have to enqueue the jquery. (as Wordpress already has jquery) > wp_enqueue_script('jquery');

I have to write a simple ajax call to the PHP with javascript (don't know if I can do this on my HTML page or it has to be a separate file uploaded to the templates folder(?)

The PHP file looks something like this :

ob_start();
$curl_handle=curl_init();
curl_setopt($curl_handle, CURLOPT_URL,'http://us01.proxy.teleduino.org/api/1.0/328.php?k={MY_API_KEY_HERE}&r=getAnalogInput&pin=14');
curl_setopt($curl_handle, CURLOPT_CONNECTTIMEOUT, 2);
curl_setopt($curl_handle, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($curl_handle, CURLOPT_USERAGENT, 'Your application name');
$Aresults = curl_exec($curl_handle);
curl_close($curl_handle);
$Adata = json_decode($Aresults, true);
$Amess = $Adata['message'];
$Astat = $Adata['status'];
$Amoisture = $Adata['response']['values'][0];
$Atime = $Adata['response']['time'];
echo $Amoisture;
echo " : ";
echo $Astat;
echo " : ";
echo $Amess;
if ($Amess == "Key is offline or invalid.") {
echo "[div class=\"cooo\"] Spike is sleeping [/div]";
}

etc. etc.

This PHP file needs to be saved with a unique name and then the ajax can call it, but I just can't seem to get it right.

The JSON get request response from the 'teleduino' is in this form :

{"status":403,"message":"Key is offline or invalid.","response":[]}

When it is online then it has a number value at the end (that I am successfully extracting with the PHP code on initial page load). I just don' t know how to call that PHP from the javascript. The only way I could get the number displayed on the web page was by installing an "allow php on pages and posts" plugin, then writing the PHP code on the page. But of course, I need a way to refresh that number with javascript / ajax.

The url that sends the get request is like : http://us01.proxy.teleduino.org/api/1.0/328.php?k={MY_API_KEY_HERE}&r=getAnalogInput&pin=16 (pin=16 is the pin on the micro-controller that has the voltage measurement).

Any ideas or help at all would be really appreciated - THANK YOU !!! :)

Purvik Dhorajiya
  • 4,662
  • 3
  • 34
  • 43
John
  • 35
  • 4
  • IMHO, you're adding information that's not really relevant. The issue is *"Add a button in a WP page that performs some Ajax"*, isn't it? ATM, the request and the response are not the real problem. . . . You can solve this using a Shortcode, check [this working example](http://stackoverflow.com/a/13614297) -if you wait a little, I'll update that answer and make a plugin out of it (using it in a theme is not a good advice). – brasofilo Oct 25 '13 at 19:19
  • Thanks b_ I totally agree, it's just that I tried everything I could find along the lines of "Add a button in a WP page that performs some Ajax" and nothing worked which lead me to think the other stuff was relevant somehow. I really look forward to seeing (and learning from) your updated answer and your plugin, would be great, thank you.. – John Oct 26 '13 at 02:23
  • It's already there, you may want to change the shortcode output and adapt the method `query_rand_post` to use your curl request (I think the `ob_start` won't be needed. – brasofilo Oct 26 '13 at 03:14

1 Answers1

0
jQuery.ajax({
    url: 'url_to_php_script.php?key=' + key,
    type: "GET",
    dataType: "json",
    success: function(data) {
        // In here you can manipulate the json data
        // if you wanted to update a label you could
        // give it an id and do something like this:
        jQuery('#id').val(data[0].identifier)
    }
});

In the php script you would do whatever logic you already do with that key.

$key = $_GET['key'];
// Logic and create array '$result'
$jSonData = json_encode($result);
header('Content-Type: application/json');
echo $jSonData;
schaefec
  • 9
  • 3