Quick Javascript help needed

Anvil Q&A
1

Hi all, I’m quite new to programming.
Would really appreciate your help.

What I’m trying to do:
Get a simple Javascript code to run.
It’s a product tour package that highlights elements called driver.js - Installation - Driver.js
I’m trying to highlight a simple button.
I keep getting a “TypeError: ‘proxyobject’ object is not callable” when I try to call existing methods of this package.

What I’ve tried and what’s not working:
I’ve tried importing in multiple ways and followed the quickstart example of Quill.

  1. I added the script to “Native Libraries”
  2. I imported it using the ‘anvil.js.window import driver’
  3. Then trying to call the ‘highlight’ method but I keep getting error ““TypeError: ‘proxyobject’ object is not callable””

Code Sample:

from ._anvil_designer import Form1Template
from anvil import *
from anvil.js.window import Quill
from anvil.js.window import driver
import anvil.js

class Form1(Form1Template):
  def __init__(self, **properties):
    self.init_components(**properties)

    button = anvil.js.get_dom_node(self.start_here_button)
    self.driver = driver.highlight({
      'element': button,
      'popover': {
        title: "Title",
        description: "Description"
      }
    });

Clone link:

2

Hi @tim.lawrance and welcome to the forum,

A few things here.
First the documentation for your library shows how to use the library from cdn

Installation - Driver.js

(see the first page at the bottom Notes on CDN)

Next - the library requires elements to be on the screen
So best to move that code to the show event
you’ll need to wrap title and description in quotes from your code snippet

Here’s an updated clone link with a working example

3 Likes
3

@stucork Thank you very much!
Generally speaking - is it a better approach to use the npm (npm install driver.js) or use the CDN script?

4

For anvil imo it’s more straightforward to work with a cdn if available.
Npm will require you to work locally, navigate the mine field of JavaScript build tools, get frustrated and then need to go outside.
The best CDNs will just work.
CDN providers often take advantage of browser cache and have servers distributed globally to reduce response time.
Another approach, depending on the library, is to stick the JavaScript in your theme assets and replace the script tag src with the local "_/theme/<file-name>".

2 Likes