AJAX PHP Array from a SQL Database - php

Question

*I know MYSQL is depricated. I am just using it as a learning tool for now.
UPDATED QUESTION:
I updated my question to make a lil more sense...
How can I display the output array (json data in PHP file) on my HTML page assuming I wanted to add it to the div id rvotes?
JavaScript
<script>
$(document).ready(function () {
$('.answer').click(function (e) {
var color = $(this).attr("data-color");
$.ajax({
type: 'POST',
url: 'mm.php',
data: { color: color},
dataType: 'json',
cache: false,
success: function(showVotes) {
$('#rvotes').html(row[0]);
},
error: function (jqXHR) {
}
})
})
});
</script>
PHP
function showVotes()
{
$sql = "SELECT * FROM mms";
$result = mysql_query($sql) or die(mysql_error());
$showresult = mysql_query("SELECT * from mms") or die("Invalid query: " . mysql_error());
$response = array();
while($row = mysql_fetch_assoc($showresult))
$results[] = $row;
echo json_encode($results);
}
ADDING my HTML code
<div id="wrapper">
<div id="red" data-color="red" class="answer">
<img src="images/red.jpg" width="100%" />
</div>
<div id="blue" data-color="blue" class="answer">
<img src="images/blue.jpg" width="100%" />
</div>
<div id="green" data-color="green" class="answer">
<img src="images/green.jpg" width="100%" />
</div>
<div id=rvotes>
TEST
</div>
<div id=bvotes>
TEST
</div>
How can I display the output from the array back at my HTML page?

Answer 1

I think this is similar to this question.
Get data from php array - AJAX - jQuery
You cannot access the php array as it is in your ajax. You need to represent it first as JSON by passing your php array to json_encode() function and echo it.
echo json_encode($results);
And it will be passed to your ajax callback as parameter.
In you success ajax callback,
success: function(showVotes) {
$('#rvotes').html(showVotes[0]);
},

Answer 2

Personally, I would have my php spit out pre-rendered html like so:
$sql = "SELECT * FROM mms";
$result = mysql_query($sql) or die(mysql_error());
//I cleaned up redundant queries here...
//echo top border
echo "<table border='1'>
<tr>
<th>Color</th>
<th>Votes</th>
</tr>";
while($row = mysql_fetch_assoc($showresult))
while($row = mysql_fetch_assoc($showresult)
{
echo "<tr>";
echo "<td>" . stripslashes($row['color']) . "</td>";
echo "<td>" . stripslashes($row['votes']) . "</td>";
echo "</tr>";
}
After it spits out html, just do this:
<script>
$(document).ready(function () {
$('.answer').click(function (e) {
var color = $(this).attr("data-color");
$.ajax({
type: 'POST',
url: 'mm.php',
data: { color: color},
success: function (showVotes) {
$("#votes").html(showVotes); //this edits the text inside the div to be whatever your php spits out
},
error: function (jqXHR) {
}
})
})
});
</script>
<div id="votes></div>