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
– Christian Stewart, Commented Mar 5, 2013 at 0: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
– Robert Mailloux, Commented Mar 5, 2013 at 0:55

Community · Accepted Answer · 2017-05-23 11:43:22Z

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, 2017 at 11:43

CommunityBot

11 silver badge

answered Mar 5, 2013 at 0:59

artsylar

2,6785 gold badges35 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

grepsedawk Over a year ago

Isn't this more comment material than answer material?

artsylar Over a year ago

but were you able to confirm that it is getting the correct data from php?

Robert Mailloux Over a year ago

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

artsylar Over a year ago

the problem in the first place is you're not calling your php function in your code.

artsylar Over a year ago

there is no showResults in your code. do you mean showVotes? It is not being called in your code as a function.

|

grepsedawk · Accepted Answer · 2013-03-05 01:01:49Z

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>

Collectives™ on Stack Overflow

AJAX PHP Array from a SQL Database

2 Answers 2

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related