Ajax Tutorial : Ajax Help and Tutorials

Adobe AIR introduces a whole new subject when talking about Ajax. I’ve decided to create an new website dedicated to developing Adobe AIR applications, by way of Air Tutorials. It’ll cover both HTML with JavScript and Flex (mxml and ActionScript). Snippet manager is the first sample application available, which was built using Flex. There will be a range of tutorials showing how this application was built.

At the time of writing this, the site has very little content. But I am working on it. Please send in your ideas. You can find out more at: www.air-tutorial.com

The site will introduce a balanced opinion of Adobe AIR, it is not affiliated with Adobe in any form.

Update: The first tutorial is available - it covers the installation and configuration of the Air Sdk.

Yes, it has been a very long time since I’ve posted on here. I’m having one of those ‘man, I really should update my blog’ moments, and write this with my very best intentions. Over the next few weeks I HOPE to create many new posts. Much has happened since my last posts, and I hope I’ve gained a little more wisdom (hmm?). Anyway, I have much to talk about.

Until my next posts - keep ajaxing and stay secure!!

Ext JS, the JavaScript framework with Ajax and UI Components

Ext JS is a JavaScript Library/Framework which works in conjunction with Prototype, YahooUI and jQuery. It’s probably the most exciting toolkit available for building web 2.0 websites right now. It’s jam packed with features, and is designed to make life much easier for building great UI in JavaScript.

I’ll not dig to deep right now, I suggest you check out the example and demos first to see what you think.

Below is a the script used to grab XML data via Ajax and populate a grid (sortable table like object):

/*
 * Ext JS Library 1.0.1
 * Copyright(c) 2006-2007, Ext JS, LLC.
 * licensing@extjs.com
 *
 * http://www.extjs.com/license
 */

Ext.onReady(function(){

    // create the Data Store
    var ds = new Ext.data.Store({
        // load using HTTP
        proxy: new Ext.data.HttpProxy({url: 'sheldon.xml'}),

        // the return will be XML, so lets set up a reader
        reader: new Ext.data.XmlReader({
               // records will have an "Item" tag
               record: 'Item',
               id: 'ASIN',
               totalRecords: '@total'
           }, [
               // set up the fields mapping into the xml doc
               // The first needs mapping, the others are very basic
               {name: 'Author', mapping: 'ItemAttributes > Author'},
               'Title', 'Manufacturer', 'ProductGroup'
           ])
    });

    var cm = new Ext.grid.ColumnModel([
	    {header: "Author", width: 120, dataIndex: 'Author'},
		{header: "Title", width: 180, dataIndex: 'Title'},
		{header: "Manufacturer", width: 115, dataIndex: 'Manufacturer'},
		{header: "Product Group", width: 100, dataIndex: 'ProductGroup'}
	]);
    cm.defaultSortable = true;

    // create the grid
    var grid = new Ext.grid.Grid('example-grid', {
        ds: ds,
        cm: cm
    });
    grid.render();

    ds.load();
});

Take a look at the JavaScript generated grid here.

Hopefully this short intro will wet your appetite, more to come soon.

Great work Jack (and the rest of the Ext JS team) for this superb library, can’t wait to see more!!

JavaScript Form Validator

This is an updated and improved version of AJAX Generic Form Parser

Our updated JavaScript code is smaller, prettier :) and more powerful (just).

That’s nice, but what does it do?
Well it validates your form stupid!! as with most (if not all?) posts on this website, the script is simple, easy to follow and not jam packed with to many features. Basically this script will look for required fields (which you specify in your form.. I’ll come to this later) and if a required field is empty, it will through up a JavaScript alert box telling the user (and prevent the form from being submitted).

Before I present to you the Code Example, I’ll explain a little about how to configure your form and make certain fields required.
For simplicity, I’ve chosen to make use of the fields ‘Title’ tag. This is where you make fields required.

For example: < input type="text" name="FirstName" title=”required” >

Note: The script will support the following form field types:

• Text
• Textarea
• Password
• Select

Just to recap. To make any of the supported fields required, just add title=”required”!

Triggering the form to call the JavaScript Validation Script:
In order for the form to call the JavaScript and check all the required fields, we need to prevent the form from submitting. In order to achieve this, we will use the onSubmit event on the form tag. Example:

< form name="myForm" method="post" action="process.php" onSubmit=”return myForm.check(this)” >

We must use return before the function call, this tells to form ‘do not submit the form unless the function returns true’.

The JavaScript form Validator Script

var myForm = {
  fTitle : "",
  fValue : "",
  fName : "",
  fField : "",

  check : function(fObject) {
    for(var i = 0;i < fObject.elements.length;i++) {
    fField = fObject.elements[i];
    fTitle = fField.title;
    fValue = myString.trim(fField.value);
    fName = fField.name;
    fType = fField.type;
    switch(fType) {
      case "text":
      case "password":
      case "textarea":
        if(fTitle == "required" && encodeURI(fValue).length < 1) {
        alert(fName+': is required, please complete.');
        fField.focus();
        return false;
      } // if
      break;
      case "select-one":
        if(fTitle == "required" &&
        fField.options[fField.selectedIndex].value.length < 1) {
        alert(fName+': is required, please select one.');
        fField.focus();
        return false;
        } // if
      break;
    } // switch
    } // for
  } // method
} // object

var myString = {
  trim : function(s) {
  return s.replace(/^\s+/, '').replace(/\s+$/, '');
  }, // method
  noTags : function(s) {
    return s.replace(/<\/?[^>]+>/gi, '');
  },
  strip : function(s) {
    return this.noTags(this.trim(s));
  }
}

As you can see, this is nice and easy to follow. Nothing to fancy, but believe me this wee function can save a lot of time, especially if you build a lot of forms.

Why does it not do more complex validation?
Simple, because I like to keep things nice and easy (and I don’t do complex)…. The last thing I want to do is give you a headache. Like everything on this site, this is just an example. Please feel free to use and enhance it to fit better with your own needs.

Before I go, I’d better mention that the JavaScript function will strip out any leading and trailing whitespace before the validation is done. There is also a little function to strip out HTML tags (it’s not being used in the above example, but you can make use of this on a field basis by using the onFocus event!!), Just a little bonus!!

Ajax Updater - Update a DOM element ID from a Server Script

This example is probably the simplest example you will ever find.
We are going to use the prototype feature ‘ajax.Updater’ (see part one for more details on prototype).

ajax.Updater allows you to specify an element ID and script URL - and whatever the script URL prints will appear in your element ID. Simple as that.

The example below simply returns the Server time each time the button is clicked.

I’m not going to explain this bit by bit as it is just so easy to grasp.

Remember, you will need the prototype library in order to use this!

Here is the HTML/JavaScript code:

<html>
<head>
<script src="dist/prototype.js" type="text/javascript"></script>
<script type="text/javascript">
function ajaxUpdater(id,url) {
 new Ajax.Updater(id,url,{asynchronous:true});
}
</script>

</head>
<body>
<div id="updateme"></div>
<input type="button" value="Update" onClick="ajaxUpdater('updateme','updateme.php')">
</body>
</html>

And now the PHP code:

updateme.php

  echo "Server time is: ".date("Y-m-d H:i:s");

The above example has no real use, but in the real world there are many things which can be done. For example I recently wrote an automatic session log-out script, which automatically kills the session after a given period and send the user back to the login page (very handy for secure sites). I’ll post that script up soon.