Help me to append html code on Hamburger Section

[Praba_Praba (Praba Coder)]

Dear all,

I hope all Good…

This is my code… please have a look

<script>
        $.getJSON("https://forum.example.com/directory_items.json?order=likes_received&period=monthly", function(data, status) {

            var base_url = window.location.origin;
        z0 = base_url + data.directory_items[0].user.avatar_template.replace("{size}", "24");
        z1 = base_url + data.directory_items[1].user.avatar_template.replace("{size}", "24");
        z2 = base_url + data.directory_items[2].user.avatar_template.replace("{size}", "24");
        z3 = base_url + data.directory_items[3].user.avatar_template.replace("{size}", "24");
        z4 = base_url + data.directory_items[4].user.avatar_template.replace("{size}", "24");
        z5 = base_url + data.directory_items[5].user.avatar_template.replace("{size}", "24");
        leader_body = '<h1>Leader Board</h1><br><img class="learder_rounded" src="' + z0 + '"><b>' + data.directory_items[0].user.username + '</b><br><img class="learder_rounded" src="' + z1 + '"><b>' + data.directory_items[1].user.username + '</b><br><img class="learder_rounded" src="' + z2 + '"><b>' + data.directory_items[2].user.username + '</b><br><img class="learder_rounded" src="' + z3 + '"><b>' + data.directory_items[3].user.username + '</b><br><img class="learder_rounded" src="' + z4 + '"><b>' + data.directory_items[4].user.username + '</b><br><img class="learder_rounded" src="' + z5 + '"><b>' + data.directory_items[5].user.username + '</b>';
        console.log(leader_body);
        $(".menu-container-footer-links").append(leader_body);

    });
    </script>

I want to append my html code (Leader Board) on Hamburger Section.

But this code is not working properly.

See the Image, Above code shows this result on Hamburger only when i opened hamburger section and reload… After closed and open the hamburger it’s not showing … please help me to fix this. I’m noob to discourse… Generally Programming Noob

Thanks in Advance .

[Bcat]

I think you need to learn about handlebars connectors and api.onPageChange

<script type="text/x-handlebars" data-template-name="/connectors/abc/xyz">
    {{mount-widget widget = "xyz"}}
</script>

api.onPageChange ((url, title) => {
});

The easy way is to look through a topic template.

decorateWidget

A tour of how the Widget (Virtual DOM) code in Discourse works

I was trying: api.decorateWidget("hamburger-menu:generalLinks", _ => { return [ { route: 'birthdays', label: 'birthdays.title' }, {route: 'another', label: 'another.title' } ]; });

https://github.com/hnb-ku/discourse-custom-hamburger-links/blob/master/common/header.html

Beginner's guide to developing Discourse Themes

So, you want to create Discourse themes? Not sure where to start? Or maybe you have created Discourse themes before, but want to learn how to do even more cool things. Well, you’ve come to the right place Developer’s guide to Discourse Themes Subjects include a general overview of Discourse themes, creating and sharing Discourse themes, theme development examples, searching for and finding information / examples in the Discourse repository, and best practices. Prerequisites: …

Plugin outlet locations theme component

Continuing the discussion from Plugin Outlet Locations: I needed an updated version with all the plugin outlets that have been added recently and then I realised that it would be really easy to create a theme component for this, so there is no need to install a plugin any more. Repository: GitHub - communiteq/plugin-outlets-theme-component The repository includes a script (gen/generate.rb) that will auto-generate the outlets based on the Discourse source code. To toggle the plugin outlets, c…

[Praba_Praba (Praba Coder)]

Bcat Thanks Dear … Surely i will learn all you mentioned and post solution here.