The code

Let’s cover the jQuery first.

$(document).ready(function(){
	$(".button").button();
 
	$('.back').click(function(){
		parent.history.back();
		return false;
	});
});

Now the HTML

<a class="button back" href="#">Back</a>

The above back link/button is now a functioning back button. Make sure you include both jQuery and jQuery UI.

jQuery makes it easy to determine if an element is visible or hidden with a simple function ‘is()’ when used in conjunction with the element and a selector ‘:visible’ you can now determine if in fact an element is visible or not. I will cover some basic usage examples and show you how I implemented this in my own application.

Getting started:

Let’s include jquery.

1

<script type="text/javascript" src="/js/jquery.js"></script>

Now that jquery is included we can start using it’s wonderful magic! Below is some basic html:

1
2
3

<div id="holder">
  <p id="warning">This is a warning!</p>
</div>

Let’s say we want to detect if #warning is visible or not we would simply call the element, then use the ‘is()’ function in conjunction with ‘:visible’ like so:

1
2
3
4
5

$(document).ready(function(){
  if( $('#warning').is(':visible') ){
    alert('The Warning is visible');
  }
});

As you see the alert would pop open and tell us the element is visible. It’s also very simply to revers the logic and see if it’s NOT visible:

1
2
3
4
5

$(document).ready(function(){
  if( !$('#warning').is(':visible') ){
    alert('The Warning is NOT visible');
  }
});

How I used this

Well, my example was very similar to how i used this, i was looking for a flash message in rails, if the message was visible to the user then i wanted to to slide up after a few seconds. So i will use the same example above as it’s very close to mine.

1
2
3

<div id="holder">
  <p id="warning">You have logged in!</p>
</div>

As you see the warning is visible and now below is he JS to handle it:

1
2
3
4
5
6

$(document).ready(function(){
  if( $('#warning').is(':visible') ){
    // Delay 5 seconds then slide up
    $('#warning').delay('5000').slideUp();
  }
});

You can add ‘delay()’ function to almost anything, it beats out having to use a ‘setTimeOut’ but that’s for another post.

This was written for a friend who was having issues with getting an auto complete form to work.

Auto complete forms are now becoming essential to every day web development and knowing how to build such a tool will in some cases make you a hero! In the tutorial below i will be using PHP and jQuery. jQuery offers its own tool for this common problem in the jQuery UI library.

Autocomplete, when added to an input field, enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering.

By giving an Autocomplete field focus or entering something into it, the plugin starts searching for entries that match and displays a list of values to choose from. By entering more characters, the user can filter down the list to better matches. This can be used to enter previous selected values, for example you could use Autocomplete for entering tags, to complete an address, you could enter a city name and get the zip code, or maybe enter email addresses from an address book. You can pull data in from a local and/or a remote source: Local is good for small data sets (like an address book with 50 entries), remote is necessary for big data sets, like a database with hundreds or millions of entries to select from.

Lets get right into it. Lets say you need to pull a list of usernames from the database. So when the user types, it will start completing the username for them.

The HEAD of the document

I will be including jQuery and jQuery UI into the page.

1
2
3
4

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript"></script>
 
<!-- You may also include the jQuery css document -->

The HTML:

<input id="get_usernames" name="username" type="text" />

As you see this is a super basic just one input needed.

The Javascript:

1
2
3
4

$("#get_usernames").autocomplete({
	source: "/search/get_username",
	minLength: 1
});

The above code is doing a few things first it’s looking to the id get_usernames (#get_usernames). Now that we have found the element we want let’s add jQuery’s autocomplete to it. The autocomplete needs some basic stuff, first off lets tell it where to get the data (source: “/search/get_username”). Next lets tell it when to start looking, this should be an integer. In the sample i am telling autocomplete to look to the database after the user types in only 1 character. You can set this to what you need. (minLength: 1)

The PHP (Using Codeigniter)

1
2
3
4
5
6
7

function get_username() {
                $usernames = false;
		if($_GET['term']){
			$usernames = $this->db->select('username')->from('users')->where_like('username', $_GET['term'])
		}
		echo json_encode($usernames);
}

Need to return key and value?

1
2
3
4
5
6
7
8
9
10
11
12

function get_username() {
                $usernames = false;
                $UList = array();
		if($_GET['term']){
			$usernames = $this->db->select('username')->from('users')->where_like('username', $_GET['term'])
		}
 
		foreach($usernames->result() as $user){
			$UList[$user->id] = $user->username;
		}
		echo json_encode($UList);
}

You will see that we are looking for a request named “term” this is default. After getting the value i am selecting usernames like the one entered into the text field. After grabbing the data i am returning it in a json format by using (json_encode). This will then send the data back to the UI showing a list of usernames like the one you typed in.

Hope that helped!

• Google’s Content Distribution Network has libraries on their various servers across the world and if you use their CDN link, when a user’s browser resolves the URL, their browser will automatically download the file from the closest available server, which will be a much faster download than if you force a user to download the file from your host server in whichever country your website is hosted.
• Google’s Content Distribution Network will save you a great deal of bandwidth if you have large traffic on your website and a limited bandwidth with your host.
• There is a good chance that the Google hosted version of that library is already cached on the user’s browser cache, as lot of big websites and portals use Google’s CDN links including Google itself and Google’s servers instruct browsers to cache the file for one year if there are quite a few requests for the same hosted file.

How to use Google CDN

Google’s CDN provides most of the popular, open source JavaScript Libraries with two ways of using each of them via the direct path in the script tags and via The Google AJAX Libraries API.

To use the Google AJAX Libraries API we need to include the Google “jsapi” script:

<script src="http://www.google.com/jsapi"></script>

The Google AJAX Libraries API provides a simple and powerful google.load() method which accepts two arguments, the first argument to google.load is the name of a library. The second argument is the version of the library:

<script>
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.1");
    google.setOnLoadCallback(function(){
        // use this instead of:
        /*
            $(document).ready(function(){  });
        */
    });
</script>

But to use this API, there is a different approach for the ready functions of all the libraries. For example, in the above code, we use google.setOnLoadCallback(function(){ }); instead of jQuery’s ready function. In-fact we use google.setOnLoadCallback(function(){ }); instead of all different library’s ready functions. This can be seen as a drawback or a good feature; I see it as a good feature as it gives me a single ready function for all libraries.

The second method to use Google’s CDN links is by the direct paths of the libraries in the script tags

Below is a list of all the JavaScript Libraries Google CDN provides with the direct paths and google.load implementation:

jQuery

name: jquery
versions: 1.2.3, 1.2.6, 1.3.0, 1.3.1, 1.3.2
load request: google.load("jquery", "1.3.2");
extras: uncompressed:true, e.g., google.load("jquery", "1.3.2", {uncompressed:true});
path: http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
path(u): http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js

jQuery UI

name: jqueryui
versions: 1.5.2, 1.5.3, 1.6, 1.7.0, 1.7.1
load request: google.load("jqueryui", "1.7.1");
extras: uncompressed:true, e.g., google.load("jqueryui", "1.7.1", {uncompressed:true});
path: http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js
path(u): http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.js
note: This library depends on jquery. Before loading this module, you must load jquery. e.g.:
        google.load("jquery", "1.3.2");
        google.load("jqueryui", "1.7.1");

Prototype

name: prototype
versions: 1.6.0.2, 1.6.0.3
load request: google.load("prototype", "1.6.0.3");
path: http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js

script.aculo.us

name: scriptaculous
versions: 1.8.1, 1.8.2
load request: google.load("scriptaculous", "1.8.2");
path: http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js
note: This library depends on Prototype. Before loading this module, you must load Prototype. e.g.:
        google.load("prototype", "1.6");
        google.load("scriptaculous", "1.8.2");

SWFObject

name: swfobject
versions: 2.1
load request: google.load("swfobject", "2.1");
extras: uncompressed:true, e.g., google.load("swfobject", "2.1", {uncompressed:true});
path: http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js
path(u): http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject_src.js

Yahoo! User Interface Library (YUI)

name: yui
versions: 2.6.0, 2.7.0
load request: load request: google.load("yui", "2.7.0");
extras: uncompressed:true, e.g., google.load("yui", "2.7.0", {uncompressed:true});
path: http://ajax.googleapis.com/ajax/libs/yui/2.7.0/build/yuiloader/yuiloader-min.js
path(u): http://ajax.googleapis.com/ajax/libs/yui/2.7.0/build/yuiloader/yuiloader.js

Below is my html where we will load the content.

1

<div id="LoadContent"></div>

Now lets look at the javascript needed to load a remote page in.

1

$("#LoadContent").load("path/to/remote/file.php");

After that is called the contents of “file.php” would be loaded into the div above! Quick and easy way to include item into your app. You may also pass variables to the page like so:

1

$("#LoadContent").load("path/to/remote/file.php", {id: 1, name: "Greg"});

Hope this small tool helps change your mind about JQuery!

It get around this common issue i am now using jQuery to add a class to my body tag.

1
2
3
4
5

if($.browser.msie){
        $('body').addClass('browserIE');
        // Add the version number
        $('body').addClass('browserIE' + $.browser.version.substring(0,1));
}

If the user is using IE it will add a class to teh body tag like so:

1

<body class="browserIE browserIE#">

The “#” stands for the version of IE the user is running.

You can now access elements on your page that neeed to be corrected for IE by calling:

1
2
3

.browserIE6 #myDiv {
     display:block;
}

This will work much better then current hacks. Hope that helps someone!!

Below is an idea of what i am doing to read the cookies from the main application.

1
2
3
4

if($.cookie('Cookie_name')) {
     var MainAppCookie = $.cookie('Cookie_name');
     $.cookie('NewCookie_' + MainAppCookie , 'Value');
}

To use the $.cookie i am using a simple plugin for jQuery. This allows me to access the cookies quick and easy. Now if the application gives me a special cookie i can then delete my old ones by doing this…

1
2
3

if($.cookie('Cookie_name') == 'Special Text') {
     $.cookie('MyCookie', null, {-1}); // This will delete the cookie
}

We have two pieces of fantastic, albeit serendipitous, news today: Both Microsoft and Nokia are taking the major step of adopting jQuery as part of their official application development platform. Not only will they be using it for their corporate development but they will be providing it as a core piece of their platform for developers to build with…

Read more of this at the jQuery Blog>>