Skip to content
This repository

Cluetip conflicts with Disqus #132

Closed
archon810 opened this Issue · 9 comments

2 participants

Artem Russakovskii Karl Swedberg
Artem Russakovskii

Hi,

An issue has been flagged by multiple users of our site that I've been able to trace to Cluetip. Essentially, a Cluetip popup over a url that belongs to various posts causes Disqus to reload with the comments for those posts you're hovering on.

Here's how you can reproduce this right now: http://www.androidpolice.com/2013/07/17/the-new-nexus-7-breaks-cover-allegedly-spotted-in-leaked-video-and-pics/#comment-966705638

Here's where Cluetip is called: http://cdn.androidpolice.com/wp-content/themes/ap1/js/ap1.js?cachebust=67&ver=3.5.2

I've also filed this with Disqus. I'm not sure what's causing the reloading of the comments - is it Cluetip's or Disqus' fault?

Thank you.

Karl Swedberg
Owner

hi @archon810, I'll try to take a look at it this weekend.

Karl Swedberg
Owner

Hi again,

It's a little hard to tell what's going on, but it kind of looks like the href that the cluetip is pointing to redirects to a URL like this: http://www.androidpolice.com/2013/07/17/the-new-nexus-7-breaks-cover-allegedly-spotted-in-leaked-video-and-pics/?cf_action=sync_comments&post_id=89378

I'm guessing that the "cf_action=sync_comments" query string parameter could be triggering the Disqus scripts.

On closer inspection it looks like you're retrieving the page via Ajax, but then you're not even using its contents. A better way to accomplish what you're after with the QR code tooltip is to create the contents inside a function that you pass as the first argument. Your options will then be passed in the second argument. I tested the following and found that it worked (note that I also changed the DOM selection a bit because you were adding a bunch of function calls when they could be consolidated into one):

jQuery("div.post a").filter(function() {
    var href = jQuery(this).attr('href');
    return !jQuery(this).find('img[src*=\'chart.apis.google\']').length && 
      !/^#/.test(href) && 
      !/(jpe?g|gif|png)$/.test(href);
  })
  .cluetip(function() {
      var link = jQuery(this).attr('href');
      var size = 200;
      var qr_tag = "<div id='qr_img'><img alt='QR code for " + link + "' title='QR code for " + link + "' width='" + size + "' height='" + size +
        "' src='http://chart.apis.google.com/chart?cht=qr&chs=" + size + "x" + size + "&chl=" + encodeURIComponent(link) + "'></div>" +
        "<div id='qr_code_footer'><img class='qr_code_help_icon' src='/wp-content/themes/ap1/images/icons/help.png'>To improve your mobile experience, AndroidPolice provides QR codes that appear after a few seconds of hovering on most in-post links.<p><img class='qr_code_help_icon' src='/wp-content/themes/ap1/images/icons/mobile_phone.png'>Scan the QR code above, and the link will be instantly accessible on your phone.</p></div>";
      return qr_tag;
  },
    {
    width: '202px',
    attribute: 'href',
    titleAttribute: 'disable',
    cluetipClass: 'ap',
    positionBy: 'mouse',
    showTitle: false,
    cursor: 'pointer',
    clickThrough: true,
    hoverIntent: {
      sensitivity: 1,
      interval:    1200,
      timeout:     500
    }
  });

Let me know if this does the trick.

Artem Russakovskii

Hi Karl,

I'll take a look at your changes, thank you. But I'm confused by your claim about the link with the cf_action. The links I hover on in the related posts area don't have these parameters - they're straight links with no parameters at all. They also don't redirect. The cf_action link does get pinged by the Disqus widget via AJAX on page load and triggers a cron job on the backend. I am not sure how it's related to the links on the page.

Edit: Just looked at the source, and the cf_action isn't even an <a> link - it's: <script async src="?cf_action=sync_comments&amp;post_id=178334"></script>. The cluetip code doesn't attach to it.

Artem Russakovskii

Btw, tried your code. Sorry to say, it doesn't work properly. It correctly pops up the first QR code, but then pops up the exact same one for any other link. It looks like it either caches it or assigns all values when it executes the first time or something. Any ideas?

The upside though, Disqus doesn't reload anymore, so at least we have that.

Karl Swedberg
Owner

Sorry about that. I fixed the plugin, so if you use the latest version that I just pushed to GitHub, it should work now. Or, you could use the same cluetip version that you have and call $(this).cluetip(...) within a .each() call. But i'd recommend updating the plugin.

To clarify about the Disqus issue, the reason it was reloading before is that it was Ajaxing the page that the href was pointing to and dumping the contents into the cluetip, because that's the default behavior. Then, from your onShow function, you were replacing that content with your own. By default, jQuery executes scripts that appear in html that it fetches with ajax, so I'm pretty sure that's what was happening.

In any case, you should be able to get this working well with the updated plugin file.

Sorry for the inconvenience.

Artem Russakovskii

I updated the plugin, cleared cache, but the problem still persists. I didn't change my code though, just updated to the latest version. Or did you mean update AND use your version of the code?

Karl Swedberg
Owner

Yes, sorry, you still need to use my version of the code. Otherwise, it's going to keep making that Ajax request, which isn't what you want.

Artem Russakovskii

That seems to have done the trick. You, sir, are a scholar. Glad it helped fix a bug as well.

Cheers.

Artem Russakovskii archon810 closed this
Karl Swedberg
Owner

So glad it's working for you now! And thanks for spotting the bug. :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.