Support multiple instances of the same flag on single node view pages

The first is easily possible through theming, the second is possible but only with some additional work on your part. See:

http://drupal.org/handbook/modules/flag
Placing a Flag Link: http://drupal.org/node/295383
Flag API JavaScript: http://drupal.org/node/336122

Reopening because I am facing a similar issue and not sure the best way to go about it.

Here's what I'm looking at (slightly simplified): We have a block which basically displays two Views; Most Recent Items and Most Popular Items. Users can click a "Like/Unlike" button to vote up an item or rescind their vote. A bit of JavaScript makes it so only one View shows in the block at a time; with the click of a tab, one of the Views hides and the other shows up via CSS (no AJAX). The issue is that it is possible, and in some cases quite likely, that an item will appear in both lists, so if someone "Likes" an item in the Most Popular list, then switches to the Most Recent list, we'd like that item to show up as "Liked" in that list as well. What's the best way to go about this?

I've already tinkered with scripting. From what I could see, this would be really easy if I could just have my script pick up the other instance of the "Like" button and then call updateLink() on it with data.newLink. However, since updateLink() is itself inside another function, I'm not able to call it from outside that outer function… that I can tell.

Garrett, let me know if this code works for you.

(function ($) {

// Usually when flagging, only the triggering link gets updated. Sometimes there are several links
// on the page, and the following code updates them all.

$(document).bind('flagGlobalAfterLinkUpdate', function(event, data) {
  // Find all the link wrappers on the page, but exclude the triggering element
  // because Flag's own javascript updates it.
  var $wrappers = $('.flag-wrapper.flag-' + data.flagName + '-' + data.contentId).not(data.link);
  var $newLink = $(data.newLink);
  // Hide message, because we want the message to be shown on the triggering element alone.
  $('.flag-message', $newLink).hide();
  // Finally, update the page.
  $wrappers = $newLink.replaceAll($wrappers);
  Drupal.attachBehaviors($wrappers.parent());
});

})(jQuery);

Note that we utilize the flag-FLAGNAME-CONTENTID class.

However, since updateLink() is itself inside another function, I'm not able to [...]

(Whatever, Flag's javascript could certainly be modernized. There's still logic in updateLink() to accommodate "Views Bookmark" (the old module), where there wasn't a wrapper around the links.)

mooffie, after a tweak or two, that works perfectly. Thanks, man!

This looks exactly like the solution I need for a similar issue. Unfortunately I'm not quite sure where to put this javascript. Please excuse my ignorance on this.
Thanks.

I'm not quite sure where to put this javascript.

I'm quoting from the handbook:

Drupal 6 users could put [this code] in a 'my_script.js' file in their theme's folder and add "scripts[] = my_script.js' to their theme's .info file. Then they should clear Drupal's cache or else Drupal's theming system won't notice this new file.

If this doesn't work for you, let us know.

Mooffie,
It totally worked for me (with some tweaking); I actually added it with drupal_add_js inline because I only needed it on one node-[CONTENT-TYPE].tpl.php.
Thanks for your help.

Sorry to open this but I'm doing the same thing but with D7.

Everything works fine except that the outer div (flag-wrapper) keeps getting appended along with the link. So as a result each time you click the link another flag-wrapper is added.

Here's the JS.

$(document).bind('flagGlobalAfterLinkUpdate', function(event, data) {
  
  // Sync subscribe flags. (See: http://drupal.org/node/843308#comment-3309128)

  // Find all the link wrappers on the page, but exclude the triggering element because Flag's own javascript updates it.
  var $wrappers = $('.subscribe-' + data.contentId + ' a').not(data.link);
  var $newLink = $(data.newLink);
  
  // Hide message, because we want the message to be shown on the triggering element alone.
  $('.flag-message', $newLink).hide();
  
  // Finally, update the page.
  $wrappers = $newLink.replaceAll($wrappers);
  Drupal.attachBehaviors($wrappers.parent());  

});

And here is the html to show what happens.

<div class="flag-wrapper subscribe-wrapper subscribe-42 flag-waiting">

  <div class="flag-wrapper subscribe-wrapper subscribe-42">

    <div class="flag-wrapper subscribe-wrapper subscribe-42">

      <a class="flag-action flag-link-toggle unflagged flag-processed" rel="nofollow" title="" href="/flag/flag/subscribe/42?destination=user/42&token=5JVf8vPgmFQPmwAcZH3cP0gMGg5rmL3A93DCn-R751E">Subscribe</a>

      <span class="flag-message flag-unflagged-message" style="display: none;"> </span>
    </div>

  <span class="flag-message flag-unflagged-message" style="display: none;"> </span>
  </div>

<span class="flag-message flag-flagged-message" style="display: none;"> </span>
</div>

As you can see from the markup above, it seems as if the link and div container are added for each flag action.

Is this something we should add to the module JS?

  var $wrappers = $('.flag-wrapper.flag-' + data.flagName + '-' + data.contentId).not(data.link);

Looks like the data var doesn't have data.flagName any more. I can't get this to work.

Got it!

We needed to convert flag names to have hyphens instead of underscores. This is working great for me.

Until #1792584: Two flag links displayed on user profile is fixed, this can easily be tested with a user flag ;)

Patch needed a reroll. Works for me. Committing, and let's see if we get bug reports in the next alpha release :)

Issue #843308 by mooffie, walker2238, joachim: Added support for multiple instances of the same flag on the same page