This is part 2 of a 2 part series on making a Todo List with PHP and enhancing it with jQuery’s AJAX
In part 1 of the tutorial, we covered the PHP and MySQL side of things. In this part we will be enhancing it with jQuery’s AJAX and manipulation functionality. The to-do list will degrade fine - if the user has Javascript disabled, the application will still work. All changes occur in the index.php file.
There are two parts to the script. One handles the posting of new posts, while the other handles posts being deleted. We’ll start with adding new posts.
//When the button with an id of submit is clicked (the submit button)
$("#submit").click(function(){
//Retrieve the contents of the textarea (the content)
var formvalue = $("#content").val();
//Build the URL that we will send
var url = 'submit=1&content=' + formvalue;
//Use jQuery's ajax function to send it
$.ajax({
type: "POST",
url: "process.php",
data: url,
success: function(){
//If successful , notify the user that it was added
$("ul").before("<p class='new'>You just added: <i>" + formvalue + "</i></p>");
}
});
//We return false so when the button is clicked, it doesn't follow the action
return false;
});
The url part confuses some people. What we are doing…
This is part 1 of a 2 part series on making a Todo List with PHP and enhancing it with jQuery’s AJAX
In this two part series I’m going to show you how to make a simple to-do list in PHP, and then enhance it using jQuery’s AJAX and manipulation capabilities. This won’t follow any proper coding principles, but will give you the skills to adapt the code to fit your own situations. A todo list isn’t that far away from a simple threaded forum.
It will consist of a few files.
- delete.php - delete the note.
- process.php - create the note, display the notes.
- index.html - form, javascript
We will be storing the list items in a MySQL database. The query:
CREATE TABLE `notes`
(
`id` INT PRIMARY KEY AUTO INCREMENT NOT NULL,
`content` VARCHAR(500) NOT NULL
)
index.php will only contain the form (for now). It’s a fairly basic form, it contains a textarea (where the user enters their note) and a button they hit to submit it. The information is sent to a file called process.php through the post method.
<form id="form" action="process.php" method="post">
<textarea name="content" id="content" cols="50" rows="3"></textarea>
<input type="submit" id="submit" name="submit" value="Post it" />
</form>
process.php then handles the information that was sent from the form. We…
“Whats a good jQuery menu?” is a question I hear quite frequently on blogs and forums. As jQuery is such a simple language to learn, most people code their own for their own sites. I’ve compiled a list of 3 menu plugins, and and 5 ‘custom’ solutions that people have setup.
http://p.sohei.org/jquery-plugins/menu/
Latest release: Jan 07
This plugin was constructed to emulate a desk top apps menu. They don’t close until clicked off and are activated by clicking them (rather than hovering). It requires the jQuery dimensions plugin to perform ‘smart calculations’.
Example Usage: http://p.sohei.org/stuff/jquery/menu/demo/demo.html
Download: http://p.sohei.org/jquery-plugins/menu/
http://jdsharp.us/jQuery/plugins/jdMenu/
Latest release: April 08
Although the jdMenu plugin is only 3kb itself, it depends on or looks a hell of a lot better with the plugins dimension, positionBy and bgiframe. jdMenu boasts keyboard access and can be easily made into a verticle menu by changing an option.
Example Usage & Download: http://jdsharp.us/jQuery/plugins/jdMenu/
http://users.tpg.com.au/j_birch/plugins/superfish/
Latest release: Sometime in 08
Superfish takes a CSS based dropdown then enhances it with jQuery so if the user has Javascript disabled, it degrades perfectly well. Since the menu is mainly CSS based, I’d imagine it’s a fair bit faster than the other options.
Example Usage: http://users.tpg.com.au/j_birch/plugins/superfish/#examples
Download: http://users.tpg.com.au/j_birch/plugins/superfish/#download
More menus
Plugins are useful, but a lot of the time you don’t need their…
