Forcing IE to Redraw List Items

2010-01-06T00:00:00+00:00

Forcing IE to Redraw List Items

Javascript is essential in allowing developers to tailor an intuitive and accessible experience for users. Web sites are becoming a lot more dynamic and javascript is key to this progression (side note: I’m not a fan of Flash, it makes my Mac work too hard). However, as usual developers encounter lots of browser interop issues — most of them with Internet Explorer.

Recently I was using javascript to dynamically add extra data to an unordered list item. This worked fine in FireFox and Safari. However, it turns out Internet Explorer 6 & 7 are very intolerant of content being added, or removed, from <li> elements. The problem is they don’t recognize the list item has resized and therefore don’t redraw it.

Luckily it is possible to give IE a nudge, so that it redraws the list. To do this you need to dynamically add a new child element to the list… and then remove it again. Here is an example javascript function, based on Prototype, which does exactly this. This function is now part of my toolbox and I call it after I add extra content to a list item.

/* IE 6 & 7 are very intolerant of extra content being
 * added/removed to <li> elements so a redraw needs to be
 * forced.
 */
function forceListRedraw(listItem) {
  if (Prototype.Browser.IE) {
    try {
      var n = document.createTextNode(' ');
      
      listItem.appendChild(n);
      listItem.removeChild(n);

      list = listItem.up('ul');
      list.appendChild(n);
      list.removeChild(n);
    } catch(e) { }
  }
}

Grouped Links in a Rails application

2008-09-26T00:00:00+01:00

Background - grouped links

Normally, when people talk about paging in a web application, they mean providing next/previous links and direct links to particular page numbers. Here are some examples you should be familiar with:

This style of paging is supported very well by the will_paginate plugin. However, some types of information don’t readily lend themselves to this type of paging. When listing people, for instance, it’s natural to want to jump directly to the ‘M’ names, just like you would with a telephone directory. For this type of information, what you want is a set of links that take you directly to the page with the first occurrence of a particular letter:

The greyed letters indicate that there are no entries beginning with that letter.

I’ve needed this for a recent project and implemented it as a patch to will_paginate, it’s available at http://github.com/dhennessy/will_paginate/tree/master for anyone who feels like trying it out.

Adding grouped links to an existing project

The grouped links plugin depends on you having a grouping attribute on the data you want to display. For the example above, this might be the first letter of the name; for a recipe application, it might be the primary ingredient. The point is that this has to exist in the database as a separate column. One easy way to maintain this is to add a before_save filter to your model that computes the grouping attribute:

before_save :update_group_letter

def update_group_letter
  self.first_letter = name[0,1]
end

In your controller, you create a list of results as follows:

@people = Person.paginate :page => params[:page], :group_by => 'first_letter',  :order => 'name ASC'
@people.add_missing_links(('A'..'Z').to_a)

Normally, the paginate method will add a grouped link for every distinct value of the group_by attribute. The add_missing_links method in this example will add additional links for letters that don’t already exist (which looks better in this case).

Finally, add the following to your view:

<%= will_paginate @people, :draw_if_single => true, :next_previous_links => false %>

The draw_if_single option forces the links to be displayed, even if the results all fit on a single page. Note that the resulting links will have #A, #B, etc appended to them so that you can jump to a particular row (providing you set the anchor when the first letter changes in your list). As you can see, this is very similar to the way you’re already using the will_paginate plugin.

Health Warning: this plugin should probably be treated as experimental as I may change things a bit as I get feedback from real users.

Peer Assembly Blog

Forcing IE to Redraw List Items