The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

How to make the likes display in topics blog list view

View previous topic View next topic Go down

Solved How to make the likes display in topics blog list view

Post by Luffy on July 9th 2017, 12:11 am

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.
avatar
Luffy
Manager
Manager

Male Posts : 4881
Reputation : 500
Language : Greek, English
Location : Greece

http://thinktank.forumotion.com/

Back to top Go down

Solved Re: How to make the likes display in topics blog list view

Post by Justice™ on July 9th 2017, 10:09 am

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 bwi ).
avatar
Justice™
Forumember

Posts : 521
Reputation : 121
Language : Romanian and English

http://board.realmsn.com

Back to top Go down

Solved Re: How to make the likes display in topics blog list view

Post by Luffy on July 9th 2017, 10:56 pm

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)





avatar
Luffy
Manager
Manager

Male Posts : 4881
Reputation : 500
Language : Greek, English
Location : Greece

http://thinktank.forumotion.com/

Back to top Go down

Solved Re: How to make the likes display in topics blog list view

Post by Luffy on July 11th 2017, 10:45 pm

Bump!





avatar
Luffy
Manager
Manager

Male Posts : 4881
Reputation : 500
Language : Greek, English
Location : Greece

http://thinktank.forumotion.com/

Back to top Go down

Solved Re: How to make the likes display in topics blog list view

Post by Justice™ on July 12th 2017, 9:01 am

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.
avatar
Justice™
Forumember

Posts : 521
Reputation : 121
Language : Romanian and English

http://board.realmsn.com

Back to top Go down

Solved Re: How to make the likes display in topics blog list view

Post by Luffy on July 12th 2017, 9:36 am

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





avatar
Luffy
Manager
Manager

Male Posts : 4881
Reputation : 500
Language : Greek, English
Location : Greece

http://thinktank.forumotion.com/

Back to top Go down

Solved Re: How to make the likes display in topics blog list view

Post by Justice™ on July 12th 2017, 5:13 pm

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

Posts : 521
Reputation : 121
Language : Romanian and English

http://board.realmsn.com

Back to top Go down

Solved Re: How to make the likes display in topics blog list view

Post by Luffy on July 12th 2017, 11:17 pm

Oh okay, So hello again @Wolfuryo,

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





avatar
Luffy
Manager
Manager

Male Posts : 4881
Reputation : 500
Language : Greek, English
Location : Greece

http://thinktank.forumotion.com/

Back to top Go down

Solved Re: How to make the likes display in topics blog list view

Post by Luffy on July 13th 2017, 11:42 am

@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.. Sad





avatar
Luffy
Manager
Manager

Male Posts : 4881
Reputation : 500
Language : Greek, English
Location : Greece

http://thinktank.forumotion.com/

Back to top Go down

Solved Re: How to make the likes display in topics blog list view

Post by Justice™ on July 13th 2017, 12:14 pm

Hi,

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

Posts : 521
Reputation : 121
Language : Romanian and English

http://board.realmsn.com

Back to top Go down

Solved Re: How to make the likes display in topics blog list view

Post by Luffy on July 13th 2017, 10:44 pm

It shows the error i told you above. For the
Code:
[0]





avatar
Luffy
Manager
Manager

Male Posts : 4881
Reputation : 500
Language : Greek, English
Location : Greece

http://thinktank.forumotion.com/

Back to top Go down

Solved Re: How to make the likes display in topics blog list view

Post by Justice™ on July 14th 2017, 9:00 am

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)
avatar
Justice™
Forumember

Posts : 521
Reputation : 121
Language : Romanian and English

http://board.realmsn.com

Back to top Go down

Solved Re: How to make the likes display in topics blog list view

Post by Luffy on July 14th 2017, 11:03 am

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?





avatar
Luffy
Manager
Manager

Male Posts : 4881
Reputation : 500
Language : Greek, English
Location : Greece

http://thinktank.forumotion.com/

Back to top Go down

Solved Re: How to make the likes display in topics blog list view

Post by Justice™ on July 14th 2017, 11:50 am

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.
avatar
Justice™
Forumember

Posts : 521
Reputation : 121
Language : Romanian and English

http://board.realmsn.com

Back to top Go down

Solved Re: How to make the likes display in topics blog list view

Post by Ange Tuteur on July 14th 2017, 4:16 pm

@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)
avatar
Ange Tuteur
Forumaster

Male Posts : 13176
Reputation : 2881
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to make the likes display in topics blog list view

Post by Justice™ on July 14th 2017, 4:53 pm

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. salut
avatar
Justice™
Forumember

Posts : 521
Reputation : 121
Language : Romanian and English

http://board.realmsn.com

Back to top Go down

Solved Re: How to make the likes display in topics blog list view

Post by Ange Tuteur on July 14th 2017, 5:29 pm

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... Toothless)

KIU Very good
avatar
Ange Tuteur
Forumaster

Male Posts : 13176
Reputation : 2881
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to make the likes display in topics blog list view

Post by Luffy on July 14th 2017, 11:29 pm

@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();
});





avatar
Luffy
Manager
Manager

Male Posts : 4881
Reputation : 500
Language : Greek, English
Location : Greece

http://thinktank.forumotion.com/

Back to top Go down

Solved Re: How to make the likes display in topics blog list view

Post by Luffy on July 16th 2017, 1:02 am

Bump.





avatar
Luffy
Manager
Manager

Male Posts : 4881
Reputation : 500
Language : Greek, English
Location : Greece

http://thinktank.forumotion.com/

Back to top Go down

Solved Re: How to make the likes display in topics blog list view

Post by Justice™ on July 16th 2017, 5:08 am

@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.
avatar
Justice™
Forumember

Posts : 521
Reputation : 121
Language : Romanian and English

http://board.realmsn.com

Back to top Go down

Solved Re: How to make the likes display in topics blog list view

Post by Luffy on July 16th 2017, 10:12 am

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





avatar
Luffy
Manager
Manager

Male Posts : 4881
Reputation : 500
Language : Greek, English
Location : Greece

http://thinktank.forumotion.com/

Back to top Go down

Solved Re: How to make the likes display in topics blog list view

Post by Justice™ on July 16th 2017, 1:08 pm

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
avatar
Justice™
Forumember

Posts : 521
Reputation : 121
Language : Romanian and English

http://board.realmsn.com

Back to top Go down

Solved Re: How to make the likes display in topics blog list view

Post by Luffy on July 16th 2017, 10:40 pm

@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!





avatar
Luffy
Manager
Manager

Male Posts : 4881
Reputation : 500
Language : Greek, English
Location : Greece

http://thinktank.forumotion.com/

Back to top Go down

Solved Re: How to make the likes display in topics blog list view

Post by Luffy on July 17th 2017, 8:40 am

Problem solved & topic archived.
Please read our forum rules: ESF General Rules





avatar
Luffy
Manager
Manager

Male Posts : 4881
Reputation : 500
Language : Greek, English
Location : Greece

http://thinktank.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum