Because sharing is caring

lib.js: Good practice and generally a good idea

Posted: February 4th, 2011 | Author: | Filed under: Javascript, JQuery, Web Development | Tags: , , , | No Comments »

I recently stumbled upon an article on Six Revisions titled Are Current web design trends pushing us back to 1999?.

I found it to be a very interesting article. It mainly talks about how new trends in the web are barking up old problems, like the Flash splash page, or the shoutbox.

On thing I found very interesting was the part called Modern-Day Bloated, Cut-And-Paste Scripts.

Being involved with jQuery on a day-to-day basis, you start using some plugins, or even write some of your own.
But once you start stacking plugins, the browser has to load all of these plugins, generating more request. Which is generally a good idea.
Bloated plugins

Now whenever creating a new webproject, I use one JS file: lib.js. This JS file contains everything I need, it’s like a swiss pocket knife!
Structure is usually like following (depends on your project needs):

  • jQuery
  • jQuery UI
  • Plugins
  • $(document).ready(function(){ /**magic here **/});

You could argue by saying: but doesn’t the filesize increase by a lot, letting the user download a 250k file is quite a lot!
I agree, but play your cards right in server configuration with a little help from Google’s mod_pagespeed or simply by getting goot ETags or Expires headers, the load happens just once (!!). And the rest of your surfing experience stays snappy.


Force AJAX calls no-cache in Java. The clean way

Posted: January 25th, 2011 | Author: | Filed under: Java, JQuery, SEO, Web Development | Tags: , , , , | No Comments »

Recently I discovered Internet Explorer caches some AJAX calls.

I was using jQuery to make some AJAX calls in a web-admin interface I’m building. I noticed none of the data changed as I tried to refresh (using an AJAX call). conclusion:: IE caches AJAX calls… very annoying.

You could go around and alter every method in your Struts/Spring/… application to force no-cache. But that would take some time. Instead, I wrote a Filter.

Hold on though, you don’t want every page to get the no-cache headers, that would seriously decrease your site performance (all pages would be force-reloaded instead of browser-cached). So we’ll only filter out AJAX calls.

Luckily, jQuery passes a header argument: X-Requested-With: XmlHttpRequest

x-requested-with header

X-Requested-With

The Code!

import java.io.IOException;
 
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
public class AjaxCacheFilter implements Filter{
 
	@Override
	public void destroy() {
	}
 
	@Override
	public void doFilter(ServletRequest request, ServletResponse response,FilterChain chain) throws IOException, ServletException {
		if ("XMLHttpRequest".equals(((HttpServletRequest) request).getHeader("x-requested-with"))) {
			((HttpServletResponse)response).setDateHeader("Expires", 0);
			((HttpServletResponse)response).addHeader("Cache-Control", "no-cache");
			((HttpServletResponse)response).addHeader("Pragma", "No-Cache");
 
		}
		chain.doFilter(request, response);
	}
 
	@Override
	public void init(FilterConfig arg0) throws ServletException {
	}
}

And add it as the last filter in your web.xml

<filter>
	<filter-name>ajaxCache</filter-name>
	<filter-class>
		com.yoursite.web.filters.AjaxCacheFilter
	</filter-class>
</filter>
<filter-mapping>
	<filter-name>ajaxCache</filter-name>
	<url-pattern>/*</url-pattern>
 	<dispatcher>FORWARD</dispatcher>
		<dispatcher>REQUEST</dispatcher>
</filter-mapping>

Hope it helps somebody! If you used it, let me know in comments. I’d love to know!


jQuery Plugin Development

Posted: September 24th, 2010 | Author: | Filed under: Javascript, JQuery, Web Development | Tags: , , | 4 Comments »

You can write your jQuery plugin as advanced as you please.
This for example, is a jQuery Plugin:

	jQuery.fn.log = function (msg) {
		console.log("%s: %o", msg, this);
		return this;
	};

But the whole jQuery UI Accordion is also a plugin :-)

I went out to write a larger kind of plugin for a website. And I wanted to find a good plugin writing pattern. These links helped:

Most of them agree to extending the jQuery namespace:

(function($) {
    $.fn.myplugin = function(){
        //Stuff here...
    };
})(jQuery);

But I do miss a bit of Object Orientation in most of them.
I decided to take a bit of each, and create my own approach.
I won’t explain it much, it should be understandable with the comments in code:

(function($){
	/**
	** Seperate object. So each element applied with this plugin has an object structure
	**/
	function PluginObject(container,options){
		//I like to keep a reference to the object I'm working on
		var holder = container;
		//Store 'this' as an instance variable. This comes in handy when you want to speak to it as a reference in clickhandlers etc.
		var _self = this;
		this.init = function()
		{
			//initialize UI and data here
		}
 
		this.test = function()
		{
			//This function serves as a demo method that can be called from outside
		}
		this.render = function()
		{
			// Do complicated rendering here
 
			// Trigger the onRender that could be set through the options
			this.trigger('onRender');
		}
		this.init();
	}
	$.fn.myplugin = function(action,options){
		/**
		** 'action' can be an argument for a function to call
		** If no action is defined, and we just start with the options, initialize is called
		**/
		if (typeof(action) == 'object') {
			options = action;
			action = 'initialize';
		}else if(action == undefined)
		{
			action = 'initialize';
		}
		if(options == undefined)
		{
			options = {};
		}
		/**
		** Set, or update the options
		**/
		function setOptions(el) {
			// If any of the options is a function, bind that as an event
			// this can be something like: 'onRender'
			$.each(options, function(event, fn) {
				if (typeof(fn) == 'function') {
					//Unbind the event if it was already bound
					el.unbind(event);
					//Bind the event with the given function
					el.bind(event, fn);
				}
			});
			//Extend the options with the defaults, and the options already saved in the object
			options = $.extend({}, defaults, el.data('shelf.options'), options);
			// Save the options in the object's data
			el.data('shelf.options', options);
		};
		// Default options
		var defaults = {
			width: 	'900px',
			title: 'Cool Stuff'
		};
		/**
		** This is called everytime we do $(..).myplugin(..)
		**/
		return this.each(function(el){
			el = $(this);
			setOptions(el);
			if(action == 'initialize' || el.data('shelf') == undefined){
				// Initialize the object, save it in itself
				el.data('shelf', new PluginObject(el, options));
			}
			// if called like $(..).myplugin('test'), this is called
			if(action == 'test')
				el.data('shelf').test();
			// This will call render(), render will also trigger 'onRender'
			if(action == 'render')
				el.data('shelf').render();
		});
 
	};
})(jQuery);

Do you develop plugins differently? Or got a good link? I would love to hear about it!


Radio Button values in jQuery

Posted: August 27th, 2010 | Author: | Filed under: Javascript, JQuery, Web Development | Tags: , , , , | No Comments »

Getting the values of radio buttons in Javascript can be a bit of a pain in the behind at times.
You’ll have to assign a different ID to each radiobutton, loop over them to see which one is checked, and return that value.
Too much hassle.

However, jQuery selectors to the rescue!
Suppose you have the following radio buttons:

<input type="radio" name="animals" value="Dog" />
<input type="radio" name="animals" value="Cat" />
<input type="radio" name="animals" value="Bird" />

Getting the selected value could be done like so:

$('input[name=animals]:checked').val()

Try it here:

Dog

Cat

Bird

Good luck, hope it helps someone!


JQuery UI tabs with selected by #location.hash

Posted: August 5th, 2010 | Author: | Filed under: Javascript, JQuery, Web Development | Tags: , , , | No Comments »

I’m using JQuery UI Tabs in an application.
I really love the implementation, never seen anything so easy.

If you want to make sure another tab but the first one is selected on page load, just give the ‘selected’ option like so:

$("#tabs").tabs({selected: 1});

For the second tab in the tabarray (counting starts with 0).

If you want to make your url’s do the following however: http://www.example.com/mytabbedpage.do#gotothistab. There’s no support from JQuery itself just yet.

I found a solution on Rootsmith Inc’s blog.
Especially sami‘s comment helped me:

1
2
3
4
$(’#my_selector’).tabs({
’select’: function(){$(this).index($(document.location.hash));},
‘load’: function(event, ui){document.location.hash = ui.panel.id;}
});

However, applying this loses your default tab.
My solution:

1
2
3
4
5
var selectedtab = 1;
if(document.location.hash!="" && typeof(document.location.hash)!="undefined" && document.location.hash!= null){
	selectedtab = $(document.location.hash).index() - 1;
}
$("#tabs").tabs({selected:selectedtab});

I know, I like to be thorough in my checks ;-)