Effective AJAX UI / UX Development with jQuery

I’m writing this post to provide other developers a very easy way to create the most elegant and effective UI/UX design without spending days to write the code by hand. This tutorial should be a very quick way for you to create some logical designs when it comes to human interaction and your website. I recommend having basic experience with jQuery and some experience in JavaScript before attempting this lesson.

Introduction

First things first, you must already understand the basics and fundamentals of the jQuery javascript library that is an open source project and available for free download. I’m assuming you are already using jQuery and need an easy way to create better interactions between the website and the user.

Topics & Subjects

Light Box Effect / Block UI
The light box effect is a style that consists of shading the background giving it some transparency while providing some kind of message, media, form, or alert. This is very effective especially if you want other options such as:

• Disabling the background when the form pops up for the user to complete and submit. (I recommend this option)
• Allowing the user to “cancel” the action from a pop up alert, form, etc…
• Displaying media and other content.

These examples provide the user with the convenience of not having to leave a page and provides less stress to the server by sending smaller requests. I strongly recommend remembering this concept since my supervisor and I had a meeting and we had discussed some different strategies to use AJAX within an application. He mentioned that the majority still use their back button on their browser which could have a conflict with 100% AJAX applications (that are not using the # hash methods). The solution would be to either create a very complicated and advanced AJAX platform using 3rd party scripts like Backbase or simplify by using jQuery Ajax. Simplicity can be a greater solution over complexity…

Easy AJAX with jQuery (The correct way)
I am briefly going over the jQuery Ajax function without implementation of the light box effect however the correct way. The reason why I say this is because I’ve used the load function and to my evaluation it did not meet up to par with user experience guidelines. I prefer using the Ajax method since it accepts more important arguments such as the timeout option. Also I am creating the code within the codeigniter MVC environment so my demonstration may be a little different than normal. For those of you who use codeigniter, great!

First: Let’s add the javascript element that handles our event. In my example, we will be using a input button type.

<input type="text" id="txt_id" value=""/>
 
<input type="button" id="btn_id" value="Jquery Ajax Demonstration"/>
 
<span id="loader" style="display:none"><img src="http://jesseprice.com/wp-content/uploads/2009/08/ajax-loader-green.gif" alt="ajax-loader-green" title="ajax-loader-green" width="24" height="24" class="alignnone size-full wp-image-727"/></span>

Output:

Second: Let’s observe the snippet of code that implements the jQuery AJAX function.

This comes from one of my view files on my server. Usually this file would contain the element that triggers the javascript event handler.

<script type="text/javascript">
$(document).ready(function(){
	$('#btn_id').click(function(){
		$('#loader').show();
		var txt_value = $('#txt_id').val();
		$.ajax({
			url: '/scripts/jquery-ajax-demo.php',
			type: 'POST',
			data: ({ post_var : txt_value }),
			dataType: 'html',
			timeout: 2500,
			error: function(XMLHttpRequest, textStatus, errorThrown){
				alert(textStatus+' : '+XMLHttpRequest+' '+errorThrown);
				$('#loader').hide();
			},
			success: function(data){
				alert(data);
				$('#loader').hide();
			}
		});
	});
});
</script>

Explanation: Notice the span tags that inherits the display:none style attribute. Within this tag, I embedded an ajax image which is simply a gif animated icon. So when the page loads, the span doesn’t display the image. When the button is clicked, we display the loader by using the show() method, later to hide on success or failure. What makes the $.ajax method a more elegant approach than the $.load function is the timeout option. If the time span is elapsed, it will invoke the error function which returns an alert of the arguments passed and also hides the ajax loader. On success, we will output an alert with some extra contents from our remote file that is called within the url: option that must include the path to your remote script. In our case we will be using php.

Third: The remote script that is called via the url: option is what makes AJAX event a possibility via jQuery. Within the jquery script you probably noticed the type and data options. I will be demonstration how we can post the text input value to the remote file and return via success function. Notice the dataType option. This is the format of the callback we can receive. You can choose to output another jquery script by echoing it out in php or retrieve other data types such as json, html, and text. In this example we will be using text.

< ?php 
$post_var = $_REQUEST['post_var'];
echo "You typed : $post_var";
?>

The above snippet should be added to the file path you had entered as the remote file. In my case: url: ‘/scripts/jquery-ajax-demo.php’,

Whalla! That simple… Any questions or concerns leave a comment and I will get back to you.