1

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?

Chris Schankula
  • 303
  • 1
  • 6
  • Welcome to Stack Overflow. Please edit the question to include a [*"Minimal, Reproducible, Example."*](https://stackoverflow.com/help/minimal-reproducible-example). Also, Please edit the question to include any necessary source code, data, and error messages as text. Consider [these reasons and guidelines](https://meta.stackoverflow.com/a/285557). – bad_coder Jan 27 '22 at 23:01
  • 1
    @bad_coder This question is for IHP - a full stack Haskell framework. The question is pretty clear if you know IHP. :) – Varun Rajput Jan 28 '22 at 00:48
  • 2
    @VarunRajput that stack trace should be transcribed as text, although a screenshot is sometimes nice to have it can't be indexed by search engines making the question not discoverable. – bad_coder Jan 28 '22 at 01:38
  • 2
    Can you share the scripts section of your Layout.hs? Maybe the Dygraph JS file is not included before the app spefici JS is initalized. – Marc Scholten Jan 28 '22 at 06:23
  • Ah yep, that was it. For some reason I had placed the script and stylesheet imports in the view itself, not in the layout. Oops. Thank you for your help! @bad_coder please let me know what I need to do to get this question reactivated so I can write a self-answer to it :) – Chris Schankula Jan 28 '22 at 18:23

0 Answers0