Can I Make New Comments Appear at the Top of the Comments Right After You Click "Post Comment"

Gerhard

Hi everyone, I'm hoping this will be an easy one - might literally be a single line of code somewhere.

So I've changed the comments' order so that the most recent comment shows up at the top. I have also used jQuery to move the WYSIWYG editor to the top of the comments instead of having it at the bottom. An example can be seen here https://www.ahquha.org/discussion/146/ - although you guys wouldn't be able to see the Editor I realize if you're a guest (It's directly after the wiki).

My issue is that when a user presses on "Post Comment" - their comment still appears at the bottom of the comments (if they refresh the page it's fine and then at the top). So this isn't a website breaker, but a mild annoyance to users because they have to scroll down to check their post and maybe upvote it.

Is there an easy way to make the new comment appear at the top of the comments immediately after pressing on "Post Comment"?

I really appreciate any answers, thanks guys

Swennet

Funnily enough I found your forum linked on Reddit the other day.

Anyway, I had a quick look for you and found the solution. In your forum folder open /applications/vanilla/js/discussion.js

Then on line 182 find
$(json.Data).appendTo('ul.Comments,.DiscussionTable').effect("highlight", {}, "slow");

Replace appendTo with prependTo. Done!

It should be noted however, that this is a 'hack'. You will have to edit this file manually every time you update Vanilla, because it will be overwritten on update.

R_J

@Swennet said:
Anyway, I had a quick look for you and found the solution. In your forum folder open /applications/vanilla/js/discussion.js

Then on line 182 find
$(json.Data).appendTo('ul.Comments,.DiscussionTable').effect("highlight", {}, "slow");

Replace appendTo with prependTo. Done!

It should be noted however, that this is a 'hack'. You will have to edit this file manually every time you update Vanilla, because it will be overwritten on update.

Based on what you've found I have taken a look at the file and the context around that line is this:

if (gdn.definition('PrependNewComments') == '1') {
    $(json.Data).prependTo('ul.Comments,.DiscussionTable');
    $('ul.Comments li:first').effect("highlight", {}, "slow");
} else {
    $(json.Data).appendTo('ul.Comments,.DiscussionTable').effect("highlight", {}, "slow");

This seems like it should be possible to change the sort order by a definition. If you search for "PrependNewComments" you'll find that it is only used in the embed method of class.discussioncontroller.php:

// Ordering note for JS
if ($SortComments == 'desc') {
    $this->addDefinition('PrependNewComments', '1');
}

Since it is only used in embed(), we cannot influence this behavior simply by changing the config. We have to add that value "manually". Put the lines below in a plugin or a theme hooks file and you are done!

public function discussionController_render_before($sender, $args) {
    $sender->addDefinition('PrependNewComments', '1');
}

Gerhard

Wow, thanks for the two great answers so fast! This is a great community, makes vanilla open source even better

@Swennet I used your solution and it works perfectly! I'm saving this thread in my after-update-to-do-list file.

@R_J I tried adding the code to the bottom of class.mobilethemehooks.php in the mobile theme - but it broke the page entirely. I made sure to place it in the correct brackets and tried a few different spots in the file also. Thanks for your input though

@Swennet Funnily enough I found your forum linked on Reddit the other day.

Oh wow, that's a huge coincidence considering the amount of traffic I'm getting - I'm guessing it was me asking for help somewhere

R_J

a) class.mobilethemehooks.php already has a method discussionController_render_before. That's the reason why you had that error: method names must be unique in a class.
b) If you change a file of the mobile theme or a javascript file doesn't make much difference: your changes will get lost on the next update.
c) Why did you use a the mobile themehook file? From looking at your page I see that you are using a custom theme. Changing anything in the mobile theme wouldn't have changed desktop behavior.

Create a file like that: /themes/Ahquha.org_Theme/class.ahquhaorgthemehooks.php

<?php

class AhquhaOrgThemeHooks implements Gdn_IPlugin {
    public function setup() {
        return true;
    }
    public function onDisable() {
        return true;
    }

    public function discussionController_render_before($sender, $args) {
        // Makes new comments appear on top of a discussion.
        $sender->addDefinition('PrependNewComments', '1');
    }
}

You can now revert the core changes

---

By the way: if you enjoy doing hacks, you still have a way to do it sober. Look at the html source of a Vanilla page. You will find lines like that:

 <script type="text/javascript">gdn=window.gdn||{};gdn.meta={
    "Roles": [
        "Administrator"
    ],
    "ConfirmDeleteCommentHeading": "Delete Comment",
    "ConfirmDeleteCommentText": "Are you sure you want to delete this comment?",
    "Spoiler": "Spoiler",

If you add 'PrependNewComments: 1' to this JSON data via JavaScript, new comments will be prepended, too. The line addDefinition... from above does nothing else (but server side, not client side)

Gerhard

Thanks @R_J - I'll try out what you said soon and report back my findings