How to add records to queue with jQuery
Posted: Mon Mar 01, 2010 1:14 am
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.
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.
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 behaviour here). Read the comments to find out what each part does.
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.
Here's the JavaScript with an AJAX call to process.php added:
Conclusion
So there's a simple effect that can have many different uses.
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.
Code: Select all
<!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>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.
Code: Select all
#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;
} 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 behaviour here). Read the comments to find out what each part does.
Code: Select all
$(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;
});
}); 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.
Code: Select all
<?php
if(isset($_POST['data'])) {
// add to database or something here
$text = htmlspecialchars($_POST['data']);
echo "{'status':'success','text':'" . $text . "'}";
}
else {
echo "{'status':'failed'}";
}
?>Code: Select all
$(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;
});
}); So there's a simple effect that can have many different uses.