Calling JS functions when using HashRouting

[singh]

I have a form (loaded using HashRouting) where I’ve embedded a component (custom html form).

That component has a javascript function that I want to call from Python.

1. When I tried to call the javascript from the Component’s show_form event, I keep running into
   “could not find global js function”

I’ve tried both self.call_js() and anvil.js.call_js()

2. When I moved my code to the form that embeds the component, I get the following:

AttributeError: ‘Route’ object has no attribute ‘call_js’

I have one other area where I have been able to successfully call a Javascript function on the standard_page.html template using anvil.js.call_js() function but I want to contain this piece of Javascript closer to the form, rather than moving in out to the main template.

Any advise?

[singh]

Looks like I might be running into issues similarly described in this post

When is self.call_js available?

I’ve got some interesting behaviour around using self.call_js if i put it in the form show event - it can’t find the global function If I call the python from the JS, which then calls the JS - it can’t find the global function If I put a timer on the form and wait a couple of seconds - it CAN find the global function Is there any way to reliably wait everything is initialized to call the javascript function? I’ll separate out the relevant parts of my app so it is easy to reproduce.

@phil were you also using HashRouting with this problem?

@meredydd the solutions that you posted in the above thread, have they been implement in Anvil?

Thanks

[stucork]

A clone link here would be helpful.

I can’t see that it will be because of hash routing…

the can’t find the global js function Error is typically because either the form is not yet on the screen so it’s JavaScript has not been loaded yet. (But using the form show event typically solves this)

Or

You have a syntax error in the JavaScript and so it is not accessible. It happens to me all the time when I write JavaScript in the anvil ide. If I can’t spot the error I copy the code into a code editor with JavaScript linting which normally fixes it.

---

edit: @phil’s post was before hashrouting existed.

Here is a minimal example that has a custom html component that calls a js function and uses hashrouting.
https://anvil.works/build#clone:J2AG5MJKTOUDCGMH=64WRAJFIYPVATX5ISELVMOM2

Have you tried loading just the component to see if it works on its own? Either by making it the startup form, or adding it as a component to a form that is the startup form

[singh]

Hi @stucork

I was able to take your sample project and change the location of the call to duplicate the error I’m getting.

https://anvil.works/build#clone:DN5IVM2HF4333FX3=ERYXSN67BAPJ5ZY7VTV3DYHN

To provide more context, the reason why I’m doing this is because:

1. calling self.call_js() from the Component itself throws “cant’ find global js function” error

2. I moved the call to the Form that contains the component as it controls the display (visible) of the component based on business rules. So only when visible=true on the component, does the javascript get called. However the error here is “AttributeError: ‘Route’ object has no attribute ‘call_js’”

Let me know what you think.

[stucork]

Are you sure that you’ve correctly set the components form show event? This is likely the problem with your option 1.

(edit - or a syntax error see earlier suggestion)

---

Blank panel forms don’t have a call_js method (only HTML Forms do) which is why option 2 fails. You could do self.component.call_js if you really want to call the js method of the component from within the blank panel.

[singh]

It appeared that I did have a javascript error so option 1 works for me now.

Good to know that I have to do self.component.call_js() in option 2

Thanks