AJAX Tutorial: Part#2

Hmmm so you are really crazy about AJAX? I love it, when you say “s”!!!

OKay, so in my previuos tutorial I gave a link in which you enter a zip code value and the values of state and city gets populated without reloading the whole page. Did you really do that? oh great, I must tell you, you have almost mastered AJAX.

Now, lets do some simple coding and make it more impressive.

So, lets add some more lines of code to the output function. And lets try to make a fainting result display.

Fainting the colors of either image, textbox, label or background of document have become common now a days.

All you need to add is to use DHTML code. DHTML, dont panic. Its not tough. Its just the same regular routine job of what you have already mastered.

Only difference being, that the elements of the HTMl are created at runtime. Simple ah? okay.

How do we create any element at runtime?               

input1 = document.createElement(‘input’); //defining the element.

input1.class=”faint” // assign a class name

input1.type=’text’;  // creating a simple textbox

input1.value=’Hit Me Hard!!!’; // assign some value

Now, we have created a element and gave some property values.

Lets add to our document.

window.document.appendChild(‘input1’);

Hurrah!!!! we have just dynamically created and added a textbox.

The other way of doing the same:

<input type=”text” value=”Hit Me Hard”>

OKay,  now we go ahead and create a faint function

<script type=”javascript”>

function Faint() {

 var input1 = document.getElementByID(‘faint’); // class name that we just gave in runtime.

input1.style.opacity=”0.50px”; // will make things opaque by 50%.

input1.style.background=”yellow”; // put bgcolor as yellow

setTimeout(“reset()”,1000); // call reset function after 1000 milliseconds

}

function reset() {

 var input1 = document.getElementByID(‘faint’);

input1.style.background=”lightgray”; // changed the color

input.style.opacity=””; // reset the visiblity mode 100%

}

</script>

Here, we go!!! when you insert this piece of code inside the result[reponse code], you should the miracle of fainting and changing visiblity mode.

I have a full working copy of the same, those who really want to hack this. Mail me, I promise to send you the code.

In our next tutorial of AJAX, we will see how “Google-suggest” works and How to build our own “version” of the suggest which is called as “Type Ahead Suggest”.

Till then, just b good. and keep hacking!!!

Cheers
Shridhar

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 {My Book} at Packt official site
http://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book

Advertisements

About srinix

I am Sridhar, a matured nut, on this planet with water, air and love ;)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: