Menu
I've been having a hell of a time getting the comment count script to work on my react pages. To start, they recommend putting the script in my index.html file, at the bottom of the <body> tag. I've done this, and seen no result.
<body>
<div id="app">
</div>
<script src="static/index.js"></script>
<script id="dsq-count-scr" src="//mtg-hunter.disqus.com/count.js" async></script>
</body>I have an index.js file which is loading all my components, including the component (let's call it ResultComponent.js) which I want to have the comment count <span> tags in. The <span> tags themselves look like this:
var commentCount = <span className="disqus-comment-count" onClick={function() {this.setState({currentSelectedTab: 4})}.bind(this)}
data-disqus-identifier={idGoesHere}
style={{fontVariant:"small-caps"}}>0 Comments</span>So far, so simple. I'm not using any <a> tags so I haven't got #disqus_thread anywhere. When I load my page, I expect my comment count to go up, but no such luck. To test this, I copied the raw script, unaltered, from the raw count.js script (which is located here). I then pasted it straight into Chrome's devtools console, and it worked; all the relevant comment counters went to their appropriate values.
EDIT: a day later, more prodding; I added breakpoints in the actual code in the disqus.com domain. The script in the script tag is running just fine at the right time, except it's missing variables when it enters the displayCount() function. There's several variables that just aren't given values so it can't go in and populate the comment counts, it always fails out. I have no idea why this fails when it's called from within my index.html but not when I paste the raw count.js code into my console and do it there. No idea why.
To clarify, this is the relevant code:
e.displayCount = function(b) {
for (var c, a, d, e = b.counts, b = b.text.comments; c = e.shift(); )
if (a = j[c.id]) {
switch (c.comments) {
case 0:
d = b.zero;
break;
case 1:
d = b.one;
break;
default:
d = b.multiple
}
c = d.replace("{num}", c.comments);
a = a.elements;
for (d = a.length - 1; d >= 0; d--)
a[d].innerHTML = c
}
}
;j variable is defined. When it runs called from index.html, j is undefined, so it fails at the first if. The calling url is exactly the same in both situations: http://mtg-hunter.disqus.com/count-data.js?1=19767&1=235597&1=373322&1=382310&1=382841&1=382866&1=383023&1=397543&1=397682&1=398434. That gives the b parameter, and when I run the script locally it defines j so that the assignment operator in the if can work (which is a really weird way of doing it, but ok).
edit again: I should point out I'm doing this on a local test server (localhost:3000), not sure if that makes a difference or not?
edit more: The answer to my above question turns out to be 'no'. I uploaded my code to my server and the production site also showed that the script wasn't running properly. This is absurd... I'm out of ideas by now.
edit again more: Partial breakthrough... I added this code to ResultComponent.js:
componentDidMount() {
DISQUSWIDGETS.getCount();
},
componentDidUpdate() {
DISQUSWIDGETS.getCount();
},Good news; when I refresh the page, it shows the right comment count! Hooray! Bad news: when I change parts of the page that hide the Result component, and then bring it back (triggering componentDidUpdate), the DISQUSWIDGETS.getCount() call doesn't work. It still gets called, but the displayCount part of the script never does, so the DOM is never updated with the new information. It's yet another example of this horrid script behaving differently despite being called in exactly the same way...
640
We start by creating an empty <script></script> tag in the memory as script and then assign the necessary attributes to its src and the id to identify the script later. Finally, we append the script to our <body></body> tag to actually load this.
You can put any valid JavaScript expression inside the curly braces in JSX. For example, 2 + 2 , user.firstName , or formatName(user) are all valid JavaScript expressions. In the example below, we embed the result of calling a JavaScript function, formatName(user) , into an <h1> element.
OK, after much back and forth with the support guy at Disqus I finally found an answer; I was close. The solution is:
componentDidMount() {
DISQUSWIDGETS.getCount({reset:true});
},
componentDidUpdate() {
DISQUSWIDGETS.getCount({reset:true});
},Turns out I had to pass the reset:true param, which enabled a chunk of code in getCount to actually do something. I suppose I could've figured that out from the code, but I blame the intensely minified formatting (even with chrome dev tools helping to prettify it) for me missing that. It was also in their knowledge base article for how to add comment counters, but I missed the context of it (and got absorbed by the 'fact' that 'it obviously had to be the script not working, clearly').
And so ends one of my most frustrating few days of coding. And a useful lesson... step back and look at the big picture every now and again, because the answer can be staring you in the face.
136
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With