hocuspokus » javascript

Using Javascript to Make Relative Times Work With Caching

Daz — Thu, 05 Feb 2009 18:09:39 +0000

A great idea from the folks over at 37 signals.

Itâ€™s easy to think that the relative-time style of â€œthis comment was written 15 minutes agoâ€ is incompatible with caching. How are you supposed to cache something if the text changes every minute? Static pages with JavaScripts, thatâ€™s how!

full post.

Update: Looks like this type of idea has been around for a while (I’d just never thought of it before)!

Blackbird - Javascript Logging Utility

Daz — Mon, 20 Oct 2008 08:03:18 +0000

Found this while trawling the feeds this morning - looks like quite a useful utility. It offers a nice alternative to Firebug (when testing in browsers other than Firefox).

Blackbird via

Release: toggleController Plugin 1.0

Daz — Sat, 04 Oct 2008 18:02:21 +0000

I’ve just spent the last week on a Javascript and Ajax course (thanks to work for footing the bill)! As such I come armed with some newfound javascript knowledge!

Here’s the first fruits of my labour - a very simple jQuery plugin that enables you to unobtrusively make an element on a webpage collapsable, and have the showing/hiding controlled by another element.

Like I said, this is very basic stuff and there is probably about a million other (most likely more feature-full and better) plugins that do the same thing already on the web, but it’s all I really need for it to be useful for my stuff and I had fun learning how to do this - never know someone else may find it useful!

If you want to have a play, here’s where to go:

My Projects Page
Demo/Documentation

Default Text Field Values That Disappear on Focus

Daz — Fri, 16 May 2008 18:08:58 +0000

You will have noticed this effect out on your travels on the internet - a text input field has some default text in it (often in a slightly dimmed colour), and when you click on the text box, default text disappears and then reappears when you click away from the box. It happens on the search box to the right here too.

I needed this same effect at work today so a quick Google came up with this great blog post - a lovely example of the exact effect I was looking for in both raw javascript and a version using the jQuery library.

The script searches the page that it’s inserted on for all form input fields that have a class of ‘default-value’ applied. Each form input field must also have a unique ID.

When the page loads the script changes the color of the text in the text fields it has found to the value of ‘inactive_color’. If the user clicks on the input field, the default text is blanked, and the colour changed to ‘active_color’. If the user clicks away from the input field, i.e. the input field loses focus, the value of the text field will revert back to the original text, and the colour will change back to ‘inactive_color’, unless the user has entered some other text.

Here’s a copy of the jQuery version for my own personal notes, never know when that could be useful:

/*
 * Written by Rob Schmitt, The Web Developer's Blog
 * http://webdeveloper.beforeseven.com/
 */
 
var active_color = '#000'; // Colour of user provided text
var inactive_color = '#999'; // Colour of default text
 
$(document).ready(function() {
  $("input.default-value").css("color", inactive_color);
  var default_values = new Array();
  $("input.default-value").focus(function() {
    if (!default_values[this.id]) {
      default_values[this.id] = this.value;
    }
    if (this.value == default_values[this.id]) {
      this.value = '';
      this.style.color = active_color;
    }
    $(this).blur(function() {
      if (this.value == '') {
        this.style.color = inactive_color;
        this.value = default_values[this.id];
      }
    });
  });
});

However, we don’t use jQuery at work, our entire site is based around Prototype and script.aculo.us, so I did a bit of butchering and here’s the code adapted to use Prototype:

/*
 * Written by Darren Oakley
 * http://hocuspokus.net
 */
 
var active_color = '#000'; // Colour of user provided text
var inactive_color = '#999'; // Colour of default text
 
Event.observe( window, 'load', function () {
    var default_values = new Array();
    $$("input.default-value").each( function (s) {
        $(s).setStyle({ color: inactive_color });
        $(s).observe( 'focus', function () {
            if (!default_values[s.id]) {
                default_values[s.id] = s.value;
            }
            if (s.value == default_values[s.id]) {
                s.value = '';
                $(s).setStyle({ color: active_color });
            }
            $(s).observe( 'blur', function () {
                if (s.value == '') {
                    $(s).setStyle({ color: inactive_color });
                    s.value = default_values[s.id];
                }
            });
        });
    });
});

Now all you need to do is give your input text fields a unique id, and the class of ‘default-value’, then the script will take care of the rest.

Flot: Pure Javascript Plotting Library

Daz — Thu, 13 Dec 2007 21:46:28 +0000

Yet more chart drawing goodness. This takes a different approach to the Google model by generating really good looking graphs all on the client-side in javascript - very nice!

Flot is a pure Javascript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side. The focus is on simple usage (all settings are optional), attractive looks and interactive features like zooming. Although Flot is easy to use, it is also advanced enough to be suitable for Web 2.0 data mining/business intelligence purposes which is its original application. The plugin is targeting all newer browsers.

via

Adding/Deleting Rows in TableKit Tables Revisited

Daz — Thu, 01 Nov 2007 08:42:51 +0000

TableKit is a great javascript library for making your HTML tables fully editable. However, one problem is that you can’t add or delete rows from the tables…

I came up with a solution to this not so long ago, but it still had a problem - TableKit caches the tables on loading, so after we update the table body (adding or deleting a row) the sorting and editing of the table is completely screwed! However, with a little more work, and some help from one of the guys in the office - we’ve finally got this cracked!

The basic idea to the fix is, instead of updating the table body, replace the entire table with a new one and get TableKit to do its stuff on the new table. Although this is not the ideal solution¹ - this does work quite well. Here’s the details.²

First, we’ll update the code from our template file (/root/src/users/list.tt):

[% META title = 'User List' -%]
 
<div id="users_div">
  <table id="users" class="sortable resizable editable">
    <thead>
      <tr>
        <th id="id" class="sortfirstasc noedit">Id</th>
        <th id="firstname">First Name</th>
        <th id="lastname">Last Name</th>
        <th class="noedit nocol"></th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <th>Id</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th class="nocol"></th>
      </tr>
    </tfoot>
    <tbody id="user_body">
    [% FOREACH user IN users -%]
      <tr id='[% user.id %]'>
        <td>[% user.id %]</td>
        <td>[% user.firstname %]</td>
        <td>[% user.lastname %]</td>
        <td class="nocol">
          <a class="delete" href="#" onclick="deleteUser([% user.id %]); return false">delete</a>
        </td>
      </tr>
    [% END -%]
    </tbody>
  </table>
</div>
<br />
<a class="add" href="#" onclick="addUser(); return false">add a user</a>

Then add this javascript code to the bottom of the same file:

<script type="text/javascript" charset="utf-8">
  var users_table = new TableKit( 'users', {
    editAjaxURI: '[% c.uri_for('/users/_update_user') %]'
  });
 
  function addUser() {
    var timestamp = new Date().getTime();
    var new_table = 'users' + timestamp;
    var url = '[% c.uri_for('/users/_add_user') %]?timestamp=' + timestamp;
    new Ajax.Updater( 'users_div', url, { 
      asynchronous: true,
      onComplete: function() {
        new TableKit( new_table, {
          editAjaxURI: '[% c.uri_for('/users/_update_user') %]'
        })
      }
    });
  }
 
  function deleteUser( user_id ) {
    var timestamp = new Date().getTime();
    var new_table = 'users' + timestamp;
    var url = '[% c.uri_for('/users/_delete_user/') %]?user_id=' + user_id + '×tamp=' + timestamp;
    var answer = confirm('Are you sure you want to delete this user?');
    if (answer) {
      new Ajax.Updater( 'users_div', url, { 
        asynchronous: true,
        onComplete: function() {
          new TableKit( new_table, {
            editAjaxURI: '[% c.uri_for('/users/_update_user') %]'
          })
        }
      });
    }
  }
script>

The main differences in the above from last time round are as follows: - The ‘users’ table is now inside a div with the id ‘users_div’ - The link to add a user now calls a javascript function rather than an Ajax.Updater call directly. - The functions to add and delete users are essentially the same: - - They create a timestamp to individually identify the new table we are going to create (this is the most important thing here to remember)! - - They then use an Ajax.Updater call to talk to the Perl controller and generate the new table with a row added or removed. - - Once the Ajax.Updater is complete, TableKit is then called again to make our new table editable and sortable.

That’s the template sorted, now let’s look at the controller (/lib/MyApp/Controller/Users.pm):

package MyApp::Controller::Users;
 
use strict;
use warnings;
use base 'Catalyst::Controller';
 
=head1 NAME
 
MyApp::Controller::Users - Catalyst Controller
 
=head1 DESCRIPTION
 
Catalyst Controller.
 
=head1 METHODS
 
=cut
 
=head2 index 
 
=cut
 
sub index : Private {
    my ( $self, $c ) = @_;
    $c->response->redirect('/users/list');
}
 
=head2 list
 
Fetch all user objects and pass to users/list.tt in stash to be displayed
 
=cut
 
sub list : Local {
    my ( $self, $c ) = @_;
    $c->stash->{users}    = [ $c->model('MyAppDB::Users')->all ];
    $c->stash->{template} = 'users/list.tt';
}
 
=head2 _update_user
 
Ajax method to update the users table
 
=cut
 
sub _update_user : Local {
    my ( $self, $c ) = @_;
 
    $c->model('MyAppDB::Users')->find( { id => $c->req->params->{id} } )
      ->update( { $c->req->params->{field} => $c->req->params->{value} } );
 
    $c->res->body( $c->req->params->{value} );
}
 
=head2 _delete_user
 
Ajax method to delete users from the users table
 
=cut
 
sub _delete_user : Local {
    my ( $self, $c ) = @_;
 
    # Look-up our user entry
    my $user =
      $c->model('MyAppDB::Users')->find( { id => $c->req->params->{user_id} } )
      ->delete();
 
    my $output =
      __return_all_users( $self, $c, $c->req->params->{timestamp}, 'null' );
 
    $c->res->body($output);
}
 
=head2 _add_user
 
Ajax method to add users to the users table
 
=cut
 
sub _add_user : Local {
    my ( $self, $c ) = @_;
 
    # create a new user...
    my $new_user = $c->model('MyAppDB::Users')->create(
        {
            id        => $c->req->params->{user_id},
            firstname => '[First Name]',
            lastname  => '[Last Name]'
        }
    );
 
    my $output = __return_all_users( $self, $c, $c->req->params->{timestamp},
        $new_user->id );
 
    $c->res->body($output);
}
 
=head2 __return_all_users
 
Private method for the Users ajax interaction.
Returns a html table.
 
=cut
 
sub __return_all_users : Private {
    my ( $self, $c, $timestamp, $new_user_id ) = @_;
 
    my @users = $c->model('MyAppDB::Users')->all();
 
    my $html =
        '.$timestamp.'" class="sortable resizable editable">
      ';
 
    if(scalar(@users)>0){for(my$i=0;$i<scalar(@users);$i++){my$class;
 
            if($new_user_id&&$users[$i]->id==$new_user_id){$class='new';}else{if($i%2==0){$class='rowodd';}else{$class='roweven';}}
 
            $html.="\"".$class."\" id=\"".$users[$i]->id."\">
                ";}}else{$html.='';}
 
    $html.=' 
       
        
          Id
          First Name
          Last Name
          
        
      
      
        
          Id
          First Name
          Last Name
          
        
      
            
                     
                     
                  
            
             
                              
                                     
             
                 
               
               
                 " . $users[$i]->id . "
                " . $users[$i]->firstname . "
                " . $users[$i]->lastname . "
                \"nocol\">
                    \"delete\" href=\"#\" onclick=\" deleteUser("
              . $users[$i]->id . "); return false\">delete
                
              
        
    
     
         
          All Users Deleted
      
';
 
    return ($html);
}
 
=head1 AUTHOR
 
Darren Oakley
 
=head1 LICENSE
 
This library is free software, you can redistribute it and/or modify
it under the same terms as Perl itself.
 
=cut
 
1;

The only real changes in the controller are a general code clean-up, and a slight change to the ‘__return_all_users’ method - this now returns a whole table (identified by the unique timestamped id that we generated in the javascript functions). Nothing really needed changing in the back-end.

There you go! Now our TableKit based tables can be used to not only edit entries in the database, we can now add and remove them!

The files used in this example can be found below.

Attached Files:

MyApp.zip - v3

That would be knowing more about javascript and the dom so that we can make changes to TableKits cache as we update the table body (thus keeping the original table). ↩
We’re using the code from the previous post as a starting point. ↩

Adding/Deleting Rows in TableKit Tables

Daz — Thu, 11 Oct 2007 19:50:10 +0000

This post has now been updated. Please head over to the new post for something better…

Following on from my previous post on how to integrate the excellent TableKit into your Catalyst webapp (to make your data tables dynamically editable), here’s how i’ve gone about adding ajax inserts and deletes so that you can add and remove data rows in your tables.¹

We’re going to be using prototype to do the background ajax calls, as this is already in our app as a requirement of TableKit. Now let’s get on with doctoring our template. First we add in a delete button for each row of our table. Open up /root/src/users/list.tt and change the code of our table to look like the following (the changes come on lines 9, 17, 20 and 26-28):

<table id="users" class="sortable resizable editable">
  <thead>
    <tr>
      <th id="id" class="sortfirstasc noedit">Id</th>
      <th id="firstname">First Name</th>
      <th id="lastname">Last Name</th>
      <th class="noedit nocol"></th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Id</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th class="nocol"></th>
    </tr>
  </tfoot>
  <tbody id="user_body">
  [% FOREACH user IN users -%]
    <tr id='[% user.id %]'>
      <td>[% user.id %]</td>
      <td>[% user.firstname %]</td>
      <td>[% user.lastname %]</td>
      <td class="nocol">
        <a class="delete" href="#" onclick="userDelete([% user.id %]); return false">delete</a>
      </td>
    </tr>
  [% END -%]
  </tbody>
</table>

The above code adds a ‘delete’ link into each row of the table. This link is to run a short javascript function (called userDelete) that we shall add now at the bottom of the template (within the original javascript block):

userDelete = function( user_id ) {
  var answer = confirm('Are you sure you want to delete this user?');
  if (answer) {
    new Ajax.Updater( 'user_body', 
      '[% c.uri_for('/users/_delete_user/') %]?user_id=' + user_id, 
      { asynchronous: 1, }
    );
    return false;
  }
}

This function basically asks the user to confirm that they want to delete the user entry, the sets up an Ajax.Updater that passes the user_id to be deleted to a new function in our controller (that we shall write next) which deletes it, and then passes the new table body back to be updated on screen. Let’s now create a new function _delete_user (and a helper function __return_all_users) in our user controller /lib/MyApp/Controller/Users.pm:

';} $c->res->body($output);} =head2 __return_all_users Private method for the Users ajax interaction. Returns the inner body of a html table. =cut sub __return_all_users : Private {my($self,$c,$new_user_id)=@_; my@users=$c->model('MyAppDB::Users')->all({ order_by =>'id ASC'}); my$html;for(my$i=0;$i<scalar(@users);$i++){my$class; if($new_user_id&&$users[$i]->id==$new_user_id){$class='new';}else{if($i%2==0){$class='rowodd';}else{$class='roweven';}} $html.="\"".$class."\" id=\"".$users[$i]->id."\"> ";} return($html);}

=head _delete_user
 
Ajax method to delete users from the users table
 
=cut
 
sub _delete_user : Local {
    my ($self, $c) = @_;
 
    # Look-up our user entry
    my $user = $c->model('MyAppDB::Users')->find({
      id => $c->req->params->{user_id}
    })->delete();
 
    my $output = __return_all_users( $self, $c, 'null' );
 
    unless ( $output ) {
      $output = '

All Users Deleted

" . $users[$i]->id . "

" . $users[$i]->firstname . "

" . $users[$i]->lastname . "

\"nocol\"> \"delete\" href=\"#\" onclick=\" userDelete(" . $users[$i]->id . "); return false\">delete

The _delete_user function, takes the user_id that we sent to it, deletes the entry from the database, then calls the __return_all_users function to rebuild the table body. This table body is then used to update the table back on the web page.

That’s the delete functionality sorted, now on with the row adding… Back in the template, add we add another Ajax.Updater link below the table:

<br />
<a class="add" href="#" onclick=" 
  new Ajax.Updater( 'user_body',
    '[% c.uri_for('/users/_add_user') %]', 
    { asynchronous: 1, }
  ); return false ">add a user</a>

And add another new method into our controller to add a new user into the database and table:

=head _add_user
 
Ajax method to add users to the users table
 
=cut
 
sub _add_user : Local {
    my ($self, $c) = @_;
 
    # create a new user...
    my $new_user = $c->model('MyAppDB::Users')->create(
        {
            id        => $c->req->params->{user_id},
            firstname => '[First Name]',
            lastname  => '[Last Name]'
        }
    );
 
    my $output = __return_all_users( $self, $c, $new_user->id );
 
    $c->res->body( $output );
}

This function, like the delete function, does its business on the database, then rebuilds the table body and sends it back to the web page.

The final icing on the cake, is a little addition to our CSS to make this all look a little nicer. Open up /root/css/myapp.css and add the following to the bottom of the file:

.nocol, th.nocol {
  background-color: #fff;
  border: none;
}
 
tr.new {
  background-color: #ff9697;
}
 
a {
  outline: none;
}
 
a.add, a.delete {
  background: url('/images/add.png') left center no-repeat;
  padding: 2px 0 2px 20px;
}
 
a.delete {
  background: url('/images/delete.png') left center no-repeat;
  left: 0;
}
 
tr a.delete {
  font-size: 0.8em;
}

And there you go. Now you can edit, add and delete users to your database and table without having to reload the page.

However, there is one small bug that needs to be squashed to make this perfect… TableKit caches the tables on page load - if you have a go at re-sorting one of the tables after deleting or adding a row, this causes the table to essentially double in size as the original cached data is reloaded onto the screen! I now need to figure out a way to clean out the cache for the current table and re-initalise TableKit. Any suggestions would be more than welcome!

The files used in the examples can be downloaded below.

Attached Files:

MyApp - v2

You’ll need the code from the previous post to follow along. ↩

Making Editable Tables With Catalyst and TableKit

Daz — Sun, 23 Sep 2007 08:55:45 +0000

Catalyst is an MVC web-development framework for Perl, very similar in concepts, ideas (and even some of the implementation) to Ruby on Rails. I’m using Catalyst a lot in my job now, and one of the first challenges that i’ve had to go through is making dynamically editable tables for some of the views we are using (in other words, Ajax driven edit-in-place tables).

Following a short Google, there seemed to be only two ready-made options I could see: one, using the Catalyst controller module Catalyst::Controller::ROSE::EIP; or two, by integrating and using the stand-alone javascript package TableKit.

Unfortunately the first option, ROSE::EIP is dependent on the use of the Rose::DB::Object as your database ORM mapper. As our webapp is already using DBIx::Class as its ORM layer, that rules ROSE::EIP out and TableKit was the way to go. Here’s a quick rundown of how I got it going, using a very simple table to store a users first and last names as an example (all files used in this tutorial are available for download at the bottom of this post) and a single controller called ‘users’.

First off, head on over to the TableKit site and download the latest TableKit package, then create the following three directories in your /MyApp/root/ directory: javascript, css, and images.

From the TableKit download, copy the files: tablekit.js, fastinit.js and prototype.js (found in scriptaculous/lib) into your new ‘javascript’ directory; then copy the two images - down.gif and up.gif into the images directory.

Now create a new file and add in the following CSS code:

table {
	border-collapse: collapse;
}
 
td, th {
	padding: 0.5em;
	border: 1px solid #CCC;
}
 
thead, tfoot {
	background-color: #DDD;
}
 
thead {
	border-bottom: 2px solid #f08900;
}
 
tfoot {
	border-top: 2px solid #f08900;
}
 
tr.rowodd {
	background-color: #FFF;
}
 
tr.roweven {
	background-color: #F2F2F2;
}
 
.sortcol {
	cursor: pointer;
	padding-right: 20px;
	background-repeat: no-repeat;
	background-position: right center;
}
 
.sortasc {
	background-color: #DDFFAC;
	background-image: url('/images/up.gif');
}
 
.sortdesc {
	background-color: #B9DDFF;
	background-image: url('/images/down.gif');
}
 
.nosort {
	cursor: default;
}
 
th.resize-handle-active {
	cursor: e-resize;
}
 
div.resize-handle {
	cursor: e-resize;
	width: 2px;
	border-right: 1px dashed #1E90FF;
	position:absolute;
	top:0;
	left:0;
}

Save this file as ‘myapp.css’ in your new css directory. This will give your tables a on okay looking starting point and nice striping on odd and even rows when we’re finished.

Next, open up the /MyApp/root/lib/site/html file and add the following lines within the head tags:

<link href="/css/myapp.css" rel="stylesheet" media="screen" type="text/css" />
<script src="/javascript/prototype.js" type="text/javascript"></script>
<script src="/javascript/fastinit.js" type="text/javascript"></script>
<script src="/javascript/tablekit.js" type="text/javascript"></script>

Now, we update our /MyApp/root/src/users/list.tt file so that the users table looks like the following snippet of code:

[% META title = 'User List' -%]
<table id="users" class="sortable resizable editable">
    <thead>
        <tr>
            <th id="id" class="sortfirstasc noedit">Id</th>
            <th id="firstname">First Name</th>
            <th id="lastname">Last Name</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Id</th>
            <th>First Name</th>
            <th>Last Name</th>
        </tr>
    </tfoot>
    <tbody>
        [% FOREACH user IN users -%]
        <tr id="[% user.id %]">
            <td>[% user.id %]</td>
            <td>[% user.firstname %]</td>
            <td>[% user.lastname %]</td>
        </tr>
        [% END -%]
    </tbody>
</table>

In the above lines of code there are two important details that need to be done in order for the table sorting and editing to work:

One: The id properties

The id properties on each column of the table are set to the same names as the fields in the database table. and the table rows, (in the body of the table) also have an id associated with them - this becomes the database row ‘ID’ attribute when the template is interpreted. These id’s then become some of the parameters that are passed via TableKit to our Ajax.Updater controller method.

Two: The class properties

In the table header, the id column has two classes applied to it - ‘sortfirstasc’ and ‘noedit’ - this tells TableKit to first sort the table based on this column (and ascending), and that the values of this column are not to be editable.

Also in the declaration of the table, the table has the classes: ‘sortable’ ‘resizable’ and ‘editable’ - these tell TableKit what you’d like to be able to do with your table.

Finally, add the following snippet of Javascript code to the bottom of the same file (/MyApp/root/src/users/list.tt):

<script type="text/javascript" charset="utf-8">
    var comments_table = new TableKit( 'users', {
        editAjaxURI: '[% update_uri %]'
    });
script>

This initializes the TableKit actions and tells TableKit the uri that the Prototype Ajax.Updater is to call (a Catalyst controller method that we’re about to create).

The final step is now back in the ‘Users’ controller. Here’s the code that we need for both the initial list of users and the Ajax.Updater method that TableKit calls:

sub list : Local {
    my ($self, $c) = @_;
    $c->stash->{users} = [$c->model('MyAppDB::Users')->all];
    $c->stash->{template} = 'users/list.tt';
    $c->stash->{update_uri} = $c->uri_for('/users/_update_user');
}
 
sub _update_user : Local {
    my ($self, $c) = @_;
 
    $c->model('MyAppDB::Users')
      ->find({ id => $c->req->params->{id} })
      ->update({
        $c->req->params->{field} => $c->req->params->{value}
      });
 
    $c->res->body( $c->req->params->{value} );
}

There you go, you should now have a table on your ‘/users/list’ page that is sortable, resizable, and now even in-place editable. I hope these instructions are clear enough (there’s quite a lot in there!), any questions, comments or improvements people could give me would be most appreciated.

Next up, i’ll go through how I made the tables more functional by adding in add and delete buttons (to add and delete rows to the table, and therefore create new database entries).

Attached Files:

MyApp