Category Archives: Javascript

Aspect Oriented Programming (AOP) with Javascript and jQuery

One of the simplest AOP libraries for Javascript is jquery-aop.

There are a million reasons to use Aspect Oriented Programming; even in Javascript. One such case I came across recently was a requirement that came across to make the web application I’m working on accessible to screen readers such as JAWS.

For example, when displaying a modal window, it becomes necessary to switch the focus of the screen reader to the top of the modal. So instead of making changes to the modal library (in this case, simplemodal), AOP was used to switch the focus of the screen reader to the top of the modal div that had an anchor with the same value as the ID.

$.aop.around( {target: $, method: 'modal'},
		  function(invocation) {
		if(this === undefined)
			return false;
		var divId = $(this)[0].id;	
		invocation.proceed();
		window.location = "#" + divId;
		}
	);

A similar advice can be created for closing the overlay as well.

This is just a very small example but very useful. I have also found the library useful in debugging Javascript when dealing with browser specific issues on IE6 and IE7 where Firebug is unavailable.

Share

jQuery Dialog Width Modification

Simple fix for simple problem.

I’ve recently ran into an issue where I needed different jQuery dialogs to have different widths other then the default. The issue was that different browsers had problems with solutions that used autoResize, width: auto, etc…

Since the div’s that I needed to create dialogs from already had width CSS attributes, I used the following:

First, create a “wrapper” function for your dialog creation in jQuery:

	$.fn.dialogFunction=function(options){
		var divId = $(this)[0].id;
                //Check if dialog already exists, and if so just open it
                //This solves the can't open same dialog twice issue.
		if($("#" + divId).is(':data(dialog)')){
			$("#" + divId).dialog("open");
		}
		else{
	        $("#" + divId).dialog({
	            draggable : false,
	            resizable : true,
	            close : function(e){
	                $('#dialogTrigger').focus()
	                }
	            ,autoOpen : false,
	            width: $("#" + divId).css("width"),
	            describedBy : "dialogDescription",
	            modal : true});
			$("#" + divId).dialog("open").find(":input").eq(0).focus();
		}
	};

Now you can basically just do $(“#divId”).dialogFunction();

If you look at line 16, that will create your dialog with the css width attribute attached to the div you’re creating the modal for.

Share