Disqus comment count doesn't show up with Turbolinks

Question

I created a simple Rails 4 cms. There is an article list with disqus comment count on the homepage and also on the category and archive pages.

The disqus code responsible for displaying comment count is just before the closing body tag.

When I enable Turbolinks the comment count shows up only on initial page load. If I visit an article then go back to the article list, there is no comment count. If I reload the page the comment count is there though.

I tried to add jquery.turbolinks gem. I tried to edit the disqus code so it executes on page:change or page:load. I tried to put it inside the head. I tried to add disqus identifiers to the code.

UPDATE: Here is what I am trying right now (edited my shortname):

var disqus_shortname = 'my_shortname'; // required: replace example with your forum shortname

        /* * * DON'T EDIT BELOW THIS LINE * * */
        ($(document).on('page:change',function () {
            var s = document.createElement('script'); s.async = true;
            s.type = 'text/javascript';
            s.src = '//' + disqus_shortname + '.disqus.com/count.js';
            (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
        })());

This way the comment count shows up on initial page load and also when I visit the post list pages the first time. But when I visit them the second time the comment count doesn't show up. Tried this with page:load and page:update also without results.

Anyone encountered this problem?

Answer 1

I couldn't make this work with the default disqus comment count code, so I used the disqus api instead which works like a charm:

    $(document).on('page:change', function () {
        var disqusPublicKey = "MY_PUBLIC_KEY"; // Replace with your own public key
        var disqusShortname = "my_shortname"; // Replace with your own shortname

        var urlArray = [];

        $('.comment-link-marker').each(function () {
          var url = $(this).attr('data-disqus-url');
          urlArray.push('link:' + url);
        });

        $.ajax({
          type: 'GET',
          url: "https://disqus.com/api/3.0/threads/set.jsonp",
          data: { api_key: disqusPublicKey, forum : disqusShortname, thread : urlArray },
          cache: false,
          dataType: 'jsonp',
          success: function (result) {

            for (var i in result.response) {

              var countText = " comments";
              var count = result.response[i].posts;

              if (count == 1)
                countText = " comments";

              $('a[data-disqus-url="' + result.response[i].link + '"]').html(count + countText);

            }
          }
        });
      });

Answer 2

This is a Turbolinks issue. With Turbolinks pages will change without a full reload, so you can't rely on DOMContentLoaded or jQuery.ready() to trigger your code.

Try this: add jquery.turbolinks gem, update application.js and restart the server.