Trouble calling javascript function during app initialization

It seems that self.call_js is not available from the __init __ method on my main form, so I am not able to execute a function when the form initializes. (Does anyone know why this is?)

So I tried to call the method from javascript:

$(function() {
    $(document).ready(function() { anvil.call(this, 'load_helpers'); });
})

And load_helpers is never executed.

Hi Ruben,

You can’t call JS from the __init__ method because because the Javascript is first loaded onto the page when the form is shown. Try doing your call_js() from the form’s show event instead.

As for the trouble with anvil.call(), that’s new to me! I’ll try to replicate it myself, and take a look now…

I’ve noticed that the call works when calling it form a function that is assigned to a click event:

$(function() {
  $('form').click(function() { anvil.call(this, 'submit_clicked', formData); });
}) 

However, it will not work for me if its just called by itself:

anvil.call(this, 'submit_clicked', formData);

When / where is the form_show event executed?

However, it will not work for me if its just called by itself:

anvil.call(this, 'submit_clicked', formData);

Ah, yes - That’s because Anvil doesn’t know which Form instance you’re talking about!

anvil.call() calls a method on the Python object representing your form. But you can have multiple forms, or multiple instances of the same form, visible on your page at once. How does it know which one to call?

The answer is the first parameter to anvil.call(). The first parameter must be a DOM node inside a form (eg a <div> inside your custom HTML). Anvil looks at all the parents of that DOM node, until it finds a form instance. Then it knows which Python object to call the method on!

In your first example (the one that works), you make a jQuery click handler. In a jQuery click handler, this is the DOM element that got clicked on. The element that got clicked on is inside your form, so anvil.call(this, ...) works perfectly!

However, in your second example, you’re calling anvil.call() on its own. For that line of code, “this” is something totally irrelevant like the Window object. Anvil can’t tell which form to invoke, so the call never happens.

(PS: I’ve added a TODO item to improve our error reporting when this happens.)

When / where is the form_show event executed?

Open a form in the designer, and scroll to the bottom of the Properties window. That will show you the available events for the selected component. (If you’ve just opened the form and not clicked anything else, or if you click on the background, the selected component is the form itself). Click the blue arrow next to the show event to run some code when that event fires.

The show event on any component fires when the component is added to the webpage.

Is call_js() the way to call custom Javascript from within Anvil? Having trouble finding documentation on how to do straight up Javascript. Is it possible?

Hi Chris - yes it is. I have an example in the forum here :

1 Like

(edit) - oo, you deleted your question :slight_smile:

Instead of using “this” as your first parameter, put a DIV somewhere on your form with a unique id, for example :

<div id="myformidentifier"></div>

Then use this in the first parameter :

anvil.call($('#myformidentifier'), "click_node", txt);
3 Likes