Is there a way to force an embedded javascript element to refresh on a page?

This loom video reproduces what I’m encountering but I’ll explain it here as well:

Basically I’m using Discourse on our site as a way to have comments embedded on different types of pages and then using this feature of Discourse to embed those. In our Problem Library I recently made it so you can traverse different problems by clicking related upstream/downstream problems.

This has the effect of trigger a workflow which navigates to /problem-details sending that problem’s data. It’s technically the same page but loading data from a completely different problem. Unfortunately the issue is it doesn’t reload the javascript that’s pulling in the comments related to that new problem.

I’ve played with adding a “on page load” workflow that hides/shows that Discourse js element and that didn’t work. I also tried in the workflow that navigates to the new page to issue a “refresh page” directive after that action but the navigate action has to be last in line apparently.

Any workaround ideas for how to get the comment section to update when it switches problems? I’m a bit stumped here. Thanks.

If I understand correctly, discourse is an API Service, correct? And what you do is an API call to fetch X amounts of comments. I’m guessing there’s situations where you want to reload those comments, correct? And the issue is, that they are not updating.

If this is the case, it’s because bubble caches the first API response and when you perform the second API call again, it doesn’t update it. In my opinion this is a bug, but it’s been this way for a long time and from what I remember Bubble doesn’t have any short term plans on fixing this behaviour.

However, there’s something you can do to solve this issue. All you have to do is add a new URL parameter to your API call and make sure it’s not private. The parameter, you can call it date, will look like this “?date=<date>” if it’s the first parameter or “&date=<date>” if it’s a subsequent parameter.

What you’ll need to do is make sure you pass “Current date/time” (preferably formated as ISO) in the date parameter. This will trick bubble into not using the cached response and instead re-fetching the data.

Hope this helps!

1 Like

Thanks @jonah.deleseleuc for writing this up. Sorry if it wasn’t clear but it’s not an API call, it’s an embedded JavaScript on the page that’s using Discourse’s embedded comment feature to basically pull a topic dynamically based on unique URL.

I think the crux of the issue is that because it’s navigating to a new page (which is actually just the same page but loading data for a different problem) it’s not reloading the URL and therefore the js isn’t passing the slug of the new problem. So it ends up retaining the comments for the first problem visited and rolling that indefinitely through whatever problems you traverse through by following those links. That loom vid I posted reproduces the issue.

If anyone can think of a way to force that js element to redraw or, second best, just reload the page each time you navigate to a new problem, I think that would do it. The issue is you can’t stack the “refresh page” action after a “navigate to” action in the workflow builder so I don’t know how to accomplish this. Maybe there’s something with custom states and doing a refresh on the “page loaded” trigger each time unless it’s been done once already… will play with that next.

Just to close the loop on how I solved this: I confirm that the above idea worked in terms of tracking a custom state that knows whether the page needs to be reloaded. So I did this:

I made a custom state called “NeedsReload” on the page in question defaulted to “No”:
Screenshot 2023-10-08 at 6.36.16 PM

Then in the link that navigates to the same page, before navigating I set that custom state to NeedsReload = “yes.”

Lastly I have a “On page load” trigger which checks for this custom state and when it = yes, it refreshes the page then sets that state = No.

I can confirm that this technique solved it and comments are loading correctly now on all pages. HTH