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…

PHP + jQuery Todo List Part 1

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…

jQuery UI

For those of you with no jQuery background what-so-ever, jQuery UI is a series of user interface (UI) enhancements made in Javascript. These range from tabs (which also support ajax loading), to dialog boxes which you can drag, drop and resize. All cross browser! Although its currently still under development the finish line is in sight for the 1.5 release. I encourage everyone to check it out, it can add some really professional effects to your website for minimal lines of code.

jQuery AJAX Tutorial Pt2

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!

jQuery AJAX Login Series Pt1

Heyo. This is going to be the first of 4 tutorials on making a jQuery powered AJAX login system with a PHP backend. The series of tutorials will go like so.

1. Plan, code the form (This tutorial)
2. Code the PHP backend, make it work
3. Code the AJAX, implement it.
4. Tidy it up, make it look snazzy

Ok then. So we will have a forum with 2 inputs; username and password. The user will enter the details and we’ll use PHP to authenticate them. If its true, we can set a cookie or echo some text. We will then implement jQuery’s AJAX and make the whole thing seemless. Some nice little fades will be added at the end.

So, the form. Its a plain and simple HTML form. Nothing special about it.

Username:
Password:

Thats all for now. Next lesson we will code the PHP and “make it work“.

Revising the jQuery Drop Down

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");

});
});

Making a Slide in Menu using jQuery (Video tutorial)

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.

Manipulation in jQuery

So far you should have read/watched:

• Basics of jQuery and Slides
• Using Selectors to Select HTML Elements in jQuery

So you know the very basics of jQuery, and multiple ways to select the HTML element that you want to manipulate. In this tutorial i’ll show you how to manipulate that element after you have selected it; changing the contents, changing the HTML and getting values. I won’t be showing you slides/effects , that’ll be in a tutorial coming up.

I will be using the HTML example from the selectors tutorial, and ill only be calling on cells by using their id - im focusing on the manipulation rather than the selecting. Anywho, lets get into it. First the HTML code we’ll be manipulating.

One
Two
Three
Four
Five

Ok, say we want to change the text value of a column. We can do this using text() . Take note that text does not parse HTML, it keeps it as plain text.

$("#3").text("wowow");

This changes the value of the #3 td to wowow

What if we wanted to put some HTML in their, mayby make some text bold? We use the html function, very much alike the text function except that it parses the HTML. So the text “cool this is bold” is bolded.

$("#2").html("cool this is bold");

Lets say we…

Selectors in jQuery

In this tutorial i’ll go over some of the frequently used Selectors and show you how to use them. Most of jQuery’s manipulations revolve around selectors, so it’s a vital skill to know.

One
Two
Three
Four
Five

So.. we want to select the first td. We do this by first selecting all the td tags and then use :first to select the first td. Using jQuery’s great chaining ability, we change the text.

  $("td:first").text("This is the altered first box");

jQuery also has :odd and :even selectors. This will select the odd or even id’s. In this next example. We are selecting all of the odd td’s , and then select the first one of them. Again , we use jQuery’s chainability.

 $("td:odd:first").text("We changed this using odd and first");

You need to be aware that selecting the odds/evens does not use the element ids. It just counts them. It starts from 0 and starts counting, not from 1. This is why it changes the second cell using the method above.

Now, lets match the next one by specific text. We can do this using the :contains selector. We look in all td elements, then in them we look for the word Three , if we find it we replace the text.

$("td:contains('Three')").text("we matched the text, then changed it.");

We can…

Remotely Hosted? No Problem

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..

Item two
Item three
Item four
Item five

We want to add another

Item Six

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("
A Custom item

");

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("
A Custom item

");

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…