PHP/jQuery Todo List Part 2
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 is sending a request to the process page, we need to include some data with that request. In process.php there was the line
if($_POST['submit']){
It checks to see if $_POST['submit'] isn’t null (has a value). If it is null (has no value), then it means that the form hadn’t been submitted, by sending any value, in our case submit=1, we are telling process.php that the button had been clicked so it should run the rest of the PHP script. The rest of the PHP script calls for the content, which we also send in the url (content= ‘ + formvalue). Instead of sending anything, we only want to send the value of the form (The stuff inside the textarea – that the user wants to submit). By returning false at the end, it prevents the submit button from carrying through with its action=”process.php”. If it did, it means the page would refresh when the information was sent which is exactly what we don’t want.
The code that handles the deletion of posts is similar.
//Check to see if an anchor link was clicked (The delete link)
$("a").click(function(){
//Save the link in a variable called element
var element = $(this);
//Find the id of the link that was clicked
var noteid = element.attr("id");
//Built a url to send
var info = 'id=' + noteid;
$.ajax({
type: "GET",
url: "delete.php",
data: info,
success: function(){
element.parent().eq(0).fadeOut("slow");
}
});
//We return false so the browser doesn't actually follow the link
return false;
});
When we were displaying the posts in process.php we echo’d the id of the post in the anchor tag. We are then getting this id element.attr(“id”) and building the URL. So when the AJAX call is sent, it will be something like delete.php?id=POSTID. If the AJAX call is successful, then we need to hide the list item.
element.parent().eq(0).fadeOut("slow");
In that bit of code, we select the element (anchor tag) that was clicked. We then find it’s parents and take the first one using eq(0). It’s ‘first’ parent is the list item its in (<li><a href></a></li>) and we fade that out slowly.
Demo: http://lastkarrde.com/q7todo/
Download: http://lastkarrde.com/files/q7todo.zip
You can read the first part of the series at PHP + jQuery Todo List Part 1
Subscribe to feeds
December 9, 2008
[...] You can read the second part of the series at PHP/jQuery Todo List Part 2 [...]
January 25, 2009
hi friend download link is missing
,
February 3, 2009
Mayoosuf: I’ve updated the post. The files can be downloaded from
http://lastkarrde.com/files/q7todo.zip
Enjoy!
April 7, 2009
Thanks you, it was really useful.
April 17, 2009
[...] 5. PHP + jQuery Todo List Part 1, part2 [...]
April 24, 2009
[...] recorded first by Helmeroc on 2009-03-12→ PHP/jQuery To-Do List Part 2 | Query7 [...]
June 6, 2009
[...] 5. PHP + jQuery Todo List Part 1, part2 [...]