You Are Here Home > JavaScript

JavaScript

jQuery UI Dialog And The Enter – Return Key Problem

This is another post for my ‘Annoying Stuff’ collection and this one is very, so very annoying…

The problem is that jQuery UI, supports forms in dialogs but the problem is that a user can’t hit ‘Enter’ to submit the form, it will break everything, a user has to actually hit the ‘Submit’ (or whatever) button manually. This make the whole thing completely useless unless you make some changes that are basically tweaking the internals of jQuery UI, which is ugly and can break if they change things around but sadly this is the only solution for now.

Assuming that you use the same syntax jQuery UI suggests to create your form, the fix is something like this:

$('.dialog').find('input').keypress(function(e) {
	if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
		$(this).parent().parent().parent().parent().find('.ui-dialog-buttonpane').find('button:first').click(); /* Assuming the first one is the action button */
		return false;
	}
});

You might have to modify it a tiny bit, if that’s the case, you most likely have to change the part $(‘.dialog’) so that it selects the right container that wraps the form…

jQuery UI Dialog And The Enter – Return Key Problem
Comments (0)   Filed under: Annoying Stuff, JavaScript, Programming, Web Design, Web Development, jQuery   Posted by: Codehead on February 18, 2010

document.getElementById On All Browsers – Cross browser getElementById

Here is a little JavaScript function that gets an object according to it’s id and it’s cross browser.

/*********************************************************************
   * Get an object, this function is cross browser
   * Usage:
   * var object = get_object(element_id);
   * @Author Hamid Alipour http://blog.code-head.com/
  **/
  function get_object(id) {
   var object = null;
   if (document.layers) {
    object = document.layers[id];
   } else if (document.all) {
    object = document.all[id];
   } else if (document.getElementById) {
    object = document.getElementById(id);
   }
   return object;
  }
  /*********************************************************************/
document.getElementById On All Browsers – Cross browser getElementById
Comments (0)   Filed under: JavaScript, Web Browsers, Web Development   Posted by: Codehead on February 8, 2010

onMouseOut fix on nested elements – JavaScript

When you have nested elements and you add an onMouseOut event handler to the parent element, browsers trigger onMouseOut event when mouse pointer hovers it’s child elements.
While this is a standard behaviour, for one project I needed to write a code to override this behaviour.
With this code, when you mouse over the child elements, onMouseOut event will be ignored.

You can download this code here:
http://images.code-head.com/code/javascript/fixOnMouseOut.zip

You can test it here:
http://images.code-head.com/code/javascript/fixOnMouseOuttest.html

This code is cross browser and here is how to use it:

<script language="javascript" type="text/javascript" src="fixOnMouseOut.js"> </script>
<div onMouseOut="fixOnMouseOut(this, event, 'JavaScript Code');">
   So many child elements
</div>
onMouseOut fix on nested elements – JavaScript
Comments (1)   Filed under: JavaScript, Web Design, Web Development   Posted by: Codehead on February 3, 2010

AJAX – Beginner AJAX Tutorial – Creating a simple AJAX website with example

We are closing down our forums, it’s time to move on, but we are keeping some important threads, here are the AJAX tutorials…

Beginner AJAX Tutorial – Creating a simple AJAX website with example

What you need to know before you read this tutorial:

You need to read the previous two tutorials, they are located at here:
Beginner Ajax Tutorial
Beginner AJAX Tutorial – Display a Progress Bar or a Loading Message

(It will only takes a few minutes and will catch you up to this point.)

We are going to make a simple AJAX website with 4 pages.

A few things to note:

1. We are going to make a website that works just fine for users without JavaScript.
2. The back-end will be PHP, it might not be the best way to implement but it’s simple and effective for the purpose of this tutorial.
3. You will be able to download the complete source code for this AJAX tutorial.
4. In this AJAX tutorial the browser back button is ‘broken’, and users can’t bookmark internal pages of this website; fixing these issue is the topic of the next tutorial.
5. In this tutorial I’m going to demonstrate what can be done with AJAX in a simple way using inline JavaScript; separating presentation and behavior will be the topic of later tutorials.
Inline JavaScript looks like this:

<a href="?page=about" onClick="return get_page('about');">About us</a>

Let’s start with the back-end

Here is the directory structure of this website:

/index.php
/templates/main.php
/templates/home.php
/templates/about.php
/templates/services.php
/templates/contact.php
/images/few images
/yui/our yui code libraries

Here is the index.php source code:

<?php
 
	$templates_folder = 'templates/';
 
	if( !isset($_GET['page']) ) {
		$_GET['page'] = 'home';
	}
 
	/**
	 * Because we are going to get the content of a file based on user input and display it
	 * to the user, we use basename function to make sure a sneaky user doesn't try
	 * something like ../../ to get a password file or something important.
	**/
	$page = trim(basename($_GET['page'])) .'.php';
 
	$page_file = $templates_folder .$page;
 
	/**
	 * Note: This assumes your templates are static, that is: there is no PHP code
	 * in them, I will write about how to handle that situation later but for now,
	 * let's keep it simple :)
	**/
	if( file_exists($page_file) ) {
		$page_content = file_get_contents($page_file);
	} else {
		$page_content = 'This page doesn\'t exist here.';
	}
 
	/**
	 * If the $_GET['AJAX'] is set, then the request is coming from our JavaScript
	 * get_page() function, so we just send the $page_content to the browser.
	**/
	if( isset($_GET['AJAX']) ) {
		echo $page_content;
	} else {
		include $templates_folder .'main.php';
	}
 
?>

What it does is straightforward and you can understand the code just by reading it.
But here is how it works:

1. It checks the contents of the $_GET['page'] variable for the name of the page a visitors wants to visit and assigns it to $page.

$page = trim(basename($_GET['page'])) .'.php';
 
$page_file = $templates_folder .$page;

$page_file now contains the exact path to our template.

Also note that, this part of the code:

if( !isset($_GET['page']) ) {
	$_GET['page'] = 'home';
}

Makes sure that the home page is the default page, and if $_GET['page'] is empty it assigns ‘home’ to it.

2. It checks if the page exists in the templates folder.

if( file_exists($page_file) ) {
	$page_content = file_get_contents($page_file);
} else {
	$page_content = 'This page doesn\'t exist here.';
}

If it exists then it assigns it’s content to $page_content variable if not an error message that this page does not exist.

3. It checks the content of $_GET['AJAX'] variable and if its set, the request is coming from our JavaScript code:

if( isset($_GET['AJAX']) ) {
	echo $page_content;
} else {
	include $templates_folder .'main.php';
}

If it is coming from our JavaScript code then it only prints out the content of the page, but if not, it prints the main.php template.

Main.php source code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Sample AJAX-XHR Website</title>
</head>
 
<body>
 
		<?php echo $page_content; ?>
 
</body>
</html>

This is the main.php in it’s simplest format, I omitted the JavaScript.
What it does is just printing the $page_content variable in the page.

Other templates:

They only contain plain HTML code, you will see everything together soon.

The front end

All the JavaScript code goes into main.php, here is the JavaScript code we had so far in the previous tutorial:

	<script type="text/javascript" src="yahoo.js"> </script>
	<script type="text/javascript" src="event.js"> </script>
	<script  type="text/javascript" src="connection.js"> </script>
 
	<script type="text/javascript">
		function success_handler(o) {
			replace_html('content', o.responseText);
		}
 
		function failure_handler(o) {
			replace_html('content', 'Server or your connection is death');
		}
 
		function replace_html(id, content) {
			document.getElementById(id).innerHTML = content;
		}
 
		function show_progressbar(id) {
			replace_html(id, '<img src="http://images.code-head.com/progress-bars/4.gif" border="0" alt="Loading, please wait..." />');
		}
 
		function send_request() {
			show_progressbar('content');
			var callback = { success:success_handler,	failure:failure_handler, timeout: 10000 };
			YAHOO.util.Connect.asyncRequest('GET', 'http://images.code-head.com/tutorials/ajax/beginner-ajax-tutorial.php', callback);
		}
 
		function test_failure() {
			show_progressbar('content');
			var callback = { success:success_handler,	failure:failure_handler, timeout: 10000 };
			YAHOO.util.Connect.asyncRequest('GET', 'http://images.code-head.com/tutorials/ajax/some-file-that-doesnt-exists.php', callback);
		}
 
		var progress_bar = new Image();
		progress_bar.src = 'http://images.code-head.com/progress-bars/4.gif';
	</script>

The code we use for this tutorial is similar, we will only replace send_request() and test_failure() with one function, get_page():

	<script type="text/javascript" src="yui/yahoo.js"> </script>
	<script type="text/javascript" src="yui/event.js"> </script>
	<script type="text/javascript" src="yui/connection.js"> </script>
 
	<script type="text/javascript">
 
		function replace_html(id, content) {
			document.getElementById(id).innerHTML = content;
		}
 
		function show_progressbar(id) {
			replace_html(id, '<img src="http://images.code-head.com/progress-bars/4.gif" border="0" alt="Loading, please wait..." />');
		}
 
		function success_handler(o) {
			replace_html('content', o.responseText);
		}
 
		function failure_handler(o) {
			replace_html('content', 'Server or your connection is death.');
		}
 
		function get_page(page) {
			if( page == '' ) {
				/* Do nothing if 'page' is empty, you might want to show some error message. */
				return false;
			}
			show_progressbar('content'); /* Show progress bar while waiting */
			var callback = { success:success_handler,	failure:failure_handler, timeout: 10000 };
			YAHOO.util.Connect.asyncRequest('GET', 'index.php?AJAX=true&page=' + page, callback);
			return false;
			/**
			 * return false!
			 * Because this will prevent the browser from navigating to page specified in
			 * the link's href attribute.
			**/
		}
 
		/* Let's preload our progress bar */
		var progress_bar = new Image();
		progress_bar.src = 'http://images.code-head.com/progress-bars/4.gif';
 
	</script>

get_page() function is very simple, here is what it does:

1. It receives the page name as an argument.

function get_page(page) {
	// ...
}

2. It check if the page variable is empty.

if( page == '' ) {
	return false;
}

Here, this function does nothing if page variable is empty, you might want to show an error message.

3. It shows the progress bar before sending the request to the server, letting the user know that something is actually happening:

show_progressbar('content');

4. It sends the request to server and sets our success_handler and failure_handler as callbacks:

var callback = { success:success_handler,	failure:failure_handler, timeout: 10000 };
YAHOO.util.Connect.asyncRequest('GET', 'index.php?AJAX=true&page=' + page, callback);

Note: We are sending a request to:

'index.php?AJAX=true&page=' + page

We set the AJAX variable to true and we set the page variable to the page variable that passed to the function. (It can be ‘about’, ’services’, etc.)

5. It returns false. Return false will result in any link that uses this function to appear as not working, that is, the browser won’t try to navigate
to the page specified in the links href attribute. Instead of letting the browser navigate to that page we replace the content of the page with JavaScript.

main.php with the JavaScript and a menu:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Sample AJAX-XHR Website</title>
 
	<!-- Usual yui stuff -->
	<script type="text/javascript" src="yui/yahoo.js"> </script>
	<script type="text/javascript" src="yui/event.js"> </script>
	<script type="text/javascript" src="yui/connection.js"> </script>
 
	<script type="text/javascript">
 
		function replace_html(id, content) {
			document.getElementById(id).innerHTML = content;
		}
 
		function show_progressbar(id) {
			replace_html(id, '<img src="http://images.code-head.com/progress-bars/4.gif" border="0" alt="Loading, please wait..." />');
		}
 
		function success_handler(o) {
			replace_html('content', o.responseText);
		}
 
		function failure_handler(o) {
			replace_html('content', 'Server or your connection is death.');
		}
 
		function get_page(page) {
			if( page == '' ) {
				/* Do nothing if 'page' is empty, you might want to show some error message. */
				return false;
			}
			show_progressbar('content'); /* Show progress bar while waiting */
			var callback = { success:success_handler,	failure:failure_handler, timeout: 10000 };
			YAHOO.util.Connect.asyncRequest('GET', 'index.php?AJAX=true&page=' + page, callback);
			return false;
			/**
			 * return false?!
			 * Because this will prevent the browser to navigate to page specified in
			 * the link's href attribute.
			**/
		}
 
		/* Let's preload our progress bar */
		var progress_bar = new Image();
		progress_bar.src = 'http://images.code-head.com/progress-bars/4.gif';
 
	</script>
 
</head>
 
<body>
<div id="main-wrapper">
<div id="main-padding">
 
	<h1>Sample AJAX-XHR Website</h1>
 
	<div id="menu">
		<a href="?page=about" onClick="return get_page('about');">About us</a>
		&nbsp; &nbsp;
		<a href="?page=services" onClick="return get_page('services');">Our services</a>
		&nbsp; &nbsp;
		<a href="?page=contact" onClick="return get_page('contact');">Contact us</a>
		&nbsp; &nbsp;
		<a href="?page=home" onClick="return get_page('home');">Home</a>
	</div>
 
	<div id="content">
 
		<?php echo $page_content; ?>
 
	</div>
 
</div>
</div>
</body>
</html>

2 notes:
1. Menu links are like:

<a href="?page=about" onClick="return get_page('about');">About us</a>

Their href attribute is actually pointing to the right page, so users without JavaScript will be able to navigate through these pages, and search engines will have
no problem indexing these pages as well.

2. On the other hand their onClick event is set to call get_page() function and passes the page name as the argument to the get_page().

Here is how it works all together:
http://images.code-head.com/tutorials/ajax/sample-AJAX-XHR-website/

Please note: Ignore the look of this example, the point is the functionality.
You can try turning off your JavaScript and see that the example site still works just fine without it.

Download the complete source code here if you want to take a closer look at everything:
http://images.code-head.com/tutorials/ajax/sample-AJAX-XHR-website/sample-AJAX-XHR-website.zip

If you have questions or suggestions, feel free to reply to this thread.
-Codehead

Update:

I should mention that it’s a long time that I moved on to use jQuery rather than yui and I think jQuery is much nicer and easier to use library. I will hopefully write some tutrials on jQuery.

If you don’t know jQuery yet, download it here and HAVE FUN FOREVER!
Download jQuery

AJAX – Beginner AJAX Tutorial – Creating a simple AJAX website with example
Comments (0)   Filed under: AJAX, JavaScript, PHP, Web Development, jQuery, yui   Posted by: Codehead on January 21, 2010

AJAX – Beginner AJAX Tutorial – Display a Progress Bar or a Loading Message

We are closing down our forums, it’s time to move on, but we are keeping some important threads, here are the AJAX tutorials…

AJAX – Beginner AJAX Tutorial – Display a Progress Bar or a Loading Message

In the last AJAX tutorial I wrote about how to send requests to the server and receive the response,
in this short AJAX tutorial I will show you how to show a progress bar to the user when your application is
waiting for the server’s response, so your users will see something is actually happening :)

If you haven’t read the first AJAX tutorial, you’ll find it here:
http://blog.code-head.com/ajax-beginner-ajax-tutorial
It won’t take that long.

Here is the code that we have so far:

<html>
<head>
<title>Beginner AJAX Tutorial - Progress Bar</title>
 
	<script type="text/javascript" src="yahoo.js"> </script>
	<script type="text/javascript" src="event.js"> </script>
	<script type="text/javascript" src="connection.js"> </script>
 
	<script type="text/javascript">
		function success_handler(o) {
			document.getElementById('content').innerHTML = o.responseText;
		}
 
		function failure_handler(o) {
			document.getElementById('content').innerHTML = 'Server or your connection is death';
		}
 
		function send_request() {
			var callback = { success:success_handler,	failure:failure_handler, timeout: 10000 };
			YAHOO.util.Connect.asyncRequest('GET', 'http://images.code-head.com/tutorials/ajax/beginner-ajax-tutorial.php', callback);
		}
 
		function test_failure() {
			var callback = { success:success_handler,	failure:failure_handler, timeout: 10000 };
			YAHOO.util.Connect.asyncRequest('GET', 'http://images.code-head.com/tutorials/ajax/some-file-that-doesnt-exists.php', callback);
		}
	</script>
 
</head>
 
<body>
<a href="javascript:send_request();">Send Request</a> | <a href="javascript:test_failure();">Fail a request</a>
<div id="content">
 
</div>
</body>
</html>

To show a loading progress bar you need to get a progress bar image, you can get one by searching.

I will use this one:
AJAX progress Bar

Let’s begin

First let’s make our code a little bit nicer and make a new function called, replace_html

		function replace_html(id, content) {
			document.getElementById(id).innerHTML = content;
		}

The way it works is that it receives two arguments:
‘id’ is the ID of the container where you want to replace the content
‘content’ is the new content to replace the old content :)

Now let’s rewrite our success_handler and failure_handler to use this function:

		function success_handler(o) {
			replace_html('content', o.responseText);
		}
 
		function failure_handler(o) {
			replace_html('content', 'Server or your connection is death');
		}

In success_handler for example, we call replace_html(‘content’, o.responseText); instead of directly
replacing the content of our ‘content’ DIV like: document.getElementById(‘content’).innerHTML = o.responseText;

Why?

First, because we don’t need to write document.getElementById(‘content’).innerHTML = … all over the place and
we encapsulate this into replace_html function.

Second this will centralize our way of changing the content of a DIV, so if later for example we
find a better way to replace a DIV’s content, then we will just change one function and we don’t need
to go through and find all the lines like: document.getElementById(‘content’).innerHTML = … and
change them.

Third, suppose you find out that on one kind of browser innerHTML doesn’t work, then again you
only need to change one function.

So far, all together we have this:

<html>
<head>
<title>Beginner AJAX Tutorial - Progress Bar</title>
 
	<script type="text/javascript" src="yahoo.js"> </script>
	<script type="text/javascript" src="event.js"> </script>
	<script type="text/javascript" src="connection.js"> </script>
 
	<script type="text/javascript">
		function success_handler(o) {
			replace_html('content', o.responseText);
		}
 
		function failure_handler(o) {
			replace_html('content', 'Server or your connection is death');
		}
 
		function replace_html(id, content) {
			document.getElementById(id).innerHTML = content;
		}
 
		function send_request() {
			var callback = { success:success_handler, failure:failure_handler, timeout: 10000 };
			YAHOO.util.Connect.asyncRequest('GET', 'http://images.code-head.com/tutorials/ajax/beginner-ajax-tutorial.php', callback);
		}
 
		function test_failure() {
			var callback = { success:success_handler, failure:failure_handler, timeout: 10000 };
			YAHOO.util.Connect.asyncRequest('GET', 'http://images.code-head.com/tutorials/ajax/some-file-that-doesnt-exists.php', callback);
		}
	</script>
 
</head>
 
<body>
<a href="javascript:send_request();">Send Request</a> | <a href="javascript:test_failure();">Fail a request</a>
<div id="content">
 
</div>
</body>
</html>

For our progress bar to show up fast, we have to preload it first, here is a simple way of preloading our progress bar:

		var progress_bar = new Image();
		progress_bar.src = 'http://images.code-head.com/progress-bars/4.gif';

This piece of JavaScript code will make an image instance and sets it’s source attribute to our progress bar, this is enough
to force the browser to preload the progress bar in it’s cache.

To display this progress bar when we are waiting for the server’s response, let’s write another function show_progressbar

		function show_progressbar(id) {
			replace_html(id, '<img src="http://images.code-head.com/progress-bars/4.gif" border="0" alt="Loading, please wait..." />');
		}

This function receives the ID of the container which we want to show our progress bar in and uses our replace_html
function to display the progress bar.
It simply replaces the content of that particular container with this bit of HTML code:

	<img src="http://images.code-head.com/progress-bars/4.gif" border="0" alt="Loading, please wait..." />

Now we will have to change our send_request and test_failure to use this function and show a progress bar when they are
starting to send a request:

		function send_request() {
			show_progressbar('content');
			var callback = { success:success_handler,	failure:failure_handler, timeout: 10000 };
			YAHOO.util.Connect.asyncRequest('GET', 'http://images.code-head.com/tutorials/ajax/beginner-ajax-tutorial.php', callback);
		}
 
		function test_failure() {
			show_progressbar('content');
			var callback = { success:success_handler,	failure:failure_handler, timeout: 10000 };
			YAHOO.util.Connect.asyncRequest('GET', 'http://images.code-head.com/tutorials/ajax/some-file-that-doesnt-exists.php', callback);
		}

They simply call show_progressbar with the ID of our content DIV and then send their request to the server.

All together we have this code:

<html>
<head>
<title>Beginner AJAX Tutorial - Progress Bar</title>
 
	<script type="text/javascript" src="yahoo.js"> </script>
	<script type="text/javascript" src="event.js"> </script>
	<script type="text/javascript" src="connection.js"> </script>
 
	<script type="text/javascript">
		function success_handler(o) {
			replace_html('content', o.responseText);
		}
 
		function failure_handler(o) {
			replace_html('content', 'Server or your connection is death');
		}
 
		function replace_html(id, content) {
			document.getElementById(id).innerHTML = content;
		}
 
		function show_progressbar(id) {
			replace_html(id, '<img src="http://images.code-head.com/progress-bars/4.gif" border="0" alt="Loading, please wait..." />');
		}
 
		function send_request() {
			show_progressbar('content');
			var callback = { success:success_handler,	failure:failure_handler, timeout: 10000 };
			YAHOO.util.Connect.asyncRequest('GET', 'http://images.code-head.com/tutorials/ajax/beginner-ajax-tutorial.php', callback);
		}
 
		function test_failure() {
			show_progressbar('content');
			var callback = { success:success_handler,	failure:failure_handler, timeout: 10000 };
			YAHOO.util.Connect.asyncRequest('GET', 'http://images.code-head.com/tutorials/ajax/some-file-that-doesnt-exists.php', callback);
		}
 
		var progress_bar = new Image();
		progress_bar.src = 'http://images.code-head.com/progress-bars/4.gif';
	</script>
 
</head>
 
<body>
<a href="javascript:send_request();">Send Request</a> | <a href="javascript:test_failure();">Fail a request</a>
<div id="content">
 
</div>
</body>
</html>

Go ahead and try it here:
http://images.code-head.com/tutorials/ajax/beginner-ajax-tutorial-progress-bar.html

This is it for now, on the next AJAX tutorial we are going to make a little sample website with all of these:)
Thanks,
-Codehead

Next: AJAX – Beginner AJAX Tutorial – Creating a simple AJAX website with example

AJAX – Beginner AJAX Tutorial – Display a Progress Bar or a Loading Message
Comments (0)   Filed under: AJAX, JavaScript, PHP, Web Development, yui   Posted by: Codehead on

AJAX – Beginner AJAX Tutorial

We are closing down our forums, it’s time to move on, but we are keeping some important threads, here are the AJAX tutorials…

AJAX – Beginner AJAX Tutorial

What you need to know
A basic knowledge of HTML, JavaScript and a server side language.

What is AJAX?
AJAX stands for Asynchronous JavaScript And XML.

XML?!
Don’t worry you don’t need to know XML, in fact we won’t even use XML to write web applications with AJAX.

What data type we will use you are going to see in later tutorials, but I assure you we will use
something 100 times simpler.

Overview
There are a few benefits you can gain by using this technique, one is than you won’t need to send the common parts of the page to the browser whenever a user views a page on your website.

Since this is a beginner AJAX tutorial let’s make a very simple ‘Hello World’ AJAX application.

Step 1:
We are going to use Yahoo! UI library or ‘yui’.
The benefit of using yui is that you don’t need to worry about browser compatibility and also many developers are working on it to make it even better every day.

So go ahead and download the latest version here:
http://developer.yahoo.com/yui/download/

Step 2:
Extract the files and in the ‘build’ folder you will see many folders containing different parts of yui.

For this tutorial we only need yahoo.js, event.js and connection.js
So go ahead and make an HTML file and call it ajax.html (or whatever you want).

Now paste this code into your HTML file:

<html>
<head>
<title>Beginner AJAX Tutorial</title>
 
<script type="text/javascript" src="edit this path to yui/yahoo.js"> </script>
<script type="text/javascript" src="edit this path to yui/event.js"> </script>
<script type="text/javascript" src="edit this path to yui/connection.js"> </script>
 
</head>
<body>
<div id="content">
</div>
</body>
</html>

2 notes:
1. You must edit the path to yui library and be sure the source attribute of your script tags point to the right files.
2. I also added a div to the page so we can display the server’s response in it.

Now we included the portions of yui that we need in our page so let’s write some code.

Step 3:
Now we need to write some code to use yui’s connection object to send requests to the server.

To do this we need to write 2 JavaScript functions to handle 2 situations.
1. Success.
2. Failure, most likely the server didn’t respond.

So lets write our functions, first success:

function success_handler(o) {
document.getElementById('content').innerHTML = o.responseText;
}

The only thing this function does is that it sets the innerHTML of our content container.

2 notes:
1. innerHTML is a non standard attribute that almost all the browsers support.
2. o is an object yui will pass to your functions.

Now lets make our failure handler:

function failure_handler(o) {
document.getElementById('content').innerHTML = 'Server or your connection is death';
}

Here again we change the innerHTML with an appropriate error message.

So all together we have:

<html>
<head>
<title>Beginner AJAX Tutorial</title>
 
<script type="text/javascript" src="yahoo.js"> </script>
<script type="text/javascript" src="event.js"> </script>
<script type="text/javascript" src="connection.js"> </script>
 
<script type="text/javascript">
function success_handler(o) {
document.getElementById('content').innerHTML = o.responseText;
}
 
function failure_handler(o) {
document.getElementById('content').innerHTML = 'Server or your connection is dead';
}
</script>
 
</head>
<body>
<div id="content">
</div>
</body>
</html>

Let’s go ahead and write two more functions, one for sending a request to the server and one for trying the failure situation.

Here we go:

function send_request() {
var callback = { success:success_handler, failure:failure_handler, timeout: 10000 };
YAHOO.util.Connect.asyncRequest('GET', 'http://images.code-head.com/tutorials/ajax/beginner-ajax-tutorial.php', callback);
}

This is a simple function that sends an asynchronous request to the server.

Let’s take a look at it in more detail:

1. We defined a callback object which sets our success_handler and failure_handler functions for success and failure situations respectively
and also we define a timeout for the connection. This timeout is in milliseconds, so we are setting it to 10 seconds.
This means if we receive a response within 10 seconds then yui calls our success_handler function, otherwise it calls failure_handler.

2. The second line is the actual request. asyncRequest method will handle everything and calls our callback functions.
We are passing 3 parameters.

First parameter is the type of request, which is GET here because we are not sending any form data to the server. (I will show you POST requests in later tutorials)

Second parameter is the URL which we want to send the request to.

Third parameter is our callback object.

Now let’s make another function to test the failure situation:

function test_failure() {
var callback = { success:success_handler, failure:failure_handler, timeout: 10000 };
YAHOO.util.Connect.asyncRequest('GET', 'http://images.code-head.com/tutorials/ajax/some-file-that-doesnt-exists.php', callback);
}

This function is the same except it sends a request to a non-existing file, so it’s going to fail.

So far we have this:

<html>
<head>
<title>Beginner AJAX Tutorial</title>
 
<script type="text/javascript" src="yahoo.js"> </script>
<script type="text/javascript" src="event.js"> </script>
<script type="text/javascript" src="connection.js"> </script>
 
<script type="text/javascript">
function success_handler(o) {
document.getElementById('content').innerHTML = o.responseText;
}
 
function failure_handler(o) {
document.getElementById('content').innerHTML = 'Server or your connection is death';
}
 
function send_request() {
var callback = { success:success_handler, failure:failure_handler, timeout: 10000 };
YAHOO.util.Connect.asyncRequest('GET', 'http://images.code-head.com/tutorials/ajax/beginner-ajax-tutorial.php', callback);
}
 
function test_failure() {
var callback = { success:success_handler, failure:failure_handler, timeout: 10000 };
YAHOO.util.Connect.asyncRequest('GET', 'http://images.code-head.com/tutorials/ajax/some-file-that-doesnt-exists.php', callback);
}
</script>
 
</head>
<body>
<a href="javascript:send_request();">Send Request</a> | <a href="javascript:test_failure();">Fail a request</a>
<div id="content">
</div>
</body>
</html>

Note: I added the line:

<a href="javascript:send_request();">Send Request</a> | <a href="javascript:test_failure();">Fail a request</a>

To be able to test our little application.

Go ahead and try it here:

http://images.code-head.com/tutorials/ajax/beginner-ajax-tutorial.html

And the PHP file is only 3 lines:

<?php
echo 'Hello World!';
?>

That’s it for now.
Thanks and good luck!
-Codehead

Next: AJAX – Beginner AJAX Tutorial – Display a Progress Bar or a Loading Message

AJAX – Beginner AJAX Tutorial
Comments (6)   Filed under: AJAX, JavaScript, PHP, Web Development, yui   Posted by: Codehead on

Fixing markItUp layout issues in some browsers…

markItUp is a cool little text editor and the nice thing about it is that it’s very simple and light weight.

I had some layout issues in Gecko and Webkit browsers and the way to fix it is this:

1 – Go to:
/markitup/skins/markitup

2 – Open style.css and find:

.markItUpEditor {
	font:12px 'Courier New', Courier, monospace;
	padding:5px 5px 5px 35px;
	border:3px solid #3C769D;
	width:643px;
	height:320px;
	background-image:url(images/bg-editor.png);
	background-repeat:no-repeat;
	clear:both; display:block;
	line-height:18px;
	overflow:auto;
}

3 – Replace the it it with:

.markItUpEditor {
	font:12px 'Courier New', Courier, monospace;
	padding:5px;
	border:1px solid #AAAAAA;
	width: 275px;
	height: 150px;
	line-height:18px;
	overflow:auto;
}

I hope this helps someone…

Fixing markItUp layout issues in some browsers…
Comments (1)   Filed under: JavaScript, Web Design, Web Development, jQuery   Posted by: Codehead on November 19, 2009

A JavaScript/jQuery News Ticker

I know I haven’t posted anything lately, I have been busy which is a good thing but I couldn’t resist this one, here is a simple news ticker using JavaScript and the great jQuery library.

Here is the example:
http://images.code-head.com/code/javascript/jquery-news-ticker.html

I know you might be able to write this using objects in a nicer form but this will work and it’s to demonstrate the idea…

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery New Ticker</title>
 
	<script type="text/javascript" src="http://images.code-head.com/jquery/jquery.js"> </script>
 
   <script type="text/javascript">
		$(document).ready(function() {
			var current = -1;
			var elems = new Array();
			var elems_i = 0;
			$('.items').each(function() {
				elems[elems_i++] = $(this);
			});
			var num_elems = elems_i - 1;
			var animate_out = function() {
				elems[current].animate({ top: '-100px' }, 'fast', 'linear', animate_in);
			}
			var animate_out_delay = function() {
				setTimeout(animate_out, 1000); /****************************** Change 1000 to make it longer/shorter/whatever */
			}
			var animate_in = function() {
				current = current < num_elems ? current + 1 : 0;
				elems[current].css('top', '200px').animate({ top: '0px' }, 'fast', 'linear', animate_out_delay);
			}
			animate_in();
		});
	</script>
 
   <style type="text/css">
		.ticker {
			position: relative; /* So we can absolute the .items */
			width: 400px;
			height: 100px;
			overflow: hidden;
			margin: 100px;
			border: 1px dashed #666666;
		}
		.items {
			position: absolute;
			top: 200px;
			margin: 10px;
		}
	</style>
 
</head>
 
<body>
 
   <div class="ticker">
      <div class="items">I'm a Cool</div>
      <div class="items">JavaScript</div>
      <div class="items">News Ticker</div>
      <div class="items">Using jQuery</div>
      <div class="items">For Smooth</div>
      <div class="items">And Nice</div>
      <div class="items">Animation</div>
      <div class="items">By Hamid Alipour</div>
      <div class="items">@ <a href="http://blog.code-head.com" target="_blank">blog.code-head.com</a></div>
   </div>
 
</body>
</html>

Again, the code is straight forward, you must be able to understand what happens but here is a little explanation.

<div class=”items”> … </div> are the news headlines to be animated and using CSS, they are absolute-positioned somewhere under the parent <div class=”ticker”> … </div> box.

Normally, .itmes would be visible under the box, even when they are absolute-positioned but if you look into the stylesheet you will see:

.ticker {
   ...
   width: 400px;
   height: 100px;
   overflow: hidden;
   ...
}

That will prevent this from hapenning, so now our .items are floating somewhere under the box which is what we want. (Change it’s ‘width’ and ‘height’ to fit in whatever space you want…)

The JavaScript code starts with the first one and animates it all the way to the top and then pauses for a second (you can change it to whatever time you want), then it animates the one on the top to the top of the box by animating it all the way to ‘top: -100px;’, note that the same ‘overflow: hidden;’ prevents it from showing.

It then picks up the next item, sets it’s top to 200px and animates it all the way to the top again and then repeat forever.

You might ask why it’s first setting the .items top to 200px; it’s because we are animating them to top of the box so we have to set their top to 200px again each time (we did this first in CSS), this is not important in the first iteration but after that every single item is on top of the box and has to be moved under the box.

I hope this makes sense.

A JavaScript/jQuery News Ticker
Comments (0)   Filed under: JavaScript, jQuery   Posted by: Codehead on October 21, 2009

Scroll To Top Of The Page

Here is the simple function call that does this:

scroll(0, 0);

So you could have a link like this:

<a href="javascript:scroll(0, 0);">Back To Top</a>
Scroll To Top Of The Page
Comments (0)   Filed under: JavaScript   Posted by: Codehead on September 18, 2009

Basic threading in JavaScript; multiple threads of execution in JavaScript

I was searching the web yesterday for this and didn’t really find a simple way of doing this and suddenly, I remembered something.

It’s extremely simple, someone could build on it with all sorts of features but for now, here is an example:
http://images.code-head.com/code/javascript/js-threads.html

As you can see there are two counters, one is counting up and the other down simultaneously.

Here is the start_thread function:

             function thread_start(callback) {
		setTimeout(callback, 1);
		return true;
	}

The trick is that setTimeout *does not* block the execution ;)

I hope this helps someone :)

Basic threading in JavaScript; multiple threads of execution in JavaScript
Comments (1)   Filed under: Fun, General, JavaScript, Programming, jQuery   Posted by: Codehead on June 30, 2009
Older Posts »