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.