Archive for October, 2009

Table row highlight on hover using JQuery

It is a shame that IE6 doesn’t support hover on html elements other than a-tag. The support can be somewhat flakey in other browsers as well. So for make this work we need to use JavaScript and preferably some kind of JavaScript library which in this case is JQuery.

Here is the script in its full glory, small and simple. It is assumed that this behaviour should be applied on all tables. You can easily modify the script to access just a single table with a specific ID or CLASS. A neater version would be to wrap the code into its own function that only is called when a certain ID or CLASS exists inside the DOM tree.

View Table row highlight example

$(document).ready(function() {
    $('tr').hover(
        function () {
            $(this).addClass('hover');
        },
        function () {
            $(this).removeClass('hover');
        }
    );
    $("tr.table-header").unbind('mouseenter mouseleave');
});

Redirect to previous url after delete

Ever wondered how you can easily redirect a user to the previous url? I.e after a users clicks a delete link or some other action you can use the more common url.current() because that points to the delete action. Instead use request.header REFERER like this:
UPDATE: New way of doing this in pylons 1.0 as redirect_to is replaced by redirect. Thanks to DB for pointing that out!

(This is a Pylons example)

redirect(url(request.referer))

Done!

Unicode in Mako using Pylons

Small post regarding unicode support in mako. I learned yesterday that mako not only has input and output encoding options but also an default_filter encoding. In the environment.py file, in your Pylons config folder, you need all these three to be sure that everything is enoded as unicode. Remember though that the default_filters argument can have big impact on performance.

(If someone knows the configuration files for other frameworks, please write a comment about it and I’ll add it to the post)

Please read the Mako unicode chapter here if you want the gory details.

#environment.py
 config['pylons.app_globals'].mako_lookup = TemplateLookup(
        input_encoding='utf-8', 
        output_encoding='utf-8', 
        default_filters=['decode.utf8'] )

Serving images directly from database

Even though storing images in the database have its advantages/disadvantages, here is a small guide for those who want to store them in the database and serve them directly to the browser without having to generate a file first. This examples is based on the amazing web framework pylons.

In this example I want to serve small product images from my product controller.

In the product.py controller I have this method

def show_image(self, id, name):
    response.headers['Content-type'] = 'image/png'
    response.headers['Cache-Control'] = 'max-age=14400'
    response.headers['Pragma'] = ''
    product = Product.get_by(id=id)
    return product.image

Then in my mako template I have

<img src="url(controller='product', action='show_image', id='${c.product.id}', name='c.product.image_name')"/>

which will generate

<img src="/product/show_image/1/super-glue.png"/>

So whats happening is that when the page is loading the image tag, the show_image() function is called which fetches the image data from the database and returns the image data buffer to the template. The key for this to work is to set the appropriate headers so that the page know that the data returned is image/png through the Content-type. The name argument is just used to set a name for the image file on the connecting client so that the cached file will have a correct name.