An Introduction To Prototype

by Gary on December 31, 2007 · 1 comment

in SEO,Website Design

Creating Ajax applications is all the rage these days but I wouldn’t recommend putting Ajax functionalities into your online applications unnecessarily because sometimes it can hamper the overall functionality of your online application or website. Nonetheless, Ajax can really enhance user experience and in many big and small ways make using your website a rewarding and speedier experience.

So far the biggest advantage of incorporating Ajax into your web pages is that in order to display updated content you don’t need to refresh your pages and this means if new content needs to be displayed at a particular section of the web page the data of the remaining page need not be reloaded. Many web designers are making ample use of Ajax to create highly interactive online photo albums, shopping carts, content management systems, financial applications, and a horde of excellent online applications.

In most of the cases you need JavaScript to incorporate Ajax capabilities into your Web applications. Until a few years ago you needed to know very intricate JavaScript programming in order to achieve Ajax functionalities. You no longer need that; I mean you still need to know your programming well but it is significantly easier these days to put Ajax features into your website by using JavaScript libraries, for instance Prototype.

Prototype is a comprehensive list of JavaScript functions. You can do practically everything that you do with the regular JavaScript functions through Prototype but Prototype makes them easier and faster. Even if you don’t intend to use Ajax on your website you can still make use of Prototype to create highly interactive web pages. It tremendously shortens your JavaScript code and makes it extremely easy to manage it. But in this blog post I’m going to discuss a few neat Ajax things that you can do with Prototype, for instance, accessing the form-field data using shorter JavaScript commands, string manipulation and updating the information on your web page without updating it using an external PHP file.

Accessing the form-field data is very easy with Prototype provided that every field as a unique ID attached to it so that Prototype can easily recognize it. A small example:

<form name=”sub” id=”sub” onSubmit=”return see_fields();”>
<label>First Name:</label><br />
<input type=”text” name=”fn” id=”fn” size=”30″ /><br />
<label>Last Name:</label><br />
<input type=”text” name=”ln” id=”ln” size=”30″ /><br />
<label>City:</label><br />
<input type=”text” name=”city” id=”city” size=”30″ /><br />
<input type=”submit” name=”s1″ value=”Submit” />
</form>

We will see how we can use Prototype to access the fields in the above mentioned form. As it happens with every external JavaScript file you need to mention the filename before you can use it, in this case it will be prototype.js.

<script language=”javascript” type=”text/javascript” src=”prototype.js”></script>
<script language=”javascript” type=”text/javascript”>
function see_fields()
{
alert(“Hello ” $F(‘fn’) ” ” $F(‘ln’) “! Now we know that you live in ” $F(‘city’) “!”);
return false;
}
</script>

$F() is a Prototype-specific function that is used to reference individual form fields. Prior to this function you had to use a long JavaScript command like
document.form.field.velue
This tremendously reduces the amount of code that you have to write especially when you have many complex and long form field names.
Sometimes the users that use the form don’t enter the data properly; the first letter of every name of a person and the city should begin with capital letter. So just to be sure we will write the above mentioned JavaScript again, and for all the subsequent examples we shall assume that you are going to refer to prototype.js.

<script language=”javascript” type=”text/javascript”>
function see_fields()
{
alert(“Hello ” $F(‘fn’).capitalize() ” ” $F(‘ln’).capitalize() “! Now we know that you live in ” $F(‘city’).capitalize() “!”);
return false;
}
</script>

And now we will see how you can update the text on the web page without refreshing it, using an external file. Let’s assume that file to be change.php. Whenever you fill in a form field and jump to another field or generally take the focus away from the current form field the text on the page changes. We’ll change the HTML part of the page like this:

<form name=”sub” id=”sub” onSubmit=”return see_fields();”>
<label>First Name:</label><br />
<input type=”text” name=”fn” id=”fn” size=”30″ onBlur=”see_fields();” /><br />
<label>Last Name:</label><br />
<input type=”text” name=”ln” id=”ln” size=”30″ onBlur=”see_fields();” /><br />
<label>City:</label><br />
<input type=”text” name=”city” id=”city” size=”30″ onBlur=”see_fields();” /><br />
<input type=”submit” name=”s1″ value=”Submit” />
</form>
<br />
<div id=”txt”>The original text.</div>

This new DIV with ID “text” contains the information that will be updated using the Ajax capabilities of Prototype.
The JavaScript code turns out to be like this (I have left some helpful hints in the comments of the JavaScript code):

<script language=”javascript” type=”text/javascript”>
function see_fields()
{
//generate the query string that passes on the required parameters
//there is a longer method but we’ll stick to this one
var pars=$(‘sub’).serialize();
//this variables holds the ID of the DIV that will be updated
var thatplace=”txt”;
//the actual action takes place here
var AjaxAction=new Ajax.Updater(thatplace, ‘change.php’, {method: ‘post’, postBody: pars});
return false;
}
</script>

I guess you already know there is no hard and fast rule for defining the variables; just make them easy to understand. And here is all the code you will need to put in your PHP file:

<?php
if(strlen($_POST['fn'])==0 && strlen($_POST['ln'])==0 && strlen($_POST['city'])==0)
{
print “The original text.”;
}
else
{
$label= array(“Your first name is “, “Your last name is “, “You live in “);
$i=-1;
foreach($_POST as $key => $value)
{
$i ;
if(strlen($value)!=0 && $value!=”Submit”)
{
print $label[$i] . $value . “<br />”;
}
}
}
?>

Enjoy!

Share This Post

Advertise here
  • Pingback: How To Insert HTML Code In A Wordpress Post » SEO Blog