Community & Support

desperately need a small javascript that will REFRESH a node teaser upon flagging

Greetings!

I'm no Javascript expert, so I'm wondering if someone could give a little help with a correct syntax and logic. I've been banging my head against this, so if someone chooses to help, it will be much appreciated by me as well as many others who have been looking for a similar solution.

The basic requirement is a dynamic community-led moderation of submitted content. What I'm after is to create a "Bury" button - which will behave much the same way as the "Bury" button behaves on Digg.com - you click it and the node teaser instantly fades away and collapses.

I have Flag and Flag_Abuse modules. When you click a flag called "Bury" in the next pageload a new CSS class will be added to it. (this is already done by the Flag module - see http://drupal.org/node/312220) So when the CSS "display:none" takes effect that node teaser will no longer be displayed in subsequent pageviews.

But I need a javascript that will refresh the teaser of THAT node instantly without the end-user having to reload the page. If I could have this, then the CSS class change would take effect instantly, and the teaser would disappear. One way to fetch the node data is by using the http://drupal.org/project/component module. So far I've got the following JS code, but it's not working. Can someone please help?

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

  // The following line is needed for compatibility with Drupal 5,
  // which doesn't have 'Drupal.settings.basePath'. Drupal 5 users
  // must update the '/' to match their bash path.

  var base_url = (Drupal.settings && Drupal.settings.basePath) ||  '/';

  function nodeExistsOnPage(data.contentId) {
    var domId = 'node-' +data.contentId;
    return $('#'+domId).length != 0;
  }

  function refreshnode(data.contentId) {
    var domId = 'node-' +data.contentId;
    $.get(base_url + '?q=component/node/' + data.contentId, function(newHtml) {
      // Replace the old node with the new one.
      var domElement = $(newHtml).insertAfter('#'+domId);
      $('#'+domId).remove();
      Drupal.attachBehaviors(domElement);
    });
  }

  if (data.flagName == 'abuse_node') {
    if (nodeExistsOnPage('node/' +data.contentId)) {
      refreshnode('node/' +data.contentId);
    }
  }
});

Of course, if you have any other suggestions on how to achieve the fading/disappearing effect once the flag is clicked, I'm all open to suggestions.
Dynamically refreshing the flagged node one functionality that is definitely missing in the group of flag modules. Can anybody help?

Comments

Do you have a link to the

Do you have a link to the page in question? Javascript is hard to write without a live example of the HTML.

Full-time freelancer, always looking for work.
jaypan.com (my portfolio)

@Jay Matwichuk - I have sent

@Jay Matwichuk - I have sent you an e-mail with the address of my website.

I'm also trying a very simple code:

$(document).bind('flagGlobalAfterLinkUpdate', function(event, data) {
  $('#'+data.contentId).fadeOut('slow');
$.growl('Flag', 'The article '+data.contentId + ' has been flagged and hidden.');
});

The "growl" message is displaying okey with NID number correctly, which means that it undertands "data.contnetID", but the line before that and fadeOut don't seem to take place.

In addition, this seems to be the only writeup for Flag javascripts http://drupal.org/node/336122 , but it is very limited in terms of scenarios, while Flag is becoming increasingly an important component of Drupal essentials. Everytime that a node is flagged, it means that an "action" of some kind has been taken on it, and that means that there should be a javascript that will refresh that teaser or node instantly.

----------------------------------------------------------------
Πλαστικός Χειρουργός

I'm sorry, I don't reply to

I'm sorry, I don't reply to email requests for support, as it doesn't help anyone else in the future.

Either post a link here, or post the relevant HTML.

Full-time freelancer, always looking for work.
jaypan.com (my portfolio)

Hi, I didn't ask you to reply

Hi, I didn't ask you to reply by e-mail. I only sent you a link by e-mail. Please, by all means reply here in the forum. I'm one of the drupallers who 100% believes that all solutions, codes and snippets should exist online and especially in this forum for all others to see in the future.

----------------------------------------------------------------
Πλαστικός Χειρουργός

I don't see a flag button on

I don't see a flag button on your page anywhere.

Full-time freelancer, always looking for work.
jaypan.com (my portfolio)

you need to register or login

you need to register or login (sorry, I forgot to mention that it's for authenticated users). I've created a user account for you
username: demo
password: demo

And then you'll see a "Hide it" link below each node teaser. When clicked these node teasers need to fade away and disappear.

----------------------------------------------------------------
Πλαστικός Χειρουργός

After registering, no

After registering, no articles are visible whatsoever.

You're not making this easy mate.

Full-time freelancer, always looking for work.
jaypan.com (my portfolio)

woops - sorry (I think it was

woops - sorry (I think it was my incomplete hack of the TAC_lite module still active) . It should all work now. Login and then go to the front page, and then click on the "Hide it" flag in the links of the teasers. Terribly sorry about the glitches and I really appreciate you taking time to find a solution. Once it's sorted, I'm sure the codes will be extremely useful to anyone wanting to use Flag module for the moderation purposes.

----------------------------------------------------------------
Πλαστικός Χειρουργός

Try

Try this:

Drupal.behaviors.moduleName = function()
{
  $(".flag-action").each(function()
  {
    $(this).click(function()
    {
      $(this).parents(".node").slideUp();
    });
  });
};

No guarantees it will work.

Full-time freelancer, always looking for work.
jaypan.com (my portfolio)

You're a SUPERSTAAARRRRRR!!!

You're a SUPERSTAAARRRRRR!!! It worked, it worked, it worked! Mega-Uber-Kudos to you Jay Matwichuk - you'e a javascript Master!!!! I just added your javascript below what I already had and it worked! This is PERFECT!!! Woooohhoooo! Check it out!

It pulls up the full node view of the article as well. It would be nice to have "dim out" effect in case of full nodes instead of slideUp. Do you know how to do that in case we're watching a full node?

Okey drupallers, if any of you needs to hide a teaser immediately after it has been flagged, here's the Javascript that worked for me:

$(document).bind('flagGlobalAfterLinkUpdate', function(event, data) {
  $('#'+data.contentId).hide('');
       // $.growl('Flag', 'The article '+data.contentId + ' has been flagged and hidden.');
});


Drupal.behaviors.moduleName = function()
{
  $(".flag-action").each(function()
  {
    $(this).click(function()
    {
      $(this).parents(".node").slideUp();
    });
  });
};

you will need to put this code in a separate file - called it hiding.js, put it in your theme's root directory and call it from your theme's .info file. with a line like this

scripts[] = hiding.js

All the thanks and kudos go to Jay Matwichuk for taking the time to make this work!

----------------------------------------------------------------
Πλαστικός Χειρουργός

Glad it helped :)

Glad it helped :)

Full-time freelancer, always looking for work.
jaypan.com (my portfolio)

subscribing for learning

subscribing for learning purposes =)