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
Update – some of the original links have been removed
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):
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
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:
And now the PHP code:
updateme.php
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.
This is part of one of many such tutorials covering Ajax with Prototype.
If you do not want to get your hand to dirty with custom Ajax code, then using the extremely handy toolkit from prototype may be perfect.
Prototype is a very well written JavaScript framework/toolkit and come with an Ajax class to make things nice and easy.
In this simple example I’ll show you just how easy Ajax calls are. But you will need to have your own copy of prototype (its free!).
On a side note… if you like fancy JavaScript effects, you can extend prototype with another library called script.aculo.us – I promise, with these you will have endless hours of fun!!
On with the example
I’ve attempted to simplify things as much as possible. In this tutorial we will type some text into a standard form field, hit a button and see the results appear below. In the background, our button click will trigger our JavaScript function, and pass the text through Ajax to a server-side PHP script. This PHP script will write our text back to an other JavaScript function on our page and print the text out on the screen.
First we include our prototype library:
Then we create two of our own functions, the first one is the main script which passes our text to the Server (PHP script in this case). The second function handles the response from the PHP script and prints the results to the browser.
In the getResponse function above, noticed the function call $(‘result’) – this is a feature of prototype which basically replaces ‘document.getElementByID(‘result’)’.
Yes, that is all we need in terms of JavaScript. I told you it was simple!!
Next we have the form:
Nothing fancy with the above. In order to call our JavaScript functions, we are using the ‘onClick’ event of the button.
We are passing in two values here; first the server-side script file ‘parse.php’ and the value we want to send.
We must pass in the paramater name and value (for example: ‘val=myvalue’, just like any querystring!), the parameter name in the case is ‘val’ and the value is the text in our text field. We refer to this value using another prototype function $F() which is really just ‘document.getElementById(‘myval’).value’.
On the server-side, our PHP script takes the value we passed $_GET['val'] and prints it back to us as ‘You entered: yourvalue’ (where ‘yourvalue’ is what your entered in the text field!).
parse.php
This is a very simple example of using just one of prototypes Ajax features, there are many more to explorer which I will cover soon.
Have fun!