Ajax Updates

---

• JavaScriptMVC – Include
• New Sort Table Rows with Ajax
• Open Source Carousel Like Widgets

(table header) a (table body) and (table footer) like the following example:

JavaScriptMVC – Include Posted: 26 Aug 2009 08:12 AM PDT Include makes it simple to include and compress JavaScript files no matter how complex the dependencies. Focus on organization with logically separated JavaScript files. Relative Paths Instead of including files relative to the current page’s url, Include loads files relative to your JavaScript files’ urls. Forget about scanning the page’s script tags for your library’s path. Include lets you organize your scripts however you want. relative paths Script dependencies with relative paths Compress Anything Easily Include uses Dean Edwards’ Packer to automatically compress your JavaScripts. Never write another server-side compression script. Switch on compress mode and your entire application compresses. The files to compress are determined at runtime, so you can easily compress large libraries with conditional plugins, like TinyMCE.  Javascript |   copy code | ?   1 <script src="include.js?myapp,compress" type="text/javascript"></script> Turn on compress mode  Javascript |   copy code | ?   1 // include 3 JavaScript files 2 include('../prototype','scripts/jquery','myapp'); 3 if(selected_plugins['fullscreen']); 4 include('dependencies','fullscreen'); 5 // conditionally include plugin 6 if(selected_plugins['search']); 7 include('search'); Highlights * Consistent script loading order for all browsers (last-in-first-out) * FF 1.5+, IE 6+, Opera 9, Safari 3. * Works with libraries like Prototype and jQuery. * MIT license. * 3 KB compressed. * Scripts visible in Firebug. Ruby Compressor Script Some users want to automate their compression in a server-side deployment script, like Capistrano. For this purpose, use Include in combination with this Ruby compressor script. Download the Ruby compressor script and read the included readme.txt file for usage instructions. Download: http://javascriptmvc.com/include_ruby/include_ruby.zip Source: http://javascriptmvc.com/learningcenter/include/index.html Related Listings: Image Gallery with Automatic Thumbnails Rails is a web-application framework that includes everything needed to... Jaxer : Ajax Server Use the same ubiquitous set of languages you find in... UIZE Javascript API Interface UIZE (pronounced “you eyes”) is a powerful, open source, object...

New Sort Table Rows with Ajax Posted: 26 Aug 2009 07:47 AM PDT Simple sort script using Stuart Langridge’s sortabe.js Some days ago I was looking for a good and simple way to sort data into a table with a simple click on table headers and I found this interesting framework: Stuart Langridge’s sorttable.js. This tutorial explains how to use it in your projects: Step 1: include sorttable.js Create a new page and include in the tag a link to sorttable.js: Step 2: HTML code to design a sortable table Create a new table and add “sortable” in the table class parameter: … If, in the same page, you have more than one table, you can apply this class to all tables you want to sort. The general structure for each table you want to sort contains a

HTML |

copy code |

?

01	<table class="sortable">
02	<!-- Table Header -->
03	<thead>
04	<tr>
05	<th>Company</th>
06	<th>Ticker</th>
07	</tr>
08	</thead>
09
10	<!-- Tabel body-->
11	<tbody>
12	<tr>
13	<td>Apple Inc</td>
14	<td>AAPL</td>
15	</tr>
16
17	<tr>
18	<td>GoogleInc</td>
19	<td>GOOG</td>
20	</tr>
21	</tbody>
22
23	<!-- Tabel footer-->
24	<tfoot>
25	<tr>
26	<td>Total</td>
27	<td> 00.00</td>
28	</tr>
29	</tfoot>
30	</table>

When you click on a header (in this simple example "Company" or "Ticker") all rows within tag will be sort in ascending or decreasing order.

Step 3: populate table rows with data using PHP
You can populate a table with some data using a server-side language such as PHP, Coldfusion, ASP or similar. If you use PHP you can use this simple code:

 PHP | 
 copy code |
?
 
01
< ?php 
02
// Include connection to your database 
03
include('dbconnection.php'); 
04
$getCompany_sql = 'SELECT * FROM COMPANY'; 
05
$getCompany= mysql_query($getCompany_sql);?> 
06
 
07
<table class="sortable"> 
08
<!-- Table Header --> 
09
<thead> 
10
<tr> 
11
<th>Company</th> 
12
<th>Ticker</th> 
13
</tr> 
14
</thead> 
15
 
16
<!-- Tabel body--> 
17
<tbody> 
18
< ?php while ($row = mysql_fetch_array($getCompany)) {?> 
19
<tr> 
20
<th>< ?php echo $row.['companyName'] ?></th> 
21
<th>< ?php echo $row.['companyTicker'] ?></th> 
22
</tr> 
23
< ?php } ?> 
24
</tbody> 
25
 
26
<!-- Tabel footer--> 
27
<tfoot> 
28
<tr> 
29
<td> ... </td> 
30
<td>.... </td> 
31
</tr> 
32
</tfoot> 
33
</table> 
34

Download: http://www.box.net/shared/53al1imrk4
Source: http://woork.blogspot.com/2008/02/sort-table-rows-using-ajax.html

Related Listings:

1. Expandable Table Rows using jQuery This page lists some tips, tricks, and code samples for...
2. Table Sorter 2.0 tablesorter is a jQuery plugin for turning a standard...
3. Standardista Table Sorting Standardista Table Sorting is a JavaScript module that lets you...

Open Source Carousel Like Widgets

Posted: 26 Aug 2009 07:33 AM PDT

One of the most common problems a web developer usually face is related to continuously rotate a fragment of content. It can be a presentation of headlines, small fragments of news or a list of thumbnails. The nature of the thing being rotated doesn’t matter too much here because all those kind of applications share always the same idea: Rotating. This objective can be achieve in different ways like fading and scrolling. Well here is iCarousel becomes useful. It’s a one step forward trying to generalize all those types of widgets providing a rich presentation and making the task easy to be done.

Browser compatibility:

iCarousel is compatible and tested in Internet Explorer, Firefox (and its mozilla friends), Opera and Safari (thanks Kamicane for testing it). But it should work in other browsers too… If you successfully find another compatible browser, please let me know
features:

iCarousel is fully configurable. You can change any default option just initializating the class with an object in JSON. The following options are available:

* (object) animation
o (string) type (default “fadeNscroll”, values: ["fadeNscroll", "scroll", "fade"]).
o (string) direction (default “left”, values: ["top", "left"]) – required only by “scroll” type.
o (int) amount (default 1) – The amount of items to scroll :: required only by “scroll” type.
o (function) transition (default Fx.Transition.Cubic.easeInOut).
o (int) duration (default 500)
o (object) rotate
+ (string) type (default “manual”, values: ["manual", "auto"]).
+ (int) interval (default 5000 ms) – required only by “auto” type.
+ (string) onMouseOver (default “stop”, values: ["stop", "proceed"]) – required only by “auto” type.
* (object) item
o (string) klass (default “item”)
o (int) size (default 100) – The relevant size of item :: required only by “scroll” type.
* (string) idPrevious (default “previous”)
* (string) idNext (default “next”)
* (string) idToggle (default “toggle”)

How to use:

First of all, iCarouse is built over MooTools v1.1, so both libraries are required.
Get MooTools at http://mootools.net and iCarousel here. Use IceBeat Packito to see mootools dependences.
With scripts in hands, include them between your “head” definition:

 HTML | 
 copy code |
?
 
01
<head> 
02
. 
03
. <!--// codes here //--> 
04
. 
05
  <script type="text/javascript" src="js/mootools.js"></script> 
06
  <script type="text/javascript" src="js/icarousel.js"></script> 
07
. 
08
. <!--// and here //--> 
09
. 
10
</head> 
11
	

Initialize the iCarousel class:

 Javascript | 
 copy code |
?
 
01
new iCarousel("container", { 
02
	animation: { 
03
		type: "fade", 
04
		transition: Fx.Transitions.linear, 
05
		rotate: { 
06
			type: "auto" 
07
		} 
08
	} 
09
}); 
10
	

That's it, at this rate you should be able to see iCarousel creating a news ticker with the elements with a class "item".




Demo: http://zendold.lojcomm.com.br/icarousel/
Download: http://zendold.lojcomm.com.br/icarousel/js/iCarousel.js
Source: http://zendold.lojcomm.com.br/icarousel/

Related Listings:

1. Helma – Open source framework Helma is a server-side Javascript environment and web application framework...
2. fValidator : Moo Plugin Nowadays everybody knows that javascript can be used to validate...
3. Simple 3D Carousel This is a very basic 3D Carousel. This example will...

You are subscribed to email updates from Ajax Updates To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610