0

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' => 'Content of module_name block',
 'page callback' => 'module_name_createcontent',
 'access arguments' => array ('access content'),
 'type' => 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?

  • The domID here refers to the unique ID of the block. This block ID is generated from the module_name + block ID. if your module defines the block, check the html source to find the id attribute of the block. – AyeshK May 10 '15 at 10:57
  • Hello Ayesh,in my case, the module is 'get_involved' and the block id is 'get_involved_block', which I had defined. I do not seem to get anything out of the 'return $('#'+domId).length != 0;' line. Is my command ok? I am no expert in jQuery... – Pierre_colin May 10 '15 at 11:02
  • The problem is that node/[nid]/[block_id] is not a valid path, in plain Drupal; that is probably something the missing module provided. – kiamlaluno May 11 '15 at 11:41
  • Thanks Kiamlaluno. I am looking into getting the right path... – Pierre_colin May 12 '15 at 16:02
  • I have used GUE's answer from this page: drupal.stackexchange.com/questions/78662/…, and it loads something in my block. But currently, it is loading the whole page! Not just my block... – Pierre_colin May 12 '15 at 18:07
1

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.

  • Thanks Geoff,I tried that module, but it does not allow to trigger a refresh based on a flag event. – Pierre_colin May 12 '15 at 16:02
  • I added an edit – Geoff May 18 '15 at 3:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.