CODEWITHSUNDEEP
ihp
Chris Schankula
Chris Schankula

Reputation: 347

IHP - Morphdom interfering with other JavaScript (e.g. DyGraph)

I am using IHP and IHP's use of Morphdom and / or Turbolinks seems to interfere with some other JavaScript things when the page isn't a fresh load. This includes things like Elm apps, and in this example, Dygraph:

Uncaught ReferenceError: Dygraph is not defined
    at HTMLDivElement.<anonymous> (<anonymous>:51:33)
    at Function.each (jquery-3.6.0.slim.min.js:2:3209)
    at E.fn.init.each (jquery-3.6.0.slim.min.js:2:1687)
    at HTMLDocument.initCharts (<anonymous>:40:25)
    at HTMLDocument.dispatch (jquery-3.6.0.slim.min.js:2:42842)
    at HTMLDocument.v.handle (jquery-3.6.0.slim.min.js:2:40826)
    at Object.e.dispatch (turbolinks.js:5:1411)
    at r.notifyApplicationAfterPageLoad (turbolinks.js:6:1175)
    at r.visitCompleted (turbolinks.js:6:1800)
    at r.complete (turbolinks.js:5:24022)

In this case I am setting up a graph using Dygraph and using the following to try to initiate it upon the Turbolinks loading in:

$(document).on('ready turbolinks:load', initCharts);

which I thought would fix this because it would call the function only when Turbolinks had loaded the page. But this doesn't seem to have helped.

Essentially it seems like the Dygraph js is not loaded before it is called later in the page. This only seems to happen when we come from another page using Morphdom. The temporary fix is to refresh the page when the graphs won't load, but this is definitely not a great long-term solution.

How can I properly load in new JS files in IHP without Morphdom getting in the way? How might we fix such things?

Upvotes: 1

Views: 105

Answers (0)

Related Questions