Hi there, I’ve got a javascript snippet that I’m supposed to put before the closing body tag. It works, but just as described on this very old topic, it only seems to run on first page load. Because it is supposed to scan the contents of posts and create tooltips and links for certain phrases, it needs to run each time new content is loaded. Because of the huge combination of potential strings (any Bible passage reference) to be linked, it is impossible to use a solution such as the Auto-Linkify Words plugin. Apparently this sort of thing is possible to pull off in a theme component, as linkify does, but in my case the snippet just loads the actual javascript file from an external server and tells it to run. Anybody have any idea how I can get this working on content loaded via ajax? Here’s the javascript snippet: var refTagger = { settings: { bibleVersion: "NASB", socialSharing: [] } }; (function(d, t) { var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.src = "//api.reftagger.com/v2/RefTagger.js"; s.parentNode.insertBefore(g, s); }(document, "script"));

Looks like refTagger requires a variable to be set on the window object before the script is loaded, which isn’t possible by using multiple script tags (any inline scripts are extracted and executed at the end). This method works - using our loadScript function: window.refTagger = { settings: { bibleVersion: "NASB", socialSharing: [] } }; let loadScript = require('discourse/lib/load-script').default; api.decorateCooked($elem => { loadScript("//api.reftagger.com/v2/RefTagger.js").then(()=>{ window.refTagger.tag($elem[0]); }) }); [28]

Thanks. That got me on the right track. However, in looking at How do you force a script to refire on every page load in Discourse? - #26 by vinothkannans, and the code of the linkify component, I believe I need to use the api.decorateCooked rather than api.onPageChange. Does that sound right? Problem is, I can’t figure out how to use either one. I was able to get it “working” without the API, but like the above mentioned issue, it fires 3 times on page load. Here’s the code that works: var refTagger = { settings: { bibleVersion: "NASB", socialSharing: [] } }; (function(d, t) { var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.src = "//api.reftagger.com/v2/RefTagger.js"; s.parentNode.insertBefore(g, s); }(document, "script")); $(document).ajaxComplete(function() { refTagger.tag(); }); If I replace the ajaxComplete section with the following, there’s an error in the console: “ReferenceError: Can’t find variable: api”. api.decorateCooked($elem => { refTagger.tag(); }); If I change the opening script tag as follows, the error changes to "“refTagger.tag is not a function. (In ‘refTagger.tag()’, ‘refTagger.tag’ is undefined)” I don’t know javascript, so I’m just lost now. I’d like to do this the “proper” way if anybody can help me fix it. Thanks much. By the way, it’s also possible apparently to run refTagger on specific content (rather than the whole page, I guess). This is some example code I found: var o_c = document.getElementById('comment'); o_c.innerHTML = "See [Romans 1:10](http://biblia.com/bible/esv/Rom%201.10) for details"; refTagger.tag(o_c); Not sure if it would be possible to just do something like the following, which is similar to what linkify does. If so, it seems like this would be most efficient: api.decorateCooked($elem => { refTagger($elem[0]); }); Anyway, as I said, if anybody can help, I’d be grateful.

To use the api you will need to put the code inside a discourse-plugin block. (It’s still javascript, just with a sprinkling of Discourse added on top). So something like: api.decorateCooked($elem => { refTagger.tag($elem[0]); });

I think you missed it, I already tried that exact code. It then tells me “refTagger.tag is not a function. (In ‘refTagger.tag($elem[0])’, ‘refTagger.tag’ is undefined)” I feel like I’m just missing something basic about how to declare or call these scripts.

That means the script isn’t available. This isn’t really a Discourse question, but: api.decorateCooked($elem => { refTagger.tag($elem[0]); }); should work.

Thanks! It would have taken me a while to figure that out, not knowing javascript, much less the intricacies of Discourse. :slight_smile: It’s working like a charm. I appreciate all the help you guys give.

Javascript in theme component only runs once?

Product Support

Falco (Falco) January 10, 2019, 4:11pm 2

Use the page tracker API to call the necessary function on page change. Here an example:

https://github.com/discourse/discourse-matomo-analytics/blob/master/common/head_tag.html

Topic		Replies	Views
Difficulties in correctly adding external JavaScript Product Support	3	3056	November 5, 2019
How do you force a script to refire on every page load in Discourse? Development	38	21612	March 12, 2020
My plugin codes runs just once!(My own script shouldn't be cached) Development	17	2560	November 21, 2016
How to re-execute scripts in theme components Development	5	965	May 24, 2021
Trigger a jquery function on post load Development	11	3672	April 11, 2018

Javascript in theme component only runs once?

Related topics