Thomas Fuchs is the pioneer of the first FX JavaScript library script.aculo.us and as he and his work reside in Vienna (which is more or less my hometown) I have to support his new open source product called scripty2 which is a successor of script.aculo.us.

To keep things short: It’s a first release and therefore still in Alpha. It looks promising, especially because it’s only 5KB of size (gzipped & excl. PrototypeJS).

Check out the demos to see if it’s something you gonna need for your future work or not.

Click here for a demo

All you need to get started is the latest version of prototypejs. I bet you have it already ;)
We will build our menu with the following structure:

First there comes the div container which is called menu in this example. It contains the menu items which are ordinary a tags. After the menu we place a link which will display our contextmenu. Now lets apply some style to the menu so it really looks like a nice contextmenu. Apply the following styles..

We positioned the menu absolute therfore it will appear over the "more..." link. Thats good because we want to have the menu on our mouse when we click the link. The margin moves it a bit away so we can still see the link a little. The rest is for nice appereance. Oh, i forgot: the links within the menu are displayed as block. Thats for the line breaks.

The only thing which is missing now is tons of Javascript. Hmm, not really. We are fine with 3 statements. We don't calculate any positions of the menu, because it is already positioned. Thats the nice thing and makes us write less javascript. ok, lets tune our html..

When the user clicks on more... we show the menu ($('menu').show()). Now we have to keep it visible till he/she moves away the mouse out of the menu. For this reason we keep showing it onmousemove. Finally if the mouse leaves the menu we hide it ($(this).hide()).

Last but not least we added display:none because the menu should not be visible by default (note: you have to assign this inline, otherwise it wont work. For more details check the prototypejs API).

Get the full source code here by viewing the source. If you are familiar with script.aculo.us you could add nice effects when showing and hiding the menu. (Effect.Appear and Effect.Fade)

Tested in IE7, FF2

I use this kind of menus in all my apps. If you need more menus in one page. e.g. context menu for a user (delete, modify, permissions) then just render an own menu for each person. It generates more HTML but makes it easy to use.

Here is a quick example of how to translate something...

and it gets better and even easier: its possible to let the API detect the language .. so nothing you have to take care about anymore.

Further reading: An introduction to the language API and translation tools.

Now its time to come up with some nice little tools, widgets which use this service. "a user selects a paragraph an your page, clicks a button and suddenly the text is translated into the desired language".

(i've used code sections to create more sections.)

At first sight you can see that the calculation is done on server side ("add" function) and there is no classical XHR and not much JavaScript. The calculation is invoked through the button and therefore the button includes a JavaScript call which defines the "gateway" to the server side. Before I explain how the execution works, it is necessary to look at the page structure. The structure of an ajaxed page (as shown in the example) is the following:

1. Loading ajaxed.asp (include)
2. Create an instance of the AjaxedPage class and execute draw()
3. Provide 3 methods:
   1. init(): executed on every request (before main() or callback())
   2. main(): executed when the page is ordinary called by a user
   3. callback(): executed when the page calls itself again and requests a server side method (action)

The execution flow results as followed:

1. init()
2. main() or callback()

The whole trick here is that the page is able to make a request to itself. It has two states. One for the ordinary request of the user - which normally displays the user interface with (X)HTML. The other state is when the page requests itself again - which results in a JSON response. Ok lets forget the underlying technical details now...

The entry point in the example is the draw() method which draws the page and cares about everything for you. As already mentioned you need to provide the procedures init(), main() and a callback(action) in your page. Whereas init() is executed on every request the main() and callback() are never executed togehter. All the presentation should be put in the main() - you see the form in the example is in the main(). All security checks, preperations, initializations, etc should be put into the init() which is always executed before the main() and callback(action). When is the callback called? It is called if the ajaxed.callback JavaScript function is executed - which in this case is in the onclick event of the button. The ajaxed.callback requires an action (which is used as input for the server side callback function) and a JavaScript callback function which will be called after the server side process has been finished. This callback function (added) gets then the return of the server side function call. In this case with page.return(). The nice thing is that the page handles all conversions from the VBScript datatypes into the JavaScript equivalents (see Generate JSON from ASP datatypes if you are interested in the details). The page posts all form variables by default to the callback which means that the form fields are accessible via request.form within the callback. The AjaxedPage class offers several convenient utility methods to access the request collection. If you dont want to post the whole form or use your own parameters for the callback, you can use the third parameter of the ajaxed.callback function (with JSON). E.g.

With this technique its now possible to call all your server side procedures and then change the DOM according to the return value(s) from the server side. There is no need to care about any XHR or e.g. loading indication. Everything is handled. Another example?

Populating dropdown from the database

Lets assume we have a table called "table" which holds two columns named "id" and "name". We want to fill a dropdown with those values. id as the value and name as the displayed text. I have created a form which holds dropdown and a button. The button invokes the database call on server side. The callback then returns an ADODB.recordset which is automatically converted into an equivalent JavaScript data structure. The "got" JavaScript function can directly access the recordsets data. (Note: the "getRecordset" function does not exist and is just for demonstration)

Returning more values with returnValue()

The following example demonstrates that it is also possible to return more values on the callback. returnValue() allows to return more values by specifying each value with a name. return() in comparision can only return one value.

Run the example

(It expects some value in the textbox. if no value is given then a "valid" flag is set to false and returned from server side. If some input is provided then an array additionally to the valid flag is returned. This example make not much sense but demonstrates the usage of more return values)

The concept makes use of Prototype JavaScript Library and the JSON utility class.
The ajaxed library includes those and therefore they can be used when working with ajaxed e.g. all features of Prototype. Furthermore it offers other convenient built-in features to ease the work with ASP pages (e.g. RFHas() method in the example above - it checks if agiven field from the request.form collection exists). Some other features of the Ajaxed page ...

• AjaxedPage.isPostback() - equivalent to asp.net postback
• AjaxedPage.throwError() - generates an ASP user error
• AjaxedPage.RFT() - gets a field from the request collection already trimmed
• AjaxedPage.RFE() - gets a field from the request collection HTMLEncoded
• AjaxedPage.loadJSFile() - ensures that JavaScript file is loaded only once
• AjaxedPage.iif() - an VBScript inline if
• AjaxedPage.getLocation() - gets the location of the page in several formats

Download ajaxed 0.1
ajaxed 0.1 class reference

Installation

Download the zip archive and copy the whole "ajaxed" folder into your web root. Access the demo at http://yourserver.com/ajaxed/demo/index.asp and check if everything works fine. There is a config.asp which provides some configurations.

Tell me what you think about it. I will come up with some more sophisticated examples in the future. cheeers...

This beauty from BeauScott uses the prototype javascript library including some little extensions and scriptaculous. Supported features are for example getting the tooltips content direclty from an XML or HTML file. Furthermore its interface for the usage is simple as well. Example:

Here is the original post from Beau Scott:
http://www.beauscott.com/2006/08/19/ajax-enabled-help-balloons/

The problem briefly:
Let's assume the following string (some pseudo html) is given...

and we want to strip all script tags out of the string including their contents. So that it looks like the following afterwards:

Yeah you are right we need a smart regular expression here which will strip those unwanted tags. My first attempt resulted in the following pattern which looks reasonable to me (i will use javascript as the language here but this can be applied to any language supporting regular expressions):

"grab everything which starts with <script followed by any character (/s/S) any times (*) and finally ending with </script>" This whole thing works fine but it removes my whole content and the reason is because it grabs the first <script>-tag and strips everything till the last </script>-tag. Therfore unfortunately the "something in between!" string also vanished. Then I ended up playing around with expressions (what i reallly love - i cannot imagine doing something better) so that it grabs everything within the script tag but not if a new script tag already started. It took me at least 2 hours to manage this! damn i was really frustrated :)
But all of a sudden I found the MAGIC question mark (?) which makes stars to lazy stars. And because of this terminology my day was already saved (no coffee, no drugs, no pills anymore,...) and as a "nice" side effect the regular expression finally worked how it should.. here is the working pattern with the lazy star:

can you feel the lazyness? :) I did especially for myself. So as an explanation to this I refer to an article which describes this behavoir best: http://www.regular-expressions.info/examples.html

<TAG\b[^>]*>(.*?)</TAG> matches the opening and closing pair of a specific HTML tag. Anything between the tags is captured into the first backreference. The question mark in the regex makes the star lazy, to make sure it stops before the first closing tag rather than before the last, like a greedy star would do. This regex will not properly match tags nested inside themselves, like in <TAG>one<TAG>two</TAG>one</TAG>.

I have the feeling that I understand the usage of the question mark here somehow but I am not 100% confident about this cause the theory says the following about quantification (http://en.wikipedia.org/wiki/Regular_expression):

? The question mark indicates there is 0 or 1 of the previous expression. For example, "colou?r" matches both color and colour.
* The asterisk indicates there are 0, 1 or any number of the previous expression. For example, "go*gle" matches ggle, gogle, google, gooogle, etc.
+ The plus sign indicates that there is at least 1 of the previous expression. For example, "go+gle" matches gogle, google, gooogle, etc. (but not ggle).

Thats kinda strange to me because it does only mention how often that preceding expression is allowed to occur and not how the parsing is done. Maybe someone has a better explanation for me...

A simple usage of JSON normally is that you create a page which outputs data as JSON as the only response. This page is called later from another page and the returned data is used within a javascript function (known as callback). So the snippet above gets some data from the database and stores it in an adodb.recordset which is passed then to the JSON generator and the result is printed on the page. The consuming page would like to access the data now as it originally was within the recordset. like this:

read on to get the details...

If you are already impressed by the short example then you will save a lot of time from now on when working with JSON. I have written a class which handles the whole conversation of classic ASP datatypes to JSON grammar. In particular an ASP boolean is recognized as a boolean within javascript, an integer as a number, an array as an array, a recordset as collection, etc. I will come back to the first example later but first another example:

This short snippet displays an alert with true. As you can see we passed an ASP variable which has been recognized later by javascript. In this very example we even pass an array with 3 different datatypes (boolean, int and string). Those are all accessible within javascript.

Even nesting is fully supported. So array within arrays, dictionaries within arrays and vice versa. Mixing is allowed in every way you imagine. This example demonstrates what i am talking about:

We've created a dictionary (which consists of two value pairs - one holds just a string (sausage) and the other an array (egal, wurst)) and we've added this into another array which is the value of "foo". After toJSON has generated the JSON string we can access the whole structure and the alertbox says "wurst".

Now back to the example of the introduction. We can even pass whole recordsets to the generator which will generate a datastructure as followed:

JSON representation for ADODB.recordset

a recordset with two columns ID and LASTNAME will be converted into a javascript array where each field represents a row in the field and the row provides properties which are named the same as the columns within the recordset. That means that iterating through data within javascript is not a mission anymore ... look at this example:

We transfered the whole adodb.recordset from ASP to javascript using JSON. How cool is that!?

Custom classes

If you create your own classes within VBScript then you might like the automatic conversion of your objects into a JSON representation. As VBScript does not support introspection (reflection) it is necessary to built an own work around. If you want the JSON class to recognize your custom objects it is necessary to implement a reflect() method within the custom type. reflect() must return a dictionary with all properties where each key is the property name and the value is its value. Values can be all kind of types (because its resolved recursively anyway). The following example shows a "Person" class which implements reflect() and therefore can be used within the JSON generator:

The following example access the properties of the VBScript Person class within JavaScript (as it would be a JavaScript object).

Update 10.07.2008: as the toJSON() method has been defined as default method it can be used much quicker by leaving the methodname out:

Those examples are really straight forward and should just demonstrate how to use the generator. Normally you don't really deal with that as a client, you'd rather have some nice classes which do all this stuff for you. In another article I will demonstrate how to combine ASP, JSON and AJAX in a nice and effective way...

The download of the class is at the bottom. Here is a list of the features..

• Transforms various datatypes from ASP to Javascript using JSON
• Escapes all characters which needs to be escaped according to JSON's RFC
• Recursively inspects the values so nesting of values is supported
• Results can be returned or (for better performance) written directly to the response

Have fun with it. There are other article related to this topic which might be interested for you:

• JSON character escaping function in classic ASP
• ajaxed Library - calling server side ASP code directly from client side.

Download latest JSON ASP utility class:
JSON 1.5.1 (JSON documentation)

License:
Use it for whatever you want but be sure to leave the credits to the creator(s) within the code. If you don't change it you can get always the latest update here ;)

Change Log:
v1.5.1 (15.07.2008)

• bugfix: didnt work properly with empty dictionaries. fixed!

v1.5 (10.07.2008)

• bugfix: utf-8 fully supported now (e.g. chinese didnt work)
• bugfix: empty dictionaries werent represented. now represented as 'null'
• toJSON() is defined as default method
• paged recordsets supported
• asp request object, IStringList and IRequestDictionary supported
• updated documentation
• detailed information (examples, ...) about the changes

v1.4.1 (19.12.2007)

• minor bugfix immediately after the 1.4 release

v1.4 (18.12.2007)

• there used to be an error when returning custom objects which were processed recursively. it resulted in outputing only '}'. this has been fixed.
• vartype 19 was not recognized as integer, but is now (comes from mysql)
• vartype 7 was not recognized as float, but is now

v1.3 (21.08.2007)

• Option Explicit can be used now
• Multidimensional arrays are supported (unlimited dimensions)

v1.2 (19.07.2007)

• Nested dictionaries were are not generated with toResponse = false. Fixed
• Currency and Byte datatype were not generated correctly. Fixed

v1.1 (17.05.2007)

• Bug with Floats has been fixed

asp-ajaxed

JSON is part of ajaxed. So you can check the ajaxed discussion group for more discussion about it.

It's a straight forward task so I dont really want to write a lot about (the code is at the bottom for all who cannot wait). What's important is that it uses the prototypeJS library. Be sure to integrate it when using the FormWalker.

Usage: Just mark all your input fields with the CSS class "next" and the user will be able to "walk" through them (If the last field is reached the first field will be activated. so its kinda loop...). All other fields won't be touched by the script:

btw for all who dont know: it is possible to use more than one classname, just in case you need your own css class additionally. That would look like this somehow:

At the end of your form you load the FormWalker which will do all the stuff for you (attach the necessary events, etc)

I have tested it in IE 6 and Firefox 2. Works fine for me...