Reload page body when clicking a link in a custom header

Product Support

AI-generated summary

Reload page body when clicking a link in a custom header

Canapin wants to reload the forum body when clicking on a custom header link, similar to clicking on the logo in the regular Discourse header bar. Johani clarifies that the goal is to take the user to the homepage within the app.

Johani suggests setting the href of the link to /, but Canapin reports that this doesn’t work. Johani provides a script to force the link to load within the app. However, Canapin reports that the script doesn’t work.

Johani shares a working example on theme creator, and Canapin eventually gets the script to work, thanking Johani for their help. The solution involves adding a script to the link with the class home-link to force it to load within the app.

1

Hi.
Like many people, I’ve set up a custom header on top on my Discourse forum:

image
image420×231 8.33 KB

I wanted my top menu identical to my Wordpress site (I use WP-Discourse), this is why I kept the “Forum” menu item.

I would like this link to reload the forum body when clicked on, exactly when we click on the logo from the regular discourse header bar.

How can I achieve this?

2

Do you mean reload as in cause the whole page to reload - reload the entire app - or do you just want the link to take you to the homepage within the app?

3

This :slightly_smiling_face:

4

Try setting the href of the link to "/" Like so:

<a href="/">FORUM</a>

5

Hi, I already tried that as well as adding data-auto-route="true" with no success.

6

Try something like this:

<a href="/" class="home-link">FORUM</a>

<script type="text/discourse-plugin" version="0.8.20">
$(function() {
  $("a.home-link").click(function() {
    require("discourse/lib/url").default.routeTo(
      $(event.currentTarget).attr("href")
    );
    return false;
  });
});
</script>

Where you give your link the classname home-link and run a tiny script when it’s clicked to force it to load within the app.

7

Hi, thanks for your reply.
It doesn’t work, and here’s the output code on the page source:

<script>Discourse._registerPluginCode('0.8.20', function (api) {

  $(function () {
    $("a.home-link").click(function () {
      console.log("test");
      require("discourse/lib/url").default.routeTo($(event.currentTarget).attr("href"));
      return false;
    });
  });
});</script>
8

I’m not sure what’s going on on your side, but I’m positive that that would work. Here’s a basic live example on theme creator:

https://theme-creator.discourse.org/theme/Johani/forum-link

9

Hi, I’ not sure what I did before but it is indeed working. Thank you very much!