Archive | Prototype RSS for this section

Book Review : AJAX In Action

 Ajax    

I have recently finished reading this book “Ajax In Action” By Dave Crane, Eric Pascarello and Darren James.

I thought I would share some key points from the book with everyone.

I recommend this book to everyone, who wants to learn Ajax or for those who have already fallen in love with it 🙂

The book talks about the basics as introduction and example code are given to explain various ajax libraries covered, which includes Prototype, Rico, Dojo, Sajax etc.

It is also written keeping in mind only about the client-side programs and not heavily on server-side, which helps individuals to use it with any of these PHP/Asp/JSP etc.

This 680 pages book is what you need to master the concepts and start using ajax in your web apps.

Cumon, u still waiting for more reviews??? Go and buy here

Its a weekend, I have some plans too.

Happy Weekend!!!!
Cheerz
Sridhar

Advertisements

How to make a Modal Window using Prototype?

Okay, its been somedays I was working on how to create a simple, beautiful yet powerful modal window for a project I am working on.

Modal Window sometimes called as Modal Dialogue box, are widely used across to increase the user experience.

After doing a lot of {re}search, I came across, Lightbox by Lokesh. Then, I came across this LightBox Gone Wild, yes by the folks behind Wufoo.

I must admit, these guys have done a great job!!! Thanks for sharing this.

Now, coming back to our tutorial.

You must have prototype AJAX library to use this {sorry for Non-prototype lovers}. Once, you have both Prototype and Lightbox Gone Wild.

Just add them to your html page.

<link rel=”stylesheet” href=”css/lightbox.css” mce_href=”css/lightbox.css” type=”text/css” />
<script src=”scripts/prototype.js” mce_src=”scripts/prototype.js” type=”text/javascript”></script>
<script src=”scripts/lightbox.js” mce_src=”scripts/lightbox.js” type=”text/javascript”></script>

Once, we have added the libraries to the html page. Now, we move on to create the lightboxes {a.k.a simple html files which will be shown in our Modal Window.}

Some HTML files, lets us say About.html

<p> About Us Page</p>
<h3>This is a simple About Me page, where you can add all HTML tags.</h3>

Now the important task: Activating the Lightbox

<a href=”About.html” mce_href=”About.html” class=”lbOn”>About Me</a>

Notice: the italics class=”lbOn”, onclick this will call the function to load the lightbox.

We can add all the HTML tags inside a lightbox, which means there are N number of options for you to surprise your friends.

De-Activating the Lightbox

<a href=”#” mce_href=”#” class=”lbAction” rel=”deactivate”>Close Lightbox.</a>
A simple link, clicking on which will take you back to the page.

Linking it to another Lighbox inside:

<a href=”confirm.html” mce_href=”confirm.html” class=”lbAction” rel=”insert”>Go to Another Lightbox</a>

Till here we saw how to Activate, Deactivate and Insert a lightbox inside a lightbox.

Now, AJAX stuff.

Lets say you want to give, a form to fill to user and collect the data using the modal window. We can do it, with the help of Prototype library. Use the following piece of code.

insert: function(e){
link = Event.element(e).parentNode;
Element.remove($(‘lbContent’));
var myAjax = new Ajax.Request(
link.href,
{method: ‘post’, parameters: “”, onComplete: this.processInfo.bindAsEventListener(this)}
);
}

I am writing a code to add some more functionality like onload, on mouseover etc. Once done will share the code as well.

Cheerz
Sridhar

If you are reading article, you might also be interested in the PHP and Scriptaculous Book I have authored.

The book gives you insights about effects, drag-n-drop, slideshows, applications, auto-completion, in-place editing and more. Complete code snippets and explanations.

CHECK out and BUY the PHP and Script.aculo.us book at Packt official site

PHP and Script.aculo.us Book

PHP and Script.aculo.us Book

http://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book