design for budgets

clients
resources

A target="_blank" alternative for Drupal, or saving users' content by overriding the filter tips link

200816Jul

In Drupal, users can accidentally lose content on node add/edit forms by clicking the "More information about formatting options" link and browsing to a new page. That's not so good.

With a few lines of code in template.php and a small jQuery script, you can fix that by opening a new window when that link is clicked - without losing XHTML compliance (which you'd lose if you used target="_blank"). Additionally, you can re-use that trick elsewhere by adding a special class attribute to your anchor tags.

The first thing you need to do is add the following lines to your Drupal theme's template.php (replacing YOURTHEMENAME with your theme's name):

// Theming the filter tips more info link so users don't lose
// their stuff when visiting another page.
function phptemplate_filter_tips_more_info() {
  return '<p>'. l(t('More information about formatting options'), 'filter/tips', array('class' => 'target_blank')) .'</p>';
}

drupal_add_js(drupal_get_path('theme', 'YOURTHEMENAME') .'/target-blank.js', 'theme');

What that does is first override the theme function for the filter tips "more link" and add the "target_blank" class to that link. Our jQuery will use that class. Secondly, it tells Drupal to add a Javascript file called target-blank.js to every page. It's a really small script, and because of the potential for re-use, we might as well load it on every page, so we don't put any conditions on when we add it.

Next, create a file named target-blank.js in your theme's folder and add the following jQuery Javascript to it:

$(document).ready(function(){
  $("a.target_blank").click(function(){
    window.open(this.href);
    return false;
  });
});

This jQuery script waits until the document is ready, then on the click of any anchor tag with the class "target_blank" it opens that link in a new window.

That's it.

If you want to use this jQuery with any other anchor tags in your site, add class="target_blank" and you've got a link opening in a new window without compromising your XHTML compliance.

Hat tip to ejhildreth for the tip on using jQuery to maintain XHTML compliance.

Additionally, you can read about why this isn't in Drupal already. In short, opening new windows is considered bad UI. And I agree. My personal conviction, though, is losing users' data is worse.

tags

That's awesome in pants!

That's very cool. I hadn't thought about it, but I have actually gotten stuck by that myself, so I am definitely going to be implementing this on my sites.

Thanks for the work up!

Pat

This needs a little tweeking if you are in Drupal 6

If you are using Drupal 6, you will need to have your code in template.php go something like:


function YOURTHEMENAME_filter_tips_more_info() {
  return '<p>'. l(t('More information about these filters'), 'filter/tips', array('attributes' => array('class' => 'target_blank'))) .'</p>';
}

Everything else can stay the same, but notice the array('attributes' part, pretty important, and also I ran into an error using the generic phptemplate_ instead of my actual template name for the function call.

Hat tip to Morbus for understanding the API better than me :)

Awesome. Thanks for

Awesome. Thanks for sharing, Pat!

thanks for your tips

mega thanks for your great tips which helped me when I built my website: http://www.webmasterclip.com

I don't think it's always

I don't think it's always bad UI to open a new window but it definitely is to do so without warning the user that this is what will happen if you click the link. As you're already using jQuery, you could augment your function so that it added text to the existing anchor text such as ' (opens in new window)'. You could even include an icon to further clarify.

© 2008