AJAX PHP Array from a SQL Database

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">
<a href="#"><img src="images/red.jpg" width="100%" /></a>
</div>

<div id="blue" data-color="blue" class="answer">
<a href="#"><img src="images/blue.jpg" width="100%" /></a>
</div>

<div id="green" data-color="green" class="answer">
<a href="#"><img src="images/green.jpg" width="100%" /></a>
</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?

MySql itself is just fine. Also, I agree with @JohnConde - what are you asking? — Christian Stewart, Mar 05 '13 at 00:50
I edited the text. Basically I am trying to retrieve the data that is in the PHP array on the PHP page and pull it into the HTML doc. — Robert Mailloux, Mar 05 '13 at 00:55

score 4 · Accepted Answer · edited May 23 '17 at 11:43

4

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]);
},

edited May 23 '17 at 11:43

Community

1
1

answered Mar 05 '13 at 00:59

artsylar

2,648
4
34
51

Isn't this more comment material than answer material? – grepsedawk Mar 05 '13 at 01:02
1

but were you able to confirm that it is getting the correct data from php? – artsylar Mar 05 '13 at 02:01
The #rvotes is my div.... my sql seems fine, it is returning [{"id":"1","color":"red","votes":"34"},{"id":"2","color":"blue","votes":"28"},{"id":"3","color":"green","votes":"41"}] if you seperately load the php page and print it – Robert Mailloux Mar 05 '13 at 02:03
the problem in the first place is you're not calling your php function in your code. – artsylar Mar 05 '13 at 02:33
there is no showResults in your code. do you mean showVotes? It is not being called in your code as a function. – artsylar Mar 05 '13 at 02:44
refer to this example to get you started with calling php function from ajax. http://stackoverflow.com/questions/11384496/call-php-function-from-ajax-not-working – artsylar Mar 05 '13 at 02:45
http://api.jquery.com/jQuery.ajax/ success Type: Function( PlainObject data, String textStatus, jqXHR jqXHR ) A function to be called if the request succeeds. The function gets passed three arguments: The data returned from the server, formatted according to the dataType parameter; a string describing the status; and the jqXHR (in jQuery 1.4.x, XMLHttpRequest) object. As of jQuery 1.5, the success setting can accept an array of functions. Each function will be called in turn. This is an Ajax Event. – artsylar Mar 05 '13 at 03:05

score 0 · Answer 2 · answered Mar 05 '13 at 01:01

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>

AJAX PHP Array from a SQL Database

2 Answers2