Javascript ReferenceError

Anvil Q&A
1

I have played around with the quilljs library, but failed to initialize the javascript part in the anvil environment.

Running the minimalistic example produce just error: ReferenceError: Can’t find variable: Quill

https://anvil.works/build#clone:AXEHD6GZQPS3CFQG=IWSIKXLHPXNMXYDLZAA2W42U

As a standalone, html-only document works without errors. Did I miss something or just a bug?

BTW: Quill is open source and allow commercial use…

2

Timing.
You’re calling things before they’re ready (I think).

I’ve got it working here - let me tidy it up …

3

Ok :

https://anvil.works/build#clone:YXNF4Q3OOONOT7JU=R3GWZKZRPXQNXCDJINES4DPW

What’s happening is that the Quill app is taking a little bit of time to load. So Anvil forms are “ready” but the browser isn’t.

To prove the point, I have moved loading the form onto a link on the main form, and I have wrapped the Quill initialisation in a function (in the custom JS).

I have a timer on the editor form that, after 2 seconds, calls the function to initialise Quill. That time could be reduced, I’m sure, and there may be other ways to do this.

But it works at least :slight_smile:

2 Likes
4

Great example @david.wylie.

If you want it to initialise as soon as Quill loads, you could handle the NameError that it raises when the library hasn’t yet loaded:

    try:
      self.call_js('doit')
      self.timer_1.interval = 0
    except NameError:
      pass

Then set the Timer’s interval to, say, 0.01 (ok, you have to wait 10ms).

https://anvil.works/ide#clone:KD44UJ7YDGWHF5B4=J2PAWLTDPQFS2ZM25YJMET7V

1 Like
5

Thank you guys! Works as expected. I ask myself whether could be a better way to use something like “document.onreadystatechange”? Maybe something like: “readystate” as part of the form_show() function?

Could be a way to avoid timing problems… anyhow, thank you for your help.

6

I ask myself whether could be a better way to use something like “document.onreadystatechange”?

We’re working on improving this! But in the meantime, there’s a workaround, as described in this post: