jQuery

Drupal 7 Quick Tip: Using jQuery's once()

Submitted by Brenda Boggs
on May 28th, 2011 at 6:06:36 PM

In Drupal 6, many modules as well as custom jQuery required adding a "processed" class to elements in order for those elements to avoid being processed each time an AHAH/AJAX request is made on the page. In Drupal 7, you can now use the jQuery once() plugin instead.

Whereas in the past the jQuery may have looked like this:

$('.form-title:not(.title-processed)').addClass('title-processed').click(function() {
  // functionality here
});

It's now as easy as this:

$('.form-title').once('title').click(function() {
  // functionality here
});

Using once() will automatically apply a "title-processed" class to the element, processing it only once.

Tags: 
7.x
jQuery

jQuery Tabs: Creating "Continue" and "Previous" Buttons

Submitted by Brenda Boggs
on July 7th, 2007 at 3:19:53 PM

jQuery is neat, and so is the jQuery tabs plugin. This is a method I used to add "continue" and "previous" buttons to some jQuery tabs, essentially giving it a "wizard-like" look and feel. While I am also using a version of the JS Tools tabs module for Drupal, this should hopefully work for the stand-alone plugin, too.

Despite the tabs being assigned anchor IDs, simply trying to skip to the next one only seems to work in Firefox. Let's break this down and say I have a page with 3 tabs. The tabs are named #section-1, #section-2, and #section-3.

In #section-1, I want a "Continue" button going to #section-2. This is the code I add directly to my tabs page at the bottom of #section-1.

I also added some similar links on #section-2 for a previous AND continue button, like so:

Now I need to add some stuff to the tabs javascript file (in my case, tabs.js). 

$function() {
  $('
Continue<\/a><\/p>').prependTo('#first-continue').find('a').click(
function() {
    $('#container').triggerTab(2);
    return false;
  });
  $('
Continue<\/a><\/p>').prependTo('#second-continue').find('a').click(function() {
    $('#container').triggerTab(3);
    return false;
  });
  $('
Previous<\/a><\/p>').prependTo('#first-previous').find('a').click(function() {
    $('#container').triggerTab(1);
    return false;
  });
});

Note that container is the main ID of the whole tabs structure. These names are similar to what you'll find at the jQuery tutorial. If you're using the Drupal JS Tools tabs module, you may need to change this to .drupal-tabs.

That's it. Tested in IE6, IE7, Safari3, and Firefox. You can style the look of them to appear more like buttons using the continue class with CSS.

Tags: 
drupal
javascript
jQuery
tabs