Add Records to a Queue with jQuery

5Aug/094

Add Records to a Queue with jQuery

This tutorial will explain how to make an animated "add to queue" type functionality with jQuery. Since it is hard to explain the results, check out the demo. First, I'll show how to create the actual effect, and then how to implement AJAX submission to a back-end script for database storage or some other processing.

The HTML

Here is the HTML for the project. It includes a form with a text field, and a div to contain the queue. We also included the jQuery library from Google.

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<title>jQuery Add to Queue</title>
</head>
<body>
<h1>jQuery Add to Queue</h1>
<form id="form" method="post" action="process.php">
  <label for="input">Add to queue:</label>
  <input type="text" name="input" id="input">
  <input type="submit" name="Submit" id="submit" value="Add!">
</form>
<h2>Queue: </h2>
<div id="queue"></div>
</body>
</html>

The CSS

Here is some basic CSS to style the queue. #queue styles the container, and #queue > div styles direct descendant divs. An important thing to note is the display: none; at the end, which is needed for our animation to show.

#queue {
	background-color: #CCCCCC;
	padding: 6px;
	border: 1px solid #000000;
}
#queue > div {
	background-color: #66CC66;
	border: 1px solid #FFFFFF;
	margin: 4px;
	padding: 4px;
	display: none;
}

The JavaScript

Here is the code to handle processing the form, creating a new div element, and prepending it to the queue with an animation. To create a new element, we just need to pass the raw HTML as if it were a selector (read about this behavior here). Read the comments to find out what each part does.

$(document).ready(function() {
 
   // wait for form submission
   $("#form").submit(function() {
 
      // get the input element and text
      var input = $("#input");
      var text = input.val();
 
      // check if text was entered
      if(text.length > 0) {
 
         // create a new div element, add it to queue and animate
         var element = $('<div>' + text + '</div>');
         element.prependTo("#queue").slideDown();
 
         // clear input field
         input.val('');
      }
 
      // prevent default form action
      return false;
   });
});

Adding AJAX

Let's say you want to send the data to a PHP script to process the data. Take this script, which returns a JSON object indicating success or failure with a cleaned version of the original text. You can easily add it to a database or something as well.

<?php
if(isset($_POST['data'])) {
   // add to database or something here
   $text = htmlspecialchars($_POST['data']);
   echo "{'status':'success','text':'" . $text . "'}";
}
else {
   echo "{'status':'failed'}";
}
?>

Here's the JavaScript with an AJAX call to process.php added:

$(document).ready(function() {
 
   // wait for form submission
   $("#form").submit(function() {
 
      // get the input element and text
      var input = $("#input");
      var text = input.val();
 
      // check if text was entered
      if(text.length > 0) {
 
         //post data to process.php and get json
         $.post('process.php', { data: text }, function(data) {
 
            // if process.php returns success
            if(data.status == 'success') {
 
               // create a new div element, add it to queue and animate
               var element = $('<div>' + data.text + '</div>');
               element.prependTo("#queue").slideDown();
 
               // clear input field
               input.val('');
            }
         }, 'json');
      }
 
      // prevent default form action
      return false;
   });
});

Conclusion

So there's a simple effect that can have many different uses. Let me know if you find a good use for it, or if you have suggestions for improvements!