Event Listeners for footer loaded

Dev
1

Hi! I was looking through old forum posts looking for a way to listen for page loads, specifically the footer but found possible outdated or deprecated solutions. The problem I am facing is that there is no current way of embedding javascript into the footer and need to be able to target some items within the footer which is why I thought of trying to listen for some type of event that is fired after the footer is loaded.

Is the footer unloaded and then reloaded on every content refresh or is it always there after the initial load?

The solution I found involved tapping into the Discourse.View.reopen({…}) method. Is there something similar in Discourse in it’s current iteration?

2

It might be easier to suggest a solution if you tell us exactly what you want to do.

3

@eviltrout
We have a Hubspot mailing list form in the footer that requires external javascript files hosted on Hubspot to work. There are two problems:

  1. The footer component is removed and injected every time a user loads new content. The script would load on page load if placing it within the /body admin section but then lose it if new content is pushed and,
  2. I can’t target anything within the footer component because it is injected last.

I tried placing the whole footer including the script within the /body admin section, which worked, but then I get the unwanted visual problem of the footer jumping to the top of the page every time new content comes in.

If I could run my scripts through a listener for when the footer is unloaded/loaded, I could probably keep the form in a temporary place while the footer reloads.

4

It’s always a little cumbersome to remove and add scripts repeatedly. Does their API allow you to say the page has refreshed? With sites like Discourse you’re really going to want to use a Javascript API that works on Ajax friendly sites like ours.

Also, “footer” is a bit misleading here as we have infinite scrolling. Users might never see it on long topics!

3 Likes
5

All we get from hubspot is an embeddable form. There are not many options available but the one that might help me is one option that allows me to target any div within the page to embed the form. The problem is I can’t target this div because the footer isn’t even there by the time the script is called. I’m guessing the answer is, no, there are no event listeners.

6

You can do anything in Discourse that you can in a regular page - it’s just a question of setting it up and tearing it down properly. It seems like a more advanced kind of plugin will be required for this, as it will involve creating a component and respecting didInsertElement/willDestroyElement.

If you’re looking for something similar our ad plugin works on a similar principle.

2 Likes
7

I had a similar requirement to know when the footer is rendered in JS.

I built live stats on my footer by putting together a few concepts:

  • Add an event listener on document scroll to detect if a div in the footer exists, and record that we’ve seen it in a variable.
  • Use Discourse.Route.reopen({ activate: function() { this._super(); … to invalidate the variable when new things load
  • Cache my stats so I don’t keep refetching it

If I’m happy with this solution I’ll come back and post it.