grabing echoed data from php in ajax

Question

$(document).ready(function() {

  $(document).ready(function () {

var request = $.ajax({
    url: 'inc/everything.php',
    type: "POST",
    dataType: "html",

    success: function (data) {


        if ("row:has('tacobell');") {
            $('#oriental').html(name);

        }
    }

});
});

.encasing {
  width: 193px;
  height: 400px;
  float: left;
}
.result-ingredient {
  z-index: 13;
  width: 150px;
  margin: 10px;
  float: left;
}

 <div class=" encasing">
            <img class="result-ingredient" src="img/chicken.png">
            <div id ="chicken"> </div>
        </div>
        <div class=" encasing">
            <img class="result-ingredient" src="img/beef.png">
             <div id ="beef"> </div>
        </div>
        <div class=" encasing">
            <img class="result-ingredient" src="img/pork.png">
             <div id ="pork"> </div>
        </div>
        <div class=" encasing">
            <img class="result-ingredient" src="img/oriental.png">
            <div id ="oriental"> </div>
        </div>

<?php
include 'database.php';

   $sql = "SELECT * FROM `answers` WHERE 1 ORDER BY `choices` ASC ";

  $result = mysql_query($sql, $conn);
   if (!$result) {
         var_dump($result);
        $message .= 'DB Error occured';
        die($message);
    }

     while ($row = mysql_fetch_assoc($result)) {
      echo "Name:" . ($row['name']) . " " . "choices:" . $row['choices'];
        echo "<br>";

    }


?>     

There has to be a better way to display all of those queries in html. I want the persons name to appear under the item they chose earlier, which corresponds to a value in the database. Its not exactly working and i was wondering if i'm just going about this the wrong way?

1. Is there a way to display and sort multiple queries with less code than i'm using?
2. whats the best way to pick up the resulting code in ajax to be sent to html?

edit:

i don't know how to get ajax to pick up the right data i want. My idea was to check if any of the rows has a certain value then just post the names from that but its not working.

this is what the database prints out now

Name: trisha choices: chicken,tacobell

Name: sarah choices: chicken,mcrab,sriracha,tacobell

Name: rachel choices: chicken,peas,corn,lettuce,mcrab,sriracha,tacobell

Answer 1

Is there a way to display and sort multiple queries with less code than i'm using?

Yes. Use REGEXP to make 1 query.

SELECT `name`,`choices` AS choice_number,
    CASE 
      WHEN choices = 1 THEN  'oriental'
      WHEN choices = 2 THEN  'pork'
      WHEN choices = 3 THEN  'beef'
      WHEN choices = 4 THEN  'chicken'
      WHEN choices = 5 THEN  'shrimp'
    END as choice_string
FROM `answers` 
WHERE `choices` REGEXP '[1|2|3|4|5]';

Then, in your loop, you can use $row['name'], $row['choice_number'], and $row['choice_string'].

What's the best way to pick up the resulting code in ajax to be sent to html?

I see you're using jQuery $.ajax, which has the response of the PHP file in data (parameter of the success function), which is fine. You're then writing the data by using the html method, which I don't see a reason to change.

Answer 2

I would use JSON on the server, which makes it nicer to iterate over in the Javascript.

SELECT name FROM answers WHERE choices = 1 OR choices = 2 OR choice = 3....

Then,

 $resp = array();
 while ($row = mysql_fetch_assoc($result)) {
    $resp[] = $row;
 }
 echo json_encode($resp);

On the client side:

$(document).ready(function() {
  var request = $.ajax({
    url: 'php/everything.php',
    type: "POST",
    data: datastring,
    dataType: "json",
    success: function(data) {
      $.each(data, function (index, value) {
         $('#oriental').append(value);
      });
    }
  });
  request.done(function(msg) {
    $("#log").html(msg);
  });


});