Team Tutorials » jquery

Using jQuery to Reorder a List and Update a Database

John Ward — Wed, 30 Sep 2009 21:05:23 +0000

This tutorial will show you how to use jQuery to allow as list (UL) to be reordered and will also make an AJAX call to a PHP file that will update the database when an item is dropped. I found this useful for a project I was working on recently. The user wanted to be able to change the order that categories displayed in a report. The items are stored in a database with a field called display_order. When the report is generated we simply order by that field.

This tutorial requires:

A web server that handles PHP and MySql or setup a local Windows Apache MySql Php web server.
jQuery and jQuery UI.
Basic HTML/CSS/Javascript knowledge.

First you are going to need to download jQuery Ui. There are plenty of feature within jQuery User Interface that I will not be touching in this tutorial, but for sake of the tutorial download the entire bundle. Also I will be using the default (UI Lightness) theme.
Create a folder for this project on your server. You will need to unzip the jQuery files and put them all in this directory.

Since jQuery comes with an example called index.html I am going to name my file test.php. You can call it whatever you want. Create the file. We will use it later. We’ll set the database up first.

I like to use HeidiSQL when working with MySQL. Now on the database server I am going to create a database call test_tutorials, with a table called report_items. Here are the field properties for the report_items table:

Now populate your table with some test data. I’ll insert 6 rows. Also make sure you insert the display order starting from 0.

You can save the changes to your data base and get back to working on test.php. Open the file. We’ll start with the basic layout.





Reorder Test

Next we’ll include the stylesheet from our jQuery theme. I’ll also add some CSS from the example on the jQuery UI website. Then we’ll include the jQuery javascript files.





Reorder Test

We are going to pull the intial data from the database. In order to do this we’ll need to make a database connection. Create a new file called connect.php and create a database connection (obvious added your credentials where needed.

Save connect.php and include it into your test.php file:







Reorder Test

Now we need to retrieve the database results and dsiplay them. The items will be display in an un-ordered list. We’ll add this code to the body.


	
    $catname";
	}

	?>

Take not above. When we echo the li we are adding the ui-state-default class which is just a jQuery theme class and the span that we included is an arrow icon also provide with jQuery Ui. Where you see item_$catid, that should be your primary key from your database (this will be used later to reorder items.

Now save the file and load it in your browser. If you followed everything hopefully you will get something like this:

Now we’ll enable the sortable function on our list. Remeber I gave the UL tag an id of sortable. Add this code in the head below your jquery javascript files:

The code above enables sorting of the UL with the id #sortable. The placeholder: ‘ui-state-highlight’ tells jquery we want it to show a place holder of where we can drop the item. In the them I am using it is a yellow box. Make the changes above and save your page. You should now be able to drap and drop your list items.

Now that you have that working we can move to the AJAX call. When an item is dropped, we want to call a php file to update the database. We do that by using the stop: action. So when dragging stops, the script will call the url (updatedb.php) we provided below. To make the AJAZ called, we let jQuery do the work.

You see the ajax function above. We tell it what type of request, in this case wer’ll use get variables. We also tell it what URL, this is a php file we’ll create to update the database. Then we add the data that will be sent.

The code $(“#sortable”).sortable(“serialize”)}); will take the items within our ordered list and serialize it. It will take the items of the list, in whatever order they are in, and turn them into a get variable. So for each item it will add it to an array and format is properly to make the call to the PHP file. The data will look like this:
item[]=1&item[]=2&item[]=3&item[]=4&item[]=5&item[]=6

If you want to debug AJAX request I recommend using Firefox with the Firebug plugin. If you want to see that the request is being attempted and that what the data looks like, you can add an alert box just below the placeholder like this: alert($(“#sortable”).sortable(“serialize”));
Save the changes to you file we are done with test.php. Here is my full source of test.php up to this point.







Reorder Test










	
    $catname";
	}

	?>

Now we need to actually update the database. Create a file called updatedb.php. This file is pretty simple. We take each item in the array and then update the database based on the array position($key) and the primary key ($value)

$value) {
	mysql_query("UPDATE report_items SET Category_Display_Order = '$key' WHERE Categoryt_ID ='$value';");
}
?>

Save that file and test the reorder. If you have problems and you think it is with the AJAX call. Check fire bug. Here is an example of a bad request in this case I tried to include a file that was not there.

I hope this tutorial helped someone out

jQuery Pop Over Effects

John Ward — Sun, 07 Sep 2008 13:35:36 +0000

This tutorial we will create a pop over box using the jQuery Javascript Framework. I will demonstrate a few of the animation option in jQuery and discuss why you should or shouldn’t use them.

Disclaimer:
I will be using a transparent .png for this tutorial. Not all browsers handle the transparency right. Also some browsers, like Internet Explorer, will display the transparency fine if it is a normal image on a page. When you try to animate that image you will get the “halo” effect. You will see what I mean later. If you are using a browser that supports transparent .png file, you will need to find the .png fix for it. Here are some png fixes for IE 5-7 , you can link directly to the files hosted at Google if you would like to.

Why jQuery? Basically I used jQuery here because it is fast and simple. You could accomplish all of the effects by writing you own Javasciprt, but why do that when the makers of jQuery have done it all for you?

First you will need to download the latest version of jQuery. At the time of the post the current version is called jquery-1.2.6.min.js. Save jQuery to the same folder you will be saving your html files to, I called mine jQuery.

Next we need to layout the page. I am not going to explain all of the code in this tutorial. If you don’t understand it please see our XHTML and CSS tutorials. The part that you will want to pay attention to is the pop up. Download the box.png file here (box.png):

Here is the source code for the page layout:

jQuery Pop In

Fade Box
Show Box
Slide Box

This is the page
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam porta quam eget
turpis placerat aliquam. Praesent eget metus. Aliquam fermentum, massa a pulvinar
sodales, justo velit consectetuer purus, at vehicula magna libero quis sapien.
Praesent molestie. Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Vivamus id diam non metus euismod sollicitudin.
Duis lobortis leo vel dui. Nulla ultricies tortor at augue. Proin egestas feugiat nibh.
Maecenas a pede sed lorem vestibulum facilisis.>/p>

Curabitur venenatis tempus risus. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Praesent elit. Donec imperdiet dapibus lorem. Mauris imperdiet lacinia
lacus. Aliquam pellentesque enim ut nisl. Pellentesque tristique, augue egestas porttitor
suscipit, lacus dui tempus dui, in commodo lacus mauris non tortor. Lorem ipsum dolor sit
amet, consectetuer adipiscing elit. Duis vel neque sed nibh pharetra adipiscing. Etiam
euismod rhoncus dui. Sed ut nulla. Quisque mollis.

Praesent libero turpis, ultrices nec, blandit sed, cursus sed, augue. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec hendrerit
pretium elit. Donec eget dui in mauris lobortis viverra. Vestibulum pharetra, libero in
bibendum malesuada, ante ligula lobortis turpis, eu tempor turpis libero at lacus. Curabitur
semper, ligula non mattis semper, neque dolor fermentum arcu, quis vehicula ipsum mi sed libero.
Suspendisse potenti. Integer ut lacus nec sem hendrerit ornare. Nulla eros. Duis nec mauris.
Cras ac turpis vel ante venenatis consequat. Sed rutrum lobortis augue. Aenean mi lectus,
vulputate quis, rutrum in, pharetra id, dolor. Proin posuere pede vitae ipsum. Curabitur euismod
semper odio. Ut tristique scelerisque leo. Fusce at ante sit amet lorem pharetra viverra. In hac
habitasse platea dictumst.

Curabitur id nunc. Cras euismod, orci sed eleifend tempus, massa lacus sodales metus, vitae
tristique augue elit a tortor. Vestibulum viverra, nisi id faucibus sodales, nunc dolor condimentum
eros, et accumsan velit orci ut dolor. Donec dolor dolor, porttitor nec, porta in, rutrum vel, leo.
Suspendisse erat eros, ultricies in, auctor in, pretium vel, ante. Aliquam erat volutpat.
Vestibulum auctor ipsum ut risus. Maecenas nec sapien. Nullam eget ipsum nec sapien ornare dapibus.
Pellentesque ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames
ac turpis egestas. Integer ac pede. Phasellus eleifend malesuada nibh. Ut laoreet, mi a auctor
fermentum, magna lectus placerat ligula, a vestibulum sapien arcu non nunc. Vivamus tristique.
Vestibulum sagittis est.

Phasellus tincidunt neque et dui. Praesent sed enim. Aliquam gravida pulvinar quam. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed vitae ante nec
tellus rutrum pharetra. Praesent sodales tempus magna. Vestibulum fermentum imperdiet leo. Praesent
vel augue. Proin at nisi. Etiam volutpat venenatis ipsum. Morbi venenatis. Mauris porta elementum velit.
Pellentesque nibh dolor, molestie in, ultrices at, accumsan sit amet, massa.

So as you see we have the page with our pop box open.

Make sure that everything looks right; the box is showing and center, etc. Now we don’t want this popup to show by default so we will hide it. In the CSS we will set the display value to none on the #box. Add the line ‘display: none;’ to the existing css code.

Team Tutorials » jquery

Using jQuery to Reorder a List and Update a Database

Related Posts

jQuery Pop Over Effects

This is the page