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…
PHP is a very vast language. It’s hard to say that you’ve mastered it. For example, do you know how to crop an image using GD and process web requests with XML-RPC off the top of your head? You may know one of them, but probably not both. That being said, there are a lot of resources out there that help you learn the basics of PHP – Processing forms, security, database interactions and array manipulation. I’ve compiled a list of 5 websites that I think will help you learn the ‘basics’ of PHP as well as taking them a step further.
KillerPHP.com’s Video Tutorials
I used these when I was initially learning PHP and are still a great resource today. These screencasts are typically 10 minutes long and cover the absolute basics – getting your development enviroment up and running to variables and includes.
- Local server setup
- Variables
- Arrays
- Includes
- Loops
- Form Processing
- Functions
- Sessions
- OOP
Pixel2Life’s Tutorial Index
Pixel2Life is a tutorial index where bloggers can submit their tutorials and articles. The result of hundreds of people doing this is a very large library of ‘specialised’ links. For example, at the time of writing this, the frontpage contains tutorials about Twitter, Code Igniter, Gravatars and Converting Excel to CSV with PHP.…
We all know that jQuery is great, that you can do things in 2-3 lines in jQuery that you can in 20 lines of Javascript, but is your jQuery code starting to get a bit bulky? Could you do things better?. I’m going to show you how to reduce a 20-25 line jQuery script into 3 lines by making the script dynamic, and give a few tips on improvement of your code.
What we want: When the user clicks a list item, it will show the corresponding div
http://www.php.net
http://www.asp.net
http://www.ruby-lang.org
http://www.python.org
http://www.adobe.com/products/air/
If i were a beginner and i was asked to write the script, i’d most likely code sections for each id/div such as below.. Once the specified link is clicked it’ll hide all the divs shown(the other content panels) and then it’ll fade in the relevant content panel.
$("ul#langs li#php").click(function(){
$("div#container div").hide();
$("div#container div#d_php").fadeIn("slow");
});
$("ul#langs li#asp").click(function(){
$("div#container div").hide();
$("div#container div#d_asp").fadeIn("slow");
});
This is alright.. it does the job but for each id/div you need around 3 lines of code, your also listening for alot of events (all of those clicks) which may use more memory and slow the script down in general.
Instead of listening for unique clicks(php, asp, ruby etc..), why don’t we just listen for…
Heres Part 2 of the jQuery AJAX login tutorial. If you haven’t already, i suggest you read part 1 located here.
We are going to start writing the PHP code to process the form. This is fairly basic stuff, using $_POST to get the values from the form, then checking them against pre-assigned values, if they match, then echo approved, if they don’t then echo denied.
So at the end of this stage, you will have an HTML form set up and this PHP file. You can enter the username Panzer and the password of query7 into the form and it will return Logged in.
Next tutorial, the fun part, the AJAX!
This post is in reference to the jquery drop down menu tutorial .
Someone emailed me asking if the menu could truely slide in , vertically, not how it is now with the slide on a slight angle ( using jquery’s show / hide ). Its very easy to alter the existing code to make it truely slide.
Instead of using jQuery’s show and hide functions, we just use slideDown and slideUp in replace of them. So the jQuery looks like this..
$(document).ready(function(){
$("#drop_down").hide();
$("#drop_down").animate({
opacity:0.5
});
$("a:contains('Google')").click(function() {
$("#drop_down").slideDown("slow");
});
$("#drop_down").mouseout(function(){
$(this).slideUp("slow");
});
});
This video tutorial shows how to make a basic slide in/drop down menu using jQuery. The menu itself stylishly slides in and has transparencies so you can view data behind it.
Sorry for the low sound, i was trying something different with my microphone.
Im a big Fan of PHP and one day i wanted to make a desktop application that could pull down posts and private messages from one of my forums. I didn’t want to learn a whole new language, just code the small application so i dismissed C, and looked at Python. I saw there was PyGTK, saw i wondered if there were PHP-GTK, which indeed there is.
I bought Scott Mattock’s PHP-GTK 2 book (Only to learn later that it was based on one of the early alphas) and dove straight in. Installation wasn’t hard, and i could get started straight away. I learned the hello world example first, and here it is..
There are alot of remotely hosted systems out nowadays, Zetaboards, SMF for Free and the series of IPB 1.3.1s. If you want to edit the looks of your board you need to use Javascript since you can’t access the source PHP files. You can work your way around using getElementById and the likes, or you can use jQuery. Here are some hints on how to use it.
Say you have a menu and you want to add some extra items to it. The menu code is something like..
We want to add another
beneath the element
So, in normal javascript you would need to find the unordered list with an id of navlist, then add innerHTML or a childnode of the ordered list. However in jQuery we can do this with one easy line.
$("#navlist").append("
");
That would add it to the start of the list, if we wanted it at the end we would use the prepend function.
$("#navlist").prepend("
");
What if there were a menu item we didn’t like? Say Item Four. Lets get ride of it! We could need to match the text inside the list, then hide it. With this next snippet, we are using…
Heres a quick video tutorial i made, you’ll learn the basics of jQuery such as selecting elements as well as usage of the slide effect. Feel free to ask any questions
