blog about graphic design, web design and marketing

The D. Drew Design Blog
22
jun 09

JQuery/PHP: Simple Random Text Generation Box

These instructions will show you how to create a div with a field of text in it, and upon clicking a link, will load a JQuery animation, replace the text inside the box, and then load another jquery animation.

First, you need to create two divs. For this example, I created #wrapper and #quoteContainer. I also created a button to activate the Javascript. Here's the HTML:


<div id="wrapper">
    <div id="quoteContainer"></div>
    <p id="nextButton"><a id="updateQuote" href="#">NEXT</a>
</div>


As you can see, this is a simple establishment of the elements required. You have the "wrapper" ID to identify the outer box (which will carry the animation) and the "quoteContainer" ID which currently contains no information at all, but will contain the output of a PHP script

So a couple things need to happen with this box:


  1. It needs to load the first quote when the page loads (otherwise the box will be empty when the page loads.
  2. It needs to animate, load a PHP script, and then animate again when the php script has completed.


You're going to see this series of actions in the Javascript below:


// On page load, fill the box with content.
$(document).ready(function() {
    $("#quoteContainer").load("php/randomquote.php");
});


$(document).ready(function() {

// On click of the Next button...
    $("#updateQuote").click(function(){

// Use the Slide Up animation to close the #wrapper div...
        $("div#wrapper").slideUp(function()

// Then load INTO the quoteContainer div the output of randomquote.php
            {$("#quoteContainer").load("php/randomquote.php");});

// And after that, execute the Slide Down animation
        $("div#wrapper").slideDown();
    });
});


This is obviously very simplified Javascript code for the functions it executes. I use the JQuery library because it simplifies tasks like animating boxes and calling on scripts.

Now would probably be a good time to look at that PHP script:


<?
// 'text' is the name of your table that contains
// the information you want to pull from
$rowcount = mysql_query("select count() as rows from text");

// Gets the total number of items pulled from database.
while ($row = mysql_fetch_assoc($rowcount))
{
    $max = $row["rows"];
}

// Selects an item's index at random
$rand = rand(1,$max)-1;
$result = mysql_query("select
from quotables limit $rand, 1");

$row = mysql_fetch_array($result);
$randomOutput = $row['storedText'];

echo '<p>' . $randomOutput . '</p>';
?>


In the code above, the database is being accessed, the rows of the selected table counted, and a random row number is being selected from the accessed information. It is then output through the echo statement at the bottom. The Javascript above then carries it into the div box to which it is assigned. This happens when the page is loaded, and whenever the Next button is clicked. When the page is loaded, there are no animations.

There are much more efficient ways to write this script. I simply encapsulated it to show the process of what should be done in a standard script. Ideally, global access to the array that is pulled from the database would be the best course of action; that way, you wouldn't have to make a call to the database every time the button is clicked. Here's more information about sessions, where you can find solutions.

If you have any questions or comments about my implementation of this code, please feel free to contact me.