Vision Master Designs » Prototype, Script.aculo.us

Really Easy Form/Field Validation using Prototype+Scriptaculous

Michael — Sat, 28 Feb 2009 15:51:07 +0000

Hey Guys,

Its been a while since I have started my final year Project called “OptimaPrime- The Enterprise Project Management System”. Most of you must have heard of project management systems. It helps enterprises manage their projects, lets them keep it on schedule, helps them allocate resources etc.
I needed to perform form Validation since I had a lot of forms and it had lot of fields. I googled for good form validation plugins for Prototype + Scriptaculous (Since I have got really used to this cool library) and thats when I found Dexagogo’s Really Easy Field Validation plugin.

A very useful and a simple to use form validator for all kinds of forms. It has neat Fade IN/Fade OUT effects too. Custom classes can be defined, custom validations can be defined. It validates fields for a lot of different type of scenarios.

required (not blank)
validate-number (a valid number)
validate-digits (digits only)
validate-alpha (letters only)
validate-alphanum (only letters and numbers)
validate-date (a valid date value)
validate-email (a valid email address)
validate-url (a valid URL)
validate-date-au (a date formatted as; dd/mm/yyyy)
validate-currency-dollar (a valid dollar value)
validate-selection (first option e.g. ‘Select one…’ is not selected option)
validate-one-required (At least one textbox/radio element must be selected in a group – see below*)

For more information on how to use this plugin visit Dexagogo’s Website. You can also check out a demo of this script at action HERE. It has very good documentation on how to use this plugin. Thanks Dexagogo. Although if you guys have any doubt on how to use it, I`ll be glad to help you out.

Tutorial : Overlay a AJAX Spinner in the center of Web Page using Prototype

Michael — Mon, 23 Feb 2009 11:51:52 +0000

This tutorial is specially for beginners who are wondering how to place an AJAX Spinner. Its very simple guys. Just read below to find out.

To those people who have wondered how to show the spinner image + loading message when any ajax request is made and to hide the spinner image + loading message when the request is successfully completed, this tutorial will help you out in achieving it and also teaches you how to show this loading box in the center of the browser screen and grey out the background contents with cool fade effects.

Index :

Page 1 : Introduction
Page 2 : Required HTML/Javascript Code/CSS
Page 3 : Complete Code of Demo

Pre-Requisites :

A little bit of CSS,HTML knowledge and know-how of Prototype, Scriptaculous.

Source/Demo :

Tutorial : Auto Completer using Prototype, Script.aculo.us

Michael — Sun, 26 Oct 2008 13:35:43 +0000

How many of you have always dreamt of creating an Auto Suggest Box. I bet everyone must have seen one of these somewhere or the other. if you use Gmail to send mails, you might recall that while typing the To address, Gmail shows a probable list of users from your address book. Nowadays most of the modern browsers also have this Auto Suggest control built in them, i.e when the user begins to type in a text box, a menu appears below the text offering completion suggestions.

Today I am going to teach you how to create an Auto Suggest Box using Prototype, Script.aculo.us. The script.aculo.us auto suggest box (autocompleter) replicates this control, but gives the developer control of the probable suggestions.

Index

Page 1 : Introduction and
Page 2 : Auto Suggest Box (local)
Page 3 : AJAX Auto Suggest Box (remote via PHP/MySQL)

Demo & Source Download

Type out the name of the states of U.S.A.
Local Auto Suggest Box Demo : Click Here
Remote Auto Suggest Box Demo : Click Here

Download Source Here

Problem Statement

Lets try creating an Auto Suggest Box which displays the states of America as the user begins to type a state’s name in the text box.

Solution

Before using any functions, first we need to make our HTML page i.e how the suggestion box is going to look.

Create an empty HTML file.
First, to take the input of any state name from the user we need an input box.
Second, we need a container to display all the probable suggestions i.e different names of states according to User input.

Lets create these right now.
```
    
    
    
    
```
Now that we have designed our suggestion box, its time to implement the Auto Suggest Box method. Since this method is readily available as a part of Script.aculo.us, we need to include the scriptaculous file, and since scriptaculous depends on prototype, we need to include the prototype file to our HTML document. Type following code inside the tag.
```
	
    
    
```

The HTML page should look something like this.

    
    
    
    
    Untitled Document

Now that we have a HTML page ready, preview it. Obviously it won’t work yet. We still have to define the AutoCompleter function.

There are 2 ways to achieve our goal. Script.aculo.us’s Autocompleter comes in two flavors.

Autocompleter.Local : The local array autocompleter. Used when you’d prefer to inject an array of autocompletion options into the page, rather than sending out Ajax queries.
Ajax.Autocompleter : Which relies on a remote server to give it suggestions, making an AJAX Request whenever suggestions need to be retrieved.

Now both have thier Pros and Cons. I`ll explain each one of them and how they can be used.

Tutorial : Introduction to AJAX in Ruby on Rails with Prototype, Script.aculo.us

Michael — Sat, 04 Oct 2008 16:40:43 +0000

Heya,
After a long time I had the time to update my blog. I have been working on my project presentation for the past 2 weeks. The entire presentation was developed in Flash CS3 coded in ActionScript 3. It was ages since I had used Flash and I was quite astonished how it had changed over the years. I`ll be soon posting some tutorials on Flash, so do keep an eye out

Anyways apart from being a bit off-topic, This tutorial deals with AJAX implementation in Ruby on Rails 2. While I was learning RoR, I had lot of issues of properly having AJAX implementation in my projects. This tuorial is for those people out there.

In this tutorial, I`ll just show some very simple Script.aculo.us Animation Implementations in RoR.
View Demo

Introduction

First off, if you followed my RoR tutorials, you should know that RoR has AJAX support built in to it. It uses the Prototype Javascript Library along with Scriptaculous.

Step 1 – Create new RoR Application

First create a new RoR application. Edit the database.yml file as well. If you are new to RoR, then visit Tutorial : Developing your First Ruby on Rails 2 Application

Step 2 – Create a Controller

After creating the new application, we need to create a controller. lets call the controller ajaxfunctions. I hope you guys know how to create a controller.

    ruby script/generate controller ajaxfunctions index

The above code will create a controller called ajaxfunctions which will have a method called index, respectively index.rhtml OR index.html.erb will be created inside the view/ajaxfunctions folder.

Step 3 – Editing the view file

Once you open it, you`ll notice that its empty. This is our template, basic HTML would suffice. So type out an html page here or you can use the one below.





Untitled Document

Great. Now firstly, to implemenet AJAX in RoR , we need to initialize it.

Initializing the Ajax code

You must include the javascript code in your view template file (i.e index.rhtml in our case) for the Ajax functions to be available in that view. The best place for this is in the tag.

You can either use

<%= javascript_include_tag :defaults %>
We`ll be using this. Using this allows for quicker downloads since the script can be cached by the browsers.
This is the output in the HTML page.
```
...





...
```
<%= define_javascript_functions %>
This pastes all of the required Javascript code right into your view which increases your page size by ~20KB.

Different AJAX Helpers used in View Files

RoR creates the AJAX code for you via helper codes. Firstly

Defination:
What is a Helper ?
Helpers (“view helpers”) are modules that provide methods which are automatically usable in your view. They provide shortcuts to commonly used display code and a way for you to keep the programming out of your views. The purpose of a helper is to simplify the view. It’s best if the view file (RHTML/RXML) is short and sweet, so you can see the structure of the output. Nitty-gritty details are best left to helper methods and partials, where they can be parametrized and used repeatedly.

Note : We can call AJAX via 2 methods i.e 1) Using a button and 2) Normal Links. Then we can add the arguments through which we can achieve to have cool visual effects or perform serious AJAX operations.

AJAX Helpers

button_to_function(button_value, *args, ∓block)
Returns a button that‘ll trigger a JavaScript function using the onclick handler. All of these go into the body tag of the view file. You can use the visual_effect function to specify any visual effects

Example :
This will show a button with the value “Greeting”, upon clicking will show a alert box with “Hello World!” inside.
```
<%=button_to_function "Greeting", "alert('Hello world!')" %>
```
This will display a button with value “Fade”, upon clicking will fade in or fade out the element ‘fade_text’ (It can be a div element with id=fade_text).
```
<%=button_to_function "Fade", visual_effect(:toggle_appear, "fade_text", :duration => 0.5)%>
```
link_to_function(name, *args, &block)
Intead of a button, if you want to implement AJAX functionality using a text link. You can use this helper.
Returns a link that will trigger a JavaScript function using the onclick handler and return false after the fact.

Example :
This will show a “Greeting” link, upon clicking will show a alert box with “Hello World!” inside.
```
<%=link_to_function "Greeting", "alert('Hello world!')" %>
```
This will display a “Slide Me” link, upon clicking it will slide in or out the element ‘slide_text’ (It can be a div element with id=slide_text).
```
<%=link_to_function "Slide Me", visual_effect(:toggle_slide, "slide_text", :duration => 0.5)%>
```

Helper for Animation

visual_effect(name, element_id = false, js_options = {})
Returns a JavaScript snippet to be used on the Ajax callbacks for starting visual effects.

Example :
This will show a “Highlight” button, upon clicking will highlight the element which is specified.
```
<%=button_to_function "Highlight", visual_effect(:highlight, "element_id_name",:startcolor => '#ffff99', :endcolor => '#ffffff')%>
```
This will display a “Grow” link, upon clicking it will grow the specified element_id_name
```
<%= link_to_function "Grow", visual_effect(:grow,"element_id_name",:direction => "center",:duration => 1)%>
```

I would really suggest to go through Script.aculo.us WIKI to know more about every effect and their parameters. All of these effects can be used with RoR. For Example I have attached the code for the demo file.

Code for the Demo File

View Demo





AJAX
<%= javascript_include_tag  :defaults %>




<%=button_to_function "Greeting Alert Me", "alert('Hello world!')" %>


Actions with paragraph using buttons
<%=button_to_function "Fade", visual_effect(:toggle_appear, "fade", :duration => 0.5)%>
<%=button_to_function "Slide", visual_effect(:toggle_slide, "fade",:duration => 1)%>
<%=button_to_function "Highlight", visual_effect(:highlight, "fade",:startcolor => '#ffff99', :endcolor => '#ffffff')%>


This is test, This is test

This is testing....

Lorum ipsum blablasadadada


Actions with Green Box using links
<%= link_to_function "Toggle Fade", visual_effect(:toggle_appear, "s1", :duration => 0.5)%> ||
<%= link_to_function "Fade with wobble","new Effect.Fade('s1', { transition: Effect.Transitions.wobble })" %> ||
<%= link_to_function "Grow", visual_effect(:grow,"s1",:direction => "center",:duration => 1)%> ||
<%= link_to_function "Shake", visual_effect(:shake,"s1",:distance => "30",:duration => 1)%> ||
<%= link_to_function "Morph to Red box", visual_effect(:morph,"s1",:style => "{background: '#f00',color: '#fff',width: '200px'}" )%> ||







Drag Action with Blue Box

<%= draggable_element("s2", :revert => true) %>
DRAG ME

Tutorial : Installing Ruby on Rails 2 in Windows Vista/XP
Tutorial : Developing your First Ruby on Rails 2 Application
Tutorial : Basics on Ruby on Rails 2 Model, Controller and Views and Routing
Tutorial : Create a blog using Ruby on Rails 2. (Part 1 – Relationships)
Tutorial : Create a login system in Ruby on Rails