How to make the likes display in topics blog list view

Technical Details

Forum version : #phpBB3
Position : Founder
Concerned browser(s) : Mozilla Firefox, Google Chrome
Who the problem concerns : All members
Forum link : https://www.inforumgr.com

Description of problem

Hello,

So i am using the like system provided from here in my topics. What i want is to have the likes, only the number, from the first topic, display in the topic blog list. I am using the blogs style for the news topics and i want when someone is watching the news in the category, while displaying the topic blog list, to see how many likes the first topic has. How can i accomplish that?

Regards.

Hi,

Let me see if I got this correctly:when someone goes to the topics list, they should see the number of reputation the first post has, right? It is possible to do so, but it would be slow like hell. An example:In a forum with 30 topics, a script would have to load 30 forum pages to get the necessary data. If you still want this, send me a PM with a test account(I'm too lazy to make myself an account ).

Yes, this is what i want. I want only for the first topic to show the likes. Just to be clear, my forum is a news forum so we have like 50 at least news per day so this will load tones of times. So this will load very slow right? I sent you a test account (but be warn the forum is in Greek xD)

Bump!

Hi,

Code:

$(function() {
    var likes = {};
    likes.copyright = "Code by Wolfuryo. Usage of this code without this notice will result in the destruction of the website that uses it";
    likes.elem = $("a.topictitle");
    likes.index = 0;
    likes.config = {
        html: "<div id='likes'>%likes</div>"
    };
    likes.pth = location.pathname;
    likes.reg = /f\d+-/;
    likes.gett = function(l) {
        if (l < likes.elem.length) {
            $.get(likes.elem.eq(l).attr("href"), function(data) {
                var d = $(".vote", data).eq(0).html();
                var ls = /vote-no-bar/.test(d) ? 0 : d.match(/\d+ votes|\d+ vote/)[0].match(/\d+/)[0];
                $("a.topictitle").eq(l).after(likes.config.html.replace(/%likes/g, ls));
                l++;
                likes.gett(l);
            });
        };
    };
    likes.init = function() {
        if (!likes.reg.test(likes.pth)) return;
        likes.gett(likes.index);
    };
    likes.init();
});

Code: html: "<div id='likes'>%likes</div>"

->This is the html structure, you can modify it how you want.

Code: %likes

is a placeholder for the number of likes, don't remove it.

It displays an error on this part here:

Code: [0]

and it's giving me this error:

Code: Uncaught TypeError: Cannot read property '0' of null

Hmm, i went to your forum and it seems like everything is working well:

Oh okay, So hello again @Wolfuryo,

I want it to work for the blog style and NOT there. Check this out to see.

@Wolfuryo, now i can see it everywhere, but using Google Chrome it doesn't show up. On Firefox it shows up after some seconds but on Chrome no..

Hi,

Open up google chrome's console(press F12) and tell me if there's any error in it.

It shows the error i told you above. For the

Code: [0]

That's strange. I think that chrome treats regular expressions in other way than firefox. Run this code in the console(paste it and press enter) and tell me what happens:

Code:


typeof "ma". match(/ma/g)


This is what i get:


Let me tell you what happened some hours ago. When i logged in with the Bot account on Firefox i could see the likes normally. My other Admin who uses Firefox cannot see the likes either. Now when i used the Bot with Chrome, i could see the likes normally. And one other member i asked, he could see the likes normally using Chrome and Firefox. Now my question goes, does this have to do something with the admins?

Let me explain how that code works:for every topic, it gets the html content of the topics' page. Then it searches for the element

Code: .vote

. The error cannot read property 0 of null is caused by the fact that the code doesn't find the .vote element(the .vote element is null).

I think that there are some topics that don't have the .vote element for some reason, so I modified the code a bit so that it skips those topics. Other than that, I don't think there's anything I could do, especially because FM's like system is horribly made.

@Wolfuryo when using match, you need to check that it isn't null before accessing the indexes of the returned array otherwise it throws an error. ex :


So for example, instead of this :

Code:

                var d = $(".vote", data).eq(0).html();
                var ls = /vote-no-bar/.test(d) ? 0 : d.match(/\d+ votes|\d+ vote/)[0].match(/\d+/)[0];
                $("a.topictitle").eq(l).after(likes.config.html.replace(/%likes/g, ls));
                l++;
                likes.gett(l);

You can do this :

Code:

                var d = $(".vote", data).eq(0).html(),
                    ls,
                    match;

                if (/vote-no-bar/.test(d)) {
                  ls = 0

                } else {
                  match = d.match(/\d+ votes|\d+ vote/);

                  if (match && match[0]) {
                    match = match[0].match(/\d+/);

                    if (match && match[0]) {
                      ls = match[0]
                    }
                  }
                }

                $("a.topictitle").eq(l).after(likes.config.html.replace(/%likes/g, ls));
                l++;
                likes.gett(l);

It's a little more statements, but it should ensure that you don't get any errors when making matches. You can also use test() to search what you're looking for as well, because it only returns a boolean value and it should cut down on the size a bit. Match is good for certain instances (other times it's slower), but you have to be careful when using it, because you can easily throw errors.

Personally, I like to use replace() along with capture groups to get the values I'm looking for. It's pretty much the same thing, only the prior method doesn't require you to access indexes which could be null. (see below)

Thanks for the advice Ange, I'm still in the long process of learning javascript, so sometimes I forget about checking for things like that. I have already added a condition on the code from Luffy's forum to check for that.

Yup ! Making mistakes is just one of the many ways we learn new things. (I can't tell you how many errors I've made over the years... )

KIU

@Wolfuryo and @Ange Tuteur thanks for your time. Now it's showing it to me as well. Although, now when there is a vote in the topic it shows undefined. When it's 0 it's showing correctly but when there's a vote casted i get the undefined. I'm currently using this code:

Code:

$(document).ready(function() {
    var likes = {};
    likes.copyright = "Code by Wolfuryo. Usage of this code without this notice will result in the destruction of the website that uses it";
    likes.elem = $("a.topictitle");
    likes.index = 0;
    likes.config = {
        html: "<div id='likes'>% likes</div>"
    };
    likes.pth = location.pathname;
    likes.reg = /f\d+-/;
    likes.gett = function(l) {
        if (l < likes.elem.length) {
            $.get(likes.elem.eq(l).attr("href"), function(data) {
              var d = $(".vote", data).eq(0).html(),
                    ls,
                    match;
 
                if (/vote-no-bar/.test(d)) {
                  ls = 0
 
                } else {
                  match = d.match(/\d+ votes|\d+ vote/);
 
                  if (match && match[0]) {
                    match = match[0].match(/\d+/);
 
                    if (match && match[0]) {
                      ls = match[0]
                    }
                  }
                }
 
                $("a.topictitle").eq(l).after(likes.config.html.replace(/%/g, ls));
                l++;
                likes.gett(l);
            });
        }
    };
    likes.init = function() {
        if (!likes.reg.test(likes.pth)) return;
        likes.gett(likes.index);
    };
    likes.init();
});

Bump.

@Luffy,

I'll remake the code. The old one has made for topics, not blogs. I'll install in on your forum and will edit this post with the good code.

Okay @Wolfuryo, thanks a lot for your code! Much appreciation.

Hi,

@Luffy, everything should be alright now. I tested the code on firefox and chrome on both the admin account and a guest account and everything should work as it should. Here's the code:

Code:

$(function() {
  /*Code by Wolfuryo. Usage of this code without this notice here will result in the destruction of your forum*/
    var path = location.pathname;
    var reg = /f\d+-/;
    if (!(reg.test(path) && $(".blog").length)) return;
    var elem = $("a.topictitle"),
        len = elem.length,
        i = 0;
    var index = 0;
    var config = {
        html: "<div id='likes'>%number %word</div>",
        singular: "Like",
        plural: "Likes"
    };

    function get(l) {
        if (l >= len) return;
        $.get(elem.eq(l).attr("href"), function(data) {
            var d = $(".vote.gensmall", data).eq(0).html();
            var ls = 0;
            if (!/no-bar/.test(d)) {
                var match1 = d.match(/% .\d+/);
                if (match1 && match1[0]) {
                    ls = match1[0].match(/\d+/);
                    if (ls && ls[0]) {
                        ls = ls[0];
                    } else {
                        ls = 0;
                    };
                };
            };
            elem.eq(l).after(config.html.replace(/%number/g, ls).replace(/%word/g, ls ? config.singular : config.plural));
            l++;
            get(l);
        });
    };
    get(index);
});

Code: html: "<div id='likes'>%number %word</div>",

This is the html code for the likes. You can edit it how you want. %number is automatically replaced with the according number. %word is replaced by the singular or plural form of likes.

Code: singular: "like"

Replace this(if you want) with the singular
form of like. Same thing for

Code: plural: "likes"

Note:The code works only for blogs, if you want to use it on forums, remove this part of the code(line 5):

Code:

 && $(".blog").length

@Wolfuryo thank you for all your hard work on this code. I know this is a lot of work and i appreciate your work to it. Just a heads up. The plural doesn't actually work if there are votes (but i don't need this to be fixed) and the likes do not appear if you change the page to page 2 or 3 or any other than page 1 of the news. I don't know why that is so perhaps there's an issue with it?
Also, it only works under one category only if i set it in all the pages, and if i set it in the sub forums as well.
And thanks again!