4/19/2006

Talkin' AJAX at CHI PUG

I think this is the biggest Chicago PHP Users Group meeting I've been a part of, I believe I counted 15 people in attendance. Attendees were left to entertain themselves with pizza, beer and conversation while Rich, few others and I dealt with the technical difficulties so common at these things. Which would of probably been minimal if I had remembered that on my Uber Cool Laptop, I have no archaic VGA port – but only a DVI port and my The full dongle was sitting at home! DOH. So, we tried to load my files to my thumb drive which when plugged into Rich's cute little laptop...didn't like to read. DOH. So I tar-gz my files and ftp to my server.. then attempt to download to Rich's laptop. His laptop wouldn't untar the files. DOH.

So I put my font size real big on my laptop and set up on a stack of books and said lets go with a 17 inch widescreen display and offered my glasses to anyone sitting on the back. I have a sweet screen thats easily viewed from all angles.. so I guess it was not too bad. Better than nothing or using mime to present AJAX. Which I did in college. For all of 3 weeks.

Although I don't think anyone present was unfamiliar with AJAX, I showed Google Maps, a Sudoku creator/solver and TurboDB. Someone mentioned Weboggle and explained how that worked and I went to the site so folks could see.

I started with the method I use when I learn something new. I start with the most simple example, then build on it. The first example was just loading a plain text file via AJAX and displaying in a div. From there, I did an example calling a PHP file that created a list of files. Then I introduced Prototype, a Javascript AJAX library that makes the code so much cleaner and easier to use. Its include with Ruby on Rails, but you can download and use it totally seperate. The Ruby Kids can't have all the fun! Some of them had not seen the uber cool $() function that Prototype gives Javascript. Its essentially this;


function $() {

var elements = new Array();

for (var i = 0; i < style="margin-bottom: 0in; font-family: courier new;"> var element = arguments[i];

if (typeof element == 'string')

element = document.getElementById(element);

if (arguments.length == 1)

return element;

elements.push(element);

}

return elements;

}

(cut and pasted from prototype 1.5)


so instead of

document.getElementById('messageID').innerHTML = 'foo';


you can simply use

$('messageID').innerHTML = “foo”;


It takes either a string of an id, or an array of ids and returns the object reference to them (or array of references). Now why didn't I think of that. Nifty.

Folks pointed out that the property “innerHTML” might not be 100% cross browser (Heck with that, if it doesn't work in Firefox, eat my shorts!) and that you should use appendChild. You have been advised.

I illustrated the Ajax.Request object, that allowed you to set a function to call when the data is loaded, and a function to call if there is an error. The Ajax.Update object takes the name of the id to display the results in, and a function to call if there is an error. Most of the time, all I want to do is display some result in a div, so I use this one. Someone in the group said that Ajax.Request was all they used.

NOTE: Remember to use keyword "new". So you won't be like me, in a near panic 3 hours before presenting trying to figure out why I'm so dumb that my simple AJAX thing doesn't work. Error message in Javascript console: “this.initialize has no properties” Line 20 in prototype.js. HUH?! I should of remembered to search Google with my error message first thing.


Like this:

var result = new Ajax.Updater(

'messageID',

url,

{

method: 'post',

parameters: "color="+text_color,

onFailure: reportError,

});


NEW NEW NEW NEW ... maybe now I'll remember. Or in 2 weeks google for my error and find this post.


Then I showed what would happen if there was an error. My error reporting consisted of dumping the ugly http error in an alert box. Not recommended for production.


Finally, I showed a simple example of sending a value with ajax to a php file which returned a result. Which Larry was quick to point out was not checking the variable from the user.


Well of course. I am smart enough not to XSS myself in front of a room full of geeks. :P


Oh and thanks for the swag “Harper The Amazing” brought from his company ExtraTasty.com .. shot glasses and tshirts ... awesome!



Sample Files from Presentation:

ajax.tgz
ajax.zip (for you windows peeps)


Links

Prototype

Prototype Documentation

edit: fixed link to ExtraTasty.com

0 Comments:

Post a Comment

Links to this post:

Create a Link

<< Home