Advertise here with BSA

jQuery UI is a great addition to jQuery JavaScript framework with the widgets and customization it offers.

If you're looking for alternative widgets, Wijmo, which is a set of 30 items, can be the one.

It has 2 versions where the "Open" version has ~15 free to use items and the "Complete" version, which is commercial (or free for GPL licenses apps), includes the full set.

Wijmo's "Open" version has many frequently used widgets like accordion, calendar, progress bar, slider, tabs, tooltip and more.

They make use of the jQuery UI CSS Framework and they are Themeroller-ready.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Advertise here with BSA

jStackMenu is a jQuery UI widget which transforms the children of any element into a beautiful stack menu.

The menu opens with a smooth animation and it is possible to control:

• when it opens and closes
• the direction it opens
• the size of the arc
• the time it takes to open

In order customize it more, it also has support for events.

The widget uses CSS transforms for creating the arcing and for browsers that doesn't support the feature, it displays the menu as a straight line.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Advertise here with BSA

jQuery UI Multiselect is a widget that converts html multiple select inputs into slicker interfaces.

It makes searching within the options possible which is very functional for large lists & selected items can be re-ordered by drag’n drops.

It can display the number of selected items & for an easier selection, there are select all/deselect all links provided.

The widget is unobtrusive & and be styled with ThemeRoller.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Advertise here with BSA

IxEdit is an easy-to-use & free tool which aims to simplify the implementation of interactions on a web page, specially for anyone who is not experienced in JavaScript.

This interaction design tool is built with JavaScript & needs to be embedded into the webpage being edited. With the help of a modal-box-like interface, interactions created will be applied instantly.

Rather than totally new scripts, IxEdit generates jQuery & jQuery UI code using the parameters specified.

Interactions are stored in a local database (Google Gears), so, anything created won’t be lost even if the page is refreshed or closed.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Advertise here with BSA

After publishing ScheduledTweets yesterday, I received e-mails asking "how the drag’n drop & saving the new positions to the database was working".

Drag’n drop generally looks hard-to-apply but it is definitely not by using JavaScript frameworks. Here is, how it is done by using jQuery & jQuery UI:

The Database:

We create a simple database as below:

The most important column in the database is recordListingID which shows us the order of the records.

This feature can be applied to any table by adding such a column to it.

The HTML:

We’ll be using an unordered list that is generated from a PHP query that lists the items according to the recordListingID value mentioned above.

Here it is:

</p>
<div id="contentLeft">
<ul>
    <li id="recordsArray_&lt;?php echo $row['recordID']; ?&gt;">&nbsp;</li>
</ul>
</div>
<p>

The JavaScript:

We will be using jQuery UI’s sortable plugin.

 <script type="text/javascript">
$(document).ready(function(){ 

	$(function() {
		$("#contentLeft ul").sortable({ opacity: 0.6, cursor: 'move', update: function() {
			var order = $(this).sortable("serialize") + '&action=updateRecordsListings';
			$.post("updateDB.php", order, function(theResponse){
				$("#contentRight").html(theResponse);
			});
		}
		});
	});

});
</script> 

We made the unordered list inside #contentLeft a sortable item, used the serialize function of jQuery to create the array and posted it to updateDB.php.

The PHP:

After posting the array of "new order of the items" to updateDB.php, we must run a query to update our database that will reflect the last positions of every item:

<?php
require("db.php");

$action 				= $_POST['action'];
$updateRecordsArray 	= $_POST['recordsArray'];

if ($action == "updateRecordsListings"){

	$listingCounter = 1;
	foreach ($updateRecordsArray as $recordIDValue) {

		$query = "UPDATE records SET recordListingID = " . $listingCounter . " WHERE recordID = " . $recordIDValue;
		mysql_query($query) or die('Error, insert query failed');
		$listingCounter = $listingCounter + 1;
	}

	echo '<pre>';
	print_r($updateRecordsArray);
	echo '</pre>';
	echo 'If you refresh the page, you will see that records will stay just as you modified.';
}
?>

You can see that this is the easiest part. We handled the array as $updateRecordsArray and used it inside a for each statement.

With a new variable named $listingCounter, while the for each statement runs, we have updated the values of recordListingID column of every item in the database with $listingCounter values. And that’s it.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)