Using querySelector inside a Module

Anvil Q&A
1

Hi,

I am trying to use document.querySelector from inside a module instead of a Form, to programmatically change a CSS element of a particular form.

I import:

from anvil.js.window import document

and in my Module code I make the call:

element = document.querySelect('.demo')
element.style.backgroundColor = 'red'

However I get:

AttributeError: 'NoneType' object has no attribute 'style'

I guess the reason is because the Module does not have this attribute, as it does not have a style sheet. How can I reference the particular form I want with this call?

2

You could pass the form into the function in the module.

3

Ahh great, that works :slight_smile:
For anyone wondering how I did it:

In my Form I call the Module’s function and pass self like:

Module1.changeElement(self)

then in Module1 I have:

def changeElement(form):
   myForm = anvil.js.get_dom_node(form)
   element = document.querySelector('.demo')
   element.style.backgroundColor = 'red'

But…

What if I want to pass a different form than the one I am calling the function from? I can’t pass self.

From a different form’s button_1_click function I tried:

Module1.changeElement('Form3')

but I get

TypeError: get_dom_node expected an anvil Component or DOM node, (got module)

I should also clarify that I imported the other Form first above, like:

from .. import Form3
4

You’re getting into more complicated areas now. The basic answer is the same, you need to pass a reference to the form to the function. But just importing the other form doesn’t give you a reference to the instance of the form that may or may not be open.

This is tied into the way navigation in your app works (are you using Anvil Extras hash routing? are you manually opening forms using open_form? what is Form3 compared to Form2, and when is each opened?) and isn’t an easy question to answer without more context.

5

I am using the simple open_form method to navigate between pages at the moment. Based on conditions, I will use open_form(Form2) or some other Form to navigate between them.

So in my case I guess I have given a reference to a form which has not yet been opened, and for which no instance has been created yet.

6

Honestly, at this point you should look into using a global client side module for keeping state that you want all forms to be able to access. Each form when it shows will adjust its look and feel based on the values in that global module. That’ll be less complicated all around.

7

I am using a global client side module, but I was thinking it would be cleaner to do it the other way around… instead of the Form calling the Module and checking some value (in my case, checking whether a particular CSS property should be backgroundcolor = red), I thought it might be better to make a function in the Module that changes a CSS property when called. Then, once that form is opened, the CSS property would already be changed.

But I did not take into account that an instance of the form must first be created.

So, now I set the state in my Module based on input from my initial Form, then when each subsequent Form opens, check the Module’s variable to see whether an element exists in this (currently opened) Form that should have its property changed.

Thanks!