Issue with Ajax and JSON Response - php

Question

I'm a pretty novice programmer who is making an application where there are multiple divs with a class of jcontainer. Each jcontainer has an id associated with it, which corresponds with a field called apptid in a database. In the Jquery, I send out an AJAX request every five seconds to a php page to retrieve a field called currentlocation in the database (that corresponds with the apptid), which happens for each jcontainer.
Here is my code:
HTML:
<div class='jcontainer' data-param='jcontainer_IDNUMBER'>
<button class='checkIn' data-param='button_IDNUMBER'>Check In</button>
<form method='post' class='myForm' action=''>
<select name='locationSelect' class='locationSelect' data-param='location_IDNUMBER'>
<option value='1'>Exam Room</option>
<option value='2'>Exam Room 2</option>
<option value='3'>X-Ray Room</option>
<option value='1000'>Check Out</option>
</select>
</form>
<div class='finished' style='color:#ff0000;'>Checked Out</div>
</div>
jQuery:
<script type="text/javascript">
$(document).ready(function() {
setInterval(function(){
$('.jcontainer').each(function() {
var $e = $(this);
var dataid = $e.data("param").split('_')[1] ;
$.ajax({
url: 'heartbeat.php',
method: 'post',
contentType: "application/json",
dataType: "json",
data: dataid,
success: function(data){
var msg = $.parseJSON(response);
alert(msg);
}
});
});
},5000);
//other code that I didn't post, because it's not really relevant, but can post if needed be
and php page:
<?php
$hostname = 'localhost';
$username = '******';
$password = '*************';
$apptid = $_POST['dataid'];
$db = new PDO("mysql:host=$hostname;dbname=sv", $username, $password);
$statement = $db->prepare("SELECT currentlocation FROM schedule WHERE apptid = :apptid");
$statement->execute(array(':apptid' => $apptid));
$row = $statement->fetch();
$currentlocation = array('CurrentLocation' => $row['currentlocation']);
echo json_encode($currentlocation);
?>
The problem is I can't get any response from the alert(msg). Why is this? I checked Chrome Developer and no errors came up.
The end goal is to have the currentlocation number recorded in a jquery variable. ex -> var currentLocation = Number
Thanks for any and all help, and if you need more details to clear things up, I can happily post!

Answer 1

This block of code:
success: function(data){
var msg = $.parseJSON(response);
alert(msg);
}
should read
success: function(data){
var msg = $.parseJSON(data);
alert(msg);
}
cause the response variable is not declared and undefined so you should use the data variable in your parseJSON method as that is the actual data received. Hope this solves it for you.

Answer 2

You don't need $.parseJSON, jQuery will automatically parse the JSON since you're telling it dataType: "json". Your alert should then say Object. Use your browser console, and console.log(data) to see the object's structure.

Answer 3

You should use $.getJSON()
$.getJSON("heartbeat.php?jsoncallback=?",
{dataid},
function(data){
console.log(data);
}
);
Then in your PHP, you have to use the jsoncallback like so:
echo $_GET['jsoncallback'].'('.json_encode($currentlocation).')';
Two things to notice here.
1, I put the return from the json data in the console, rather than alert()
2, You might need to check you dataid variable as it uses traditional array values (id:3,key:value) method rather than "id=3&key=vaule"

Answer 4

you may use my library that does that for you automatically http://phery-php-ajax.net
function heartbeat($data){
$r = new PheryResponse;
$hostname = 'localhost';
$username = '******';
$password = '*************';
$apptid = $data['id'];
$db = new PDO("mysql:host=$hostname;dbname=sv", $username, $password);
$statement = $db->prepare("SELECT currentlocation FROM schedule WHERE apptid = :apptid");
$statement->execute(array(':apptid' => $apptid));
$row = $statement->fetch();
// If you want to manipulate the DOM inside the jcontainer use:
// $r->this()->find('.locationSelect');
// for examplee
return $r->set_var('currentLocation', $row['currentlocation']); //set the global var
}
Phery::instance()->set(array(
'heartbeat' => 'heartbeat'
))->process();
And you'd change your HTML to fit the Phery library
<div class='jcontainer' data-remote='heartbeat' data-args="<?php echo Phery::args(array('id' => $number)); /* place your number in here */ ?>" id='jcontainer_IDNUMBER'>
<button class='checkIn' data-param='button_IDNUMBER'>Check In</button>
<form method='post' class='myForm' action=''>
<select name='locationSelect' class='locationSelect' data-param='location_IDNUMBER'>
<option value='1'>Exam Room</option>
<option value='2'>Exam Room 2</option>
<option value='3'>X-Ray Room</option>
<option value='1000'>Check Out</option>
</select>
</form>
<div class='finished' style='color:#ff0000;'>Checked Out</div>
</div>
And your new jquery each will be:
$('.jcontainer').each(function(){
var $this = $(this);
$this.phery('remote'); // call the remote AJAX with the data
});
if you want to check the data in the dev console, you can use, the PHP variable will be dumped in the console
$r->dump_var($row, $apptid);