Hi! If you access this instance of disocurse, you’ll notive I’ve added levels next to peoples pictures. [image] Thing is, when we scroll or reload the page, users don’t have their levels displayed. I would need to run a function on the call back when users posts are displayed. I’ve looked at the client side api doc: https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/lib/plugin-api.js.es6#L11 but I can’t seem to figure it out. U guys got any clues as to how I could do this?

Update: I’m pretty sure I could use the onAppEvent() function. I just have no idea which events gets triggered when. Is there a way I could “listen” to events and log them in the console to make this easier? onAppEvent(name, fn) { let appEvents = this.container.lookup('app-events:main'); appEvents.on(name, fn); }

This should help you: [image] How do you force a script to refire on every page load in Discourse? Development I think you can use the PluginAPI onPageChange function to do what you are looking for. See: Using the JS API Here’s an example function: api.onPageChange(() =>{ randBackground(); }); function randBackground() { $('body').css('background-color', '#'+(Math.random()*0xFFFFFF Update: If you are looking to apply similar changes to post bodies, see post #26 below.

The thing is, I can’t use onPageChange because the actual post gets loaded in the DOM AFTER the onPageChange takes places. I can’t use on AjaxComplete because there are wayyyy too many ajax request being made unrelated to what I’m trying to do. The closest thing to what I’m trying to do is /** * Used for decorating the `cooked` content of a post after it is rendered using * jQuery. * * `callback` will be called when it is time to decorate with a jQuery selector. * * Use `options.onlyStream` if you only want to decorate posts within a topic, * and not in other places like the user stream. * * For example, to add a yellow background to all posts you could do this: * * ``` * api.decorateCooked($elem => $elem.css({ backgroundColor: 'yellow' })); * ``` **/ decorateCooked(callback, opts) { opts = opts || {}; addDecorator(callback); if (!opts.onlyStream) { decorate(ComposerEditor, 'previewRefreshed', callback); decorate(this.container.factoryFor('component:user-stream').class, 'didInsertElement', callback); } } But I can only affect what’s INSIDE the user’s post. His avatar is off limits.

Did you check this theme code? https://github.com/tshenry/discourse-trust-level-avatar-flair/blob/master/common/head_tag.html

I don’t want to display the user’s trust level, I did a custom leveling system that’s partly based on action made on both wordpress AND discourse. Here’s the best workaround I’ve found so far: // I fetch my JS object containing all my members with user levels, calculated server side. $.get('https://www.latranchee.com/php/users/gamification.php', function( data ) { users = JSON.parse(data); }); // The function that will add users level next to their name function add_levels(){ $('.topic-avatar img.avatar:not(.lvl)').each(function(){ var username = $(this).attr("title"); if(window.users[username]){ $(this).after(" "+window.users[username]+" ") } $(this).addClass("lvl"); }); } // A timer that triggers the check Avatar function window.setInterval(function(){ checkForAvatar(); }, 1000); // A function that check if there's an image on the page without it's level being displayed. function checkForAvatar(){ if ( $('.topic-avatar img.avatar:not(.lvl)').length ){ add_levels(); } } Far from optimal, but I guess it will have to do.

[image] Olivier_Lambert: I don’t want to display the user’s trust level, I did a custom leveling system that’s partly based on action made on both wordpress AND discourse. That was an example of the optimal way to append a DOM element to the user avatar. You can add anything there, just change it from trust level to whatever you want.

Got it! Thanks I’ll fiddle with it!

Hey @Falco, I’ve tried the code and it is indeed much more efficient. However, I need to run a GET request first. Using your method, the script fire before the users variable get registered in the window variable. Unless you know of a quick workaround, I guess I’ll just let it be added after page load. The setInterval function is annoying but I guess it’ll have to do. I still think the onAppEvent() would be best though!

[image] Olivier_Lambert: the script fire before the users variable get registered in the window variable. This line should give you all the info you need about the user. https://github.com/tshenry/discourse-trust-level-avatar-flair/blob/master/common/head_tag.html#L7 [image] Olivier_Lambert: However, I need to run a GET request first. Are you running this extra request for every poster in a topic? If you store this info in a custom_user_field, and make put it in the public_user_custom_fields site setting they should be available there. (not sure about this, you will need to test. If they aren’t you can add those to the topic/post serializer in a plugin)

[image] Falco: Are you running this extra request for every poster in a topic? Just once when the app loads. But yeah, custom fields sounds much better. I guess I’ll need to set this variable server side right? I add it once in the admin pannel, then store the data on user login through php or something?

Trigger a jquery function on post load

Development

fefrei (Felix Freiberger) April 11, 2018, 3:43pm 3

This should help you:

Topic		Replies	Views
How do you force a script to refire on every page load in Discourse? Development	38	21611	March 12, 2020
Executing js after DOM loaded Product Support	6	3835	November 30, 2018
How do we fire scripts after topic HTML is rendered in DOM? Development	4	2756	November 27, 2021
Javascript in theme component only runs once? Product Support	7	2010	January 10, 2019
How to fire on every footer load (or page load?) Development	7	2209	August 3, 2024

Trigger a jquery function on post load

Related topics