Inserting additional AJAX using hook_flag

Question

I'm trying to insert additional AJAX commands when a Flag link is toggled. The flags link type is 'JavaScript toggle'.

Hooking into the Flag callback seems simple enough using hook_flag.

function hook_flag($op, $flag, $content_id, $account, $fcid) {

    if ($flag->name == 'flag_name') {
        // Additional Ajax Commands
    }

}

The AJAX command I'm looking to include is:

ajax_command_replace("#div_id_to_replace", 'New content');

Is it possible to insert AJAX using hook_flag? If not, what would be the most appropriate way to swap out div content (in addition to the actual Flag AJAX) without a page reload when a Flag link is toggled?

Update: Found the Flag API (JavaScript) page while crawling through the docs. Hopefully will have an answer to add shortly.

Answer 1

I'm certain there is a better way to do this, but rather than using hook_flag use JavaScript.

The trick seems to be to use bind('flagGlobalAfterLinkUpdate', function(event, data)

And then catch the specific flag you're using with data.contentId;

(function ($) {
    $(document).bind('flagGlobalAfterLinkUpdate', function(event, data) {
        var fsrnid=data.contentId;
        var fsrpostcard = $(".postcard-" + fsrnid).text();
        var fsrpostcardset = fsrpostcard.indexOf('Yes') >= 0;
        var fsrcalled = $(".flag-customer-called-" + fsrnid).text();
        var fsrcalledset = fsrcalled.indexOf('Yes') >= 0;        
        var fsremail = $(".flag-email-sent-" + fsrnid).text();
        var fsremailset = fsremail.indexOf('Yes') >= 0;

        if (fsrpostcardset || fsrcalledset || fsremailset) {
            $(".completed-" + fsrnid).text('Yes');
        } else {
            $(".completed-" + fsrnid).text('No');
        }

    });
}(jQuery));

The Flag API (JavaScript) documentation is a bit dated and doesn't necessarily apply directly to Drupal 7. It is still very useful in figuring out how the Flag module uses JavaScript though.