Refreshing a block using AJAX I am trying to apply the example from [the Flag API page][1] to refresh a block dynamically via AJAX. I am looking into customised jQuery code because my block is created via a module, not a view.

I have implemented the callback in the .module file and it works. It is when I try to copy blockExistsOnPage() where I fail. It talks about a component module which is necessary for the execution of the code, but this module is obsolete for drupal 7. I think that I stumble on the definition of var domId. This is my JavaScript code.

(function ($) {
 $(document).bind('flagGlobalAfterLinkUpdate', function(event, data) {
   alert('Object #' + data.contentId + ' (of type ' +
   data.contentType + ') has been ' + data.flagStatus +
   ' using flag "' + data.flagName + '"');

    if (data.flagName == 'myflag') {

        if (blockExistsOnPage('mymodule', 'mymodule_blockid')) {
            refreshBlock('mymodule', 'mymodule_blockid');
        }
    }
  });

// Attempt at refreshing the block
function blockExistsOnPage(module_name, block_id) {
  var domId = module_name + '/' + block_id;
  return $('#'+domId).length != 0;
}


function refreshBlock(module_name, block_id) {
  var domId = module_name + '/' + block_id;
  $.get(base_url + 'node/' + $nodeid + '/' + block_id, null, function(newHtml)  {
    // Replace the old block with the new one.
    var domElement = $(newHtml).insertAfter('#'+domId);
    $('#'+domId).remove();
    if (Drupal.attachBehaviors) {
       Drupal.attachBehaviors(domElement);
    }
 });
}


edit: I am trying to use a $.ajax request instead. It seems cleaner, but I am struggling to get my relative address of the type node/[nid]/module_name/block_id. Should I modify the block_id in the menu hook? Or should I find a way to create a url in the jquery:

module hook menu:
    function get_involved_menu() {

// Ajax Callback. Returns updated content of block
$items['block_id'] = array (
 'title' =&gt; 'Content of module_name block',
 'page callback' =&gt; 'module_name_createcontent',
 'access arguments' =&gt; array ('access content'),
 'type' =&gt; MENU_CALLBACK,
 );

return $items;
}


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

  $.ajax({
     type: "POST",
     url: 'module_name/block_id',
     success: function (data){
        $('div.get-involved-divblock').html(data);
     }
   });
 });


the code below returns an empty block. If I am on node '57', and I put instead

 url: '57/module_name/block_id',


Then it returns the content. How can I make it a relative path? How do I obtain the node id in the jquery?
depending on how your module is setting up the block, you could look into Block Refresh:


  Block Refresh allows an administrator to configure a block to refresh
  it's content via 3 different methods: automatically via a timer (eg
  every 30 seconds) , manually via a 'refresh' link, and once on page
  load.
  
  Block Refresh uses jQuery/AJAX so the refresh happens
  "behind-the-scenes".
  
  Block refresh can be handy to serve fresh content in certain blocks on
  otherwise cached pages. You can opt to bypass drupal's cache for the
  refresh callbacks for each block.


Edit

I just ran into this exact problem and developed a simple little approach that works nicely:


using Block Refresh


set up each of the blocks you want to refresh as manual - this would normally cause a link to appear in each block allowing a click refresh

create some css to hide the ugly links:

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

then add a simple jQuery click to force block refresh to do all the work for you - this can be modified appropriately as necessary:

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



I found this will refresh ALL blocks on the page set up with block refresh, including Views.