Have a "flagSuccess" javascript event

That's really good news!

I applied this patch to the 5.x-1.0-beta6 version and at least it seems to cause no problems.

But now I don't know where to put the js-code and what to fill in to "// ...refresh some block on the page...".

Sadly I have only very little experience in js and I don't know the first thing about ajax.

I'm using the garland theme and the block is based on views (it's almost the same, which you delivered as flags_bookmarks. The only differences are: less fields and it’s a block-view instead of a page-view).

Perhaps you could give me a hint, how to go on with this or where I should look for more information? Thanks a lot!

This looks pretty good. I wonder if it would be better to call the "flagSuccess" event on the link rather than on the entire document. This would give some contextual information to the flagging event about which link was actually clicked.

Thanks, I'm not entirely sure how the binding of custom events works so this is new territory to me. I didn't notice the data.link = updateLink(element, data.newLink); line, which is exactly the concern I had regarding finding the "context" of which link was actually clicked.

This looks like a great approach (way better than what I currently have in Fivestar, which offers something similar), so let's put it in. :)

Yep, sorry I was contemplating the namespace choice of calling the method "flagGlobalAfterLinkUpdate", which seemed a bit long-winded. However after looking at the docs you put up, I think it's a reasonable name choice considering the event occurs on the entire document but actually references a single link. So, all in all, looks ready to me!

I'm using Drupal 6. I think the handbookpage describes exactly what i need, but I haven't really understood, how to do it : I'm using Panels 3 and want to refresh the flag-view-block in my right column, when someone clicks the flag-link in my left column.

1. Do I have to install the component module?
2. What do I have to change in this handbook-page-code:

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


  function blockExistsOnPage(module_name, block_id) {
    var dom_id = 'block-' + module_name + '-' + block_id;
    return $('#'+dom_id).length != 0;
  }

  function refreshBlock(module_name, block_id) {
    var dom_id = 'block-' + module_name + '-' + block_id;
    $.get(base_url + '?q=component/block/' + module_name + '/' + block_id, null, function(newHtml) {
      // Replace the old block with the new one.
      $('#'+dom_id).after(newHtml).remove();
    });
  }

  if (data.flagName == 'bookmarks') {
    if (blockExistsOnPage('views', 'flag_bookmarks-block_1')) {
      refreshBlock('views', 'flag_bookmarks-block_1');
    }
  }
});

I just found these classes in my css: view-display-id-block_1 and view-dom-id-1. Is that the block ID, that i have to replace in the code and which module name do i have to fill in the code?

Sorry, you see I dont really understand what the code means, but i'd like to get it working. Thanks

I have exactly the same problem, just can't get it to work. can someone help with a little walk-through? I'm not even sure if my theme picks up the script correctly..

Yes, you do need to install the component module. The component module provides a way to access the specific content via an url, which we then use to replace the existing content. I'm sure there's a better way to do this all but since I don't really understand anything about javascript, this is what I managed to hack together for Drupal 6 (put this in you page.tpl.php or a separate .js file and remember to include this in your theme's info-file):

<script type="text/javascript">
	
	var base_url = (Drupal.setting && Drupal.setting.base_path);
	
	$(document).bind('flagGlobalAfterLinkUpdate', function(event, data) {

	  function blockExistsOnPage(module_name, block_id) {
		var dom_id = 'block-' + module_name + '-' + block_id;
		return $('#'+dom_id).length != 0;
	  }
	  
	  function viewExistsOnPage(view_id) {
		var dom_class = view_id;
		return $('.'+dom_class).length != 0;
	  }
	
	  function refreshBlock(module_name, block_id) {
		var dom_id = 'block-' + module_name + '-' + block_id;
		$.get(base_url + '?q=component/block/' + module_name + '/' + block_id, null, function(newHtml) {
		  // Replace the old block with the new one.
		  $('#'+dom_id).after(newHtml).remove();
		});
	  }
	  
	  function refreshView(view_id) {
		var dom_class = 'view-' + view_id;
		$.get(base_url + '?q=component/view/' + view_id , null, function(newHtml) {
		  // Replace the old view with the new one.
		  $('.'+dom_class).after(newHtml).remove();
		});
	  }
	
	  if (data.flagName == 'varaa') {
		  refreshView('vapaat_keikat');
		  refreshBlock('views', 'poimitut_keikat-block_1');
		  location.reload(true);
	  }
	});
	
	</script>

First of all, notice the Drupal.setting.base_path, there's an error in the example here. What I was trying to achieve is a live front page where users pickup items which are then added to their list of items (displayed in a block) and subsequently removed from the main view. Based on the example provided, I derived the url the Component-module provides for individual views and added the function to refresh the view.

Additionally I added the full page refresh at the end with the location.reload(true). I had a problem where the content would get loaded correctly after setting the flag once, but the second time around I would get redirected to the url from the Component module, for whatever reason. However refreshing the page in between would fix this. Thus I added the refresh call.

I've also ignored the check for whether or not the block/view exists at this point.

As you can see, I'm no javascript developer and admittedly do not fully understand what is actually going on here. However, after hours and hours of pondering I managed to achieve what I set out for, so I figured I'd share it with you. Hope it's of some help to you.