I'm using a digital signage player that allows me to use HTML and javascript to display things , in my case I'm building a menu board with a list of products and prices. I've already created a php system to create entries for products and prices and those values are stored in a MySQL database. What I would like to do is have a PHP script output the mysql data in JSON format, then have a cross domain ajax request for the products and prices to display on the menu board. Unfortunately the menu board cannot support PHP so I have to improvise and get the data through JSON. I've been pulling my hair the past couple of hours trying to figure this out but I can't seem to get it. Any help would be appreciated.
<h2>EDIT 1</h2>
I have a php script and html file but can't seem to have the data show. Here are the files below
<strong>showjson.html</strong>
<strong>api.php</strong>
<strong>EDIT 2</strong>
This code give me an alert with success so I know it works.
I'm trying to get a few values like postID, postProduct, and postPrice from JSON, but I can't seem to figure it out. I'm very new to jQuery/AJAX etc.
<strong>EDIT 3</strong>
What I'm basically trying to do is take this project: <a href="http://tournasdimitrios1.wordpress....with-php-from-mysql-and-parse-it-with-jquery/" rel="nofollow">http://tournasdimitrios1.wordpress....with-php-from-mysql-and-parse-it-with-jquery/</a> and make it work cross domain. That is all I need.
<strong>EDIT 4</strong>
This is the output of the api.php file. It's throwing an error "Notice: Undefined Index"
<h2>EDIT 1</h2>
I have a php script and html file but can't seem to have the data show. Here are the files below
<strong>showjson.html</strong>
Code:
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$.ajax({
url:"http://localhost/blakewilson/api.php",
dataType: 'jsonp', // Notice! JSONP <-- P (lowercase)
success:function(json){
// do stuff with json (in this case an array)
$("#userdata tbody").html("");
$.getJSON(url,function(data){
$.each(data.members, function(i,user){
var tblRow =
"<tr>"
+"<td>"+user.postID+"</td>"
+"<td>"+user.postProduct+"</td>"
+"<td>"+user.postPrice+"</td>"
+"</tr>" ;
$(tblRow).appendTo("#userdata tbody");
},
error:function(){
alert("Error");
}
});
</script><strong>api.php</strong>
Code:
<?php
$link = mysql_pconnect("localhost", "root", "") or die("Could not connect");
mysql_select_db("dn_name") or die("Could not select database");
$arr = array();
$rs = mysql_query("SELECT * FROM products");
while($obj = mysql_fetch_object($rs)) {
$arr[] = $obj;
}
echo $_GET['callback']."(".json_encode($arr).");"; // 09/01/12 corrected the statement
?><strong>EDIT 2</strong>
This code give me an alert with success so I know it works.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery PHP Json Response</title>
<style type="text/css">
</style>
</head>
<body>
<div id="msg"></div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$.ajax({
url:"http://localhost/blakewilson/api.php",
dataType: 'jsonp',
success:function(json){
alert("Success");
},
error:function(){
alert("Error");
}
});
</script>
</body>
</html>I'm trying to get a few values like postID, postProduct, and postPrice from JSON, but I can't seem to figure it out. I'm very new to jQuery/AJAX etc.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery PHP Json Response</title>
<style type="text/css">
</style>
</head>
<body>
<div id="msg"></div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$.ajax({
url:"http://localhost/blakewilson/api.php",
dataType: 'jsonp',
success:function(json){
// loop through the productg here
$.each(json.members,function(i,dat){
$("#msg").append(
'<div class="members">'+
'<h1>'+dat.postID+'</h1>'+
'<p>Firstname : <em>'+dat.postProduct+'</em>'+
'<p>SurName : <em>'+dat.postPrice+'</em></p>'+
'<hr>'+
'</div>'
);
});
},
error:function(){
alert("Error");
}
});
</script>
</body>
</html><strong>EDIT 3</strong>
What I'm basically trying to do is take this project: <a href="http://tournasdimitrios1.wordpress....with-php-from-mysql-and-parse-it-with-jquery/" rel="nofollow">http://tournasdimitrios1.wordpress....with-php-from-mysql-and-parse-it-with-jquery/</a> and make it work cross domain. That is all I need.
<strong>EDIT 4</strong>
This is the output of the api.php file. It's throwing an error "Notice: Undefined Index"
Code:
Notice: Undefined index: callback in E:\xampp\htdocs\blakewilson\api.php on line 13
([{"postID":"8","postProduct":"Synthetic Oil Change","postDollar":"29","postCents":"95","postDate":"2014-08-12 12:11:00"},{"postID":"9","postProduct":"Tire Rotation","postDollar":"16","postCents":"95","postDate":"2014-08-12 12:11:10"},{"postID":"10","postProduct":"Rotate and Balance","postDollar":"39","postCents":"95","postDate":"2014-08-12 12:11:21"},{"postID":"11","postProduct":"4-Wheel Alignment","postDollar":"79","postCents":"95","postDate":"2014-08-12 12:11:35"},{"postID":"12","postProduct":"Cooling System Service","postDollar":"129","postCents":"95","postDate":"2014-08-12 12:11:51"},{"postID":"13","postProduct":"Transmission Flush","postDollar":"189","postCents":"95","postDate":"2014-08-12 12:12:07"},{"postID":"14","postProduct":"AC Performance Service","postDollar":"69","postCents":"95","postDate":"2014-08-12 12:12:19"}]);