CODEWITHSUNDEEP
javascriptphpjquery
Paul
Paul

Reputation: 3368

How to get PHP shuffle results to show up one at a time throughout shuffle

Say I have 10 items in my db that I am trying to shuffle, how could I alter my current code so that every time it pulls a name out of the db that it shows up one at a time, rather than all at once?

$con = mysqli_connect("XXX", "XXX", "XXX", "XXX");
$query = mysqli_query($con, "SELECT * FROM users WHERE `group` = 3");

echo 'Normal results: <br>';
$array = array();
while ($row = mysqli_fetch_assoc($query)) {
    $array[] = $row;
    echo $row['firstname'] . ' ' . $row['lastname'] . '<br>';
}
?>
<form method="post">
    <input type="submit" value="Shuffle" name="shuffle">
</form>
<?php
if (isset($_POST['shuffle'])) {
    shuffle($array);
    echo 'Shuffled results: <br>';
    foreach ($array as $result) {
    $shuffle_firstname = $result['firstname'];
    $shuffle_lastname = $result['lastname'];
?>

<div id="shuffle_results">
        <?php echo $shuffle_firstname . ' ' . $shuffle_lastname . '<br>';?>
</div>
 <?php   }
}

//What I added in and this is the spot I added it as well

$get_shuffle = array($array);
$shuffle_one = array_pop($get_shuffle);
print_r($get_shuffle);
?>

I want them all to stay put once they have shown.. I just want all of them to come out one at a time. Say, there is 10 pieces of paper in a bag and you are drawing one at a time and then put the pieces of paper on a table to show what was drawn, that is what I want.

Upvotes: 0

Views: 246

Answers (1)

Matthew Herbst
Matthew Herbst

Reputation: 32013

As a follow up to my comment suggesting you use JavaScript instead of PHP for the animation, here is a basic way to do it. (This code assumes you have jQuery on the page).

Note: I haven't tested this code and there is likely a bug or two, but I hope you get the general idea.

Your HTML

<div id="shuffle_results"></div>
<form onsubmit="getData()">
    <input type="submit" value="Shuffle" name="shuffle">
</form>

Your PHP

$con = mysqli_connect("localhost", "root", "", "db");
$query = mysqli_query($con, "SELECT * FROM users WHERE `group` = 3");

$array = array();
while ($row = mysqli_fetch_assoc($query)) {
    array_push($array, $row);
}

header('Content-Type: application/json');
echo json_encode($array);

Your JavaScript

function getData() {
  $.ajax({
    url: 'url to PHP script',
    dataType: 'json',
    success: function(data) {
      for(var i = 0, l = data.length; i < l; ++i) {
        window.setTimeout(addResult, 2000, data[i].firstname, data[i].lastname);
      }
    },
    error: function(jqXHR, textStatus, error) {
      alert('Connection to script failed.\n\n' + textStatus + '\n\n' + error);
    }
  });
}

function addResult(firstname, lastname) {
  $('#shuffle_results').append("<p>" + firstname + " " + lastname + "</p>");
}

The basic idea here is that you shouldn't use PHP to do DOM manipulation. PHP can load data into your webpage (and that data can be DOM elements, JSON data as I have shown, or other types of data), but once there JavaScript should be used to interact with it. Recall, PHP runs on your server, while JavaScript (traditionally) runs in the client's web browser.

Upvotes: 1

Related Questions