Ajax in Jquery – A Simple Tutorial

Ajax has been appearing all over the web just lately, but the question most people find themselves asking is – what is it?

Ajax stands for Asynchronous Javascript And Xml, sounds scary but its really not. The main concept behind ajax is to reduce the number of times you have to jump from one page to another in order to find information. so basically, if you are on a page and the information you need is on another, ajax allows you to call that information to you, all from the comfort of your current URL.

Now this is a pretty neat party tick, so its no wonder that everyone has begun adopting it. And don’t get me wrong, this is a very cool trick, and if you use it wisely it can vastly improve the usability of your site. Ajax becomes even cooler when you use it with the jquery framework, mainly because it is so simple. All you need is this;

  $.get("test.php", { name: "fred", date: "2pm" },
  function(data){
    alert("Data Loaded: " + data);
  }
);

Lets break it down,  First off this is a GET request hence the $.get() and all were doing here is giving $.get() 3 arguments. The first is the URL which you want the ajax to send your info to. The second is the url parameters you wish to send, so this would look like “http://www.test.php?name=fred&date=2pm”, which makes sense, given were using a GET request. Finally the third argument is the function which calls back the result of the page, (data) being the result and then we are simply echoing the result with a basic javascript alert funciton. To see a working example of this script in action, why not check out my contact page.

If your now itching to try it for yourself ajax dady offers some scripts to try out, or for a more indepth introductory tutorial why not check out Web Designer Wall and give it a go youreslf. However if your not familiar with jquery principles you should definatly take a look at 15 days of jquery. happy coding.


Why Open Source Is The Future

As the web has evolved its unlocked new possibilities in the way software and applications are written. To some this is a bad thing, but to most it marks a turning point in the way we share, develop and innovate our ideas.

The progression of open source solutions came form the simple idea of sharing information. Although it has become something of a buzz word just lately Open source has been around a long time, as any Linux user will tell you. There are a multitude of reasons why open source has been so successfull, Satheesh Babu puts together a compelling argument why open source is about more than just being free, there are obvious gains to be had in the cost effective nature of open source applications and software, but more than this, its about solutions that work. PHP is a perfect example of a very successful web language which has been adopted by many, myself included. You only need to look at the latest and greatest online applications and social netowrking environments which are all rolling on it, wordpress and facebook have all been widely successful, and I cant help but feel this in part is due to the open source nature of the projects and the foundations they are built upon.

One of the key reasons open source projects have been so successful is the support that they offer, online wikis abd journals mean its easier than ever to find help and get issues resolved, the same with bugs and issue, and features which may be added over time, open source projects are like children, they grow because many people contribute to their experimce and after time they become wise and know what is to be expected.

Now I dont wish to upset, but in my mind the future seems pretty set, open source is the way things are going, and with ASP.net slowly dying out, developer and designers alike are embracing this brave new world. The real success story here isnt the improved support, or the fact that its free, its about the pride and passion that gets put into open source projects, where money is no longer the driving force, its something far more rewarding, that of the pride and peace of mind the contributers have towards the projects, to know that they have created something that helps and actually makes a difference, and may just makes peoples lives that little bit easier, and thats something i dont think anyone can put a price on.


Network Navigation, Riding on googles chrome

With google announcing, somewhat accidentally, the launch of its new browser google chrome, it has left a lot of web designers and developers pondering the question, do we really need another browser? After reading the cartoon google do give some good justification for why thay have chosen to create a new browser. The ability to use multi tab browsing effectively without the hinderence of slowed browser speed is one strong pro to the new system and i cant help but feel that maybe google are been very tacticle in delivering the product to PC users first. If google can break the deadlock of IE6 by getting PC uses to give up the ghost and adopt a newer, better browser, which offers a better user experience, that would be no mean feat.

But the question bothering me and indeed many others is if google felt there was nothing better out there, and thus they would have to create there own totally unique browser, why did they take mozilla’s existing code base to build upon? Further more, they claim that chrome is completely open source, so anyone can work to improve it… isnt firefox already that exact being? an open source project from start to finnish which has been a marvel for developers and web designers alike who have an array of toosl at their disposal, not to mention the end user experince.

The problem i truely have with google chrome is that its doing something, that was already done, then taking the credit. If google wanted to make a smart move they should have simply put a link to firefox on the google search page, and contributed to the open source code base which is already available. But then technically it wouldnt have been ‘all credit reserved’ google combined with the fact google would need to share its information with outsiders, heaven forbid!

Now I don’t want to put people off, my advice would be try it out, and if you cant do that (mac & linux users) try reading a couple of reviews techzilo and DevCentral have a good introductions to the topic with some screens of what to expect. But remember this, everytime a new browser walks onto the web thats another set of testing and as much as I hate to suggest it another set of hacks to make things work all over. So perhaps the only way to move forward is to step back and assess what we have, and what we need, then maybe we get the compatability sorted once and for all.


The Integration of Networks

‘The problem with communication… is the illusion that it has been accomplished.’

(George Bernard Shaw)

One would assume that a netowrk, in effect a series of computers connected to one another, would offer only a limited number of functions. That one could share data, disribute information and so on. Yet with the rise of network non-places, there in lies an evolution, a cultural phenomenon which has slowly been encouraging a change in the way one would percieve the internet and indeed any network. The rise of concepts such as ‘myspace.com’ and ‘facebook.com’ have brought with them a trend, a fashion if you will. That an individual may feel so insecure in thier being that, it is found neccessary to describe, if not validate ones self in these non-places. The influence of being webwize has extended itself, through the need to be digital. To exists as flesh and bone, as well as inprint ones ‘digital representation’ in a non-place. One looses the concept and meaning of communication, in expressing a feeling, or statement in a public arena, for all to see. This may perhaps be for a greater sense of importance, as a statement of self. However it is percieved as both a new media and sociological development. It may well be that of a passing trend, or it may be the start of something bigger. The need to fulfil ones wants and desires as though it were a exhibition to others. This concept may be foriegn to some, but think about it the next time you are reading a posting, or a comment in a public space, ask yourslef, why is this here?, why would one choose such an open arena to display a message or pose a question? As a concept it intruges me, Your views may be posted below in the irony of this illusion.


tutorials on Javascript Date Objects

If you have had any experince of working with the date object in javascript you will know it is particularly bad at this task, however its not so much that its bad, more that there is a lack of resource on the subject. If you were looking for explanations on a language like PHP you can go to php.net which is a definitive guide on the subject, but javascript has nothing like this, and relies on you trawling through forums which tell you everything except what you want to know on the subject. However fear not as I have put together some resources, which may help you do whatever you want to do with dates in javascirpt.

The chances are you want to do something specific with a date, for info on date formats check out Date Funcitons on matt kruse’s website, hes got some pretty nifty tools to help understand javascript expected date format cunnundrum. But the basic concept to remember when you want to do anything with a date, is that it must be in a correct date format for javascirpt to recognise it. Once you have this, thats half the battle, from then on you can do whatever you would like with it.

One of the great features of the jquery is its capacity for plugins. If you have jquery installed already, you should definatly try out jquery.date.js This is a powerful tool for doing everything and anything to date objects, the code itself explains how the code can be applied.

Of course if what you are looking for is far less complicated, it is always worth checking out tizag, for a comprehensive guide to the date object()

Hopefully these resources will prove useful resources in helping you do what you want with date objects.


FancyBox – A jquery image gallery plugin

There are a lot of javascript image galleries out there which you may want to use on your website. I am an avid fan of jQuery – so when I stumbled upon a Jquery plugin called FancyBox I was instantly taken. Its a pretty simple plugin that uses basic lightbox technology, but its got a really well rounded finnish which will enahchance any page it is placed on.

Now this plugin does have some documentation, but I thought i would try to simplify it for the more design focused readers out there.

Step 1 – Download It

Download the latest stable relese of the plugn

down.png

Step 2 – Plug It In

once you have downloaded the plugin you will want to uplaod it to you server. For this to work you will also need a copy of jquery, which you can download from jquery.com

Step 3 – Include It

Its important that when you call the files in you call jquery before you call ‘jquery.fancybox.js’ as it will only work if you call in the framework first. So it should look like this:

<script src="/js/jquery.js" type="text/javascript"></script>
<script src="/js/jquery.fancybox.js" type="text/javascript"></script>
<link href="/css/fancybox.css" rel="stylesheet" type="text/css" />

Step 4 – Use It

Now comes the fun part, take your thumbnail version of the image and place it in a link to its bigger brother, this should look something like this;

<a href="big_image.jpg"><img src="small_image.jpg" /></a>

Step 5 – Activate it

To activate the plugin simply call it, if you want to control a few additional features you can control these in the plugin call:

$(function() {
  $("p#test3 a").fancybox({
    'zoomSpeedIn': 0,
    'zoomSpeedOut': 0,
    'overlayShow': true
  });
});

And thats all there is to it, so in 5 very simple steps you can have your own awesome image gallery