How to refresh a coded block when a flag is clicked in it?

Question

I have created a block in which I display a flag. All of it is done programatically. The content of the block changes depending on the flag status, but when a user clicks on the flag, it does not refresh the page or the block. The content is currently refreshed only when I reload the page.

I have gone as far as to create a callback from my block module to a jquery file, but I do not quite know where to go from here. I am not familiar enough with jquery to fully understand what to do, and how to use the callback function. Here is what I have thus far in my .module file:

/**
* Implements hook_init().
*/
function mymodule_init() {
drupal_add_library('system', 'drupal.ajax');
}
/**
* Implements hook_menu().
*/
function mymodule_menu() {
$items = array();

$items['block/reload'] = array(
  'title' => 'Refresh block',
  'page callback' => 'mymodule_refresh',
  'access callback' => TRUE,
  'type' => MENU_CALLBACK,
);

return $items;
}

/**
* Menu callback.
*/
function mymodule_refresh($action, $type) {

}

In a .js file which I have put in a folder 'js' in my module's folder, I have created this:

(function($){

$(document).bind('flagGlobalAfterLinkUpdate', function(event, data) {

}

});    

})(jQuery);  

Answer 1

The easiest way would be to use the module Block Refresh. With this module you can set up any block to be reloaded both manually and by an interval. For your use case you would chose the first option, here is an example form the block configuration page:

You will see now a refresh button on blocks title, which could be hidden by the following CSS:

.block-refresh-button {
    display:none;
}

and then triggered by clicking the flag:

$(".flag").click(function() {
    $(".block-refresh-button").each(function() {
        $(this).click();
    });
});

I did not test the code.

Answer 2

To reload the page:

location.reload();

http://www.w3schools.com/jsref/met_loc_reload.asp