Integrating anvil's datables with custom html and calling the javascript from python code

Anvil Q&A
1

What I’m trying to do:
Basically I have a set of divs defined in my html/ css which when selected need to update the data tables in anvil, I want to use my custom styles thus I completely prefer to use my html and css.
What I’ve tried and what’s not working:
The anvil api_js is somehow not working everytime, I have tried linking using native libraries and everything.

Code Sample:

            anvil.server.call('update_selected_projects', selectedProjects).then(function(response) {
                alert("Projects submitted successfully!");```

Clone link:
share a copy of your app

2

Do you have any links for documentation or code examples you’re following?

If I had to guess, it looks like the code is from an AI code generator that’s hallucinating. The javascript you’ve written isn’t valid anvil functions in JavaScript, and _/api.js isn’t a valid url for a native libraries script tag.

To hook up your elements to your python code, you might find this documentation helpful

1 Like
3

If my workflow looks like this what approach do you suggest:

  1. Fetch current state of the data from the data table as a vector
  2. Pass it to the html js function so that it renders the divs according to present states.
  3. User selects some divs which causes some data items to be changed
  4. A python function pushes these changes back to the data tables.
    Note that at no point I want to use anvil components the whole point of this workflow is that I want to utilize my existing html and CSS UI frames to render a data table beautifully rather than the mvp style of anvil.
4

There are a couple of ways to do this, but it sounds like your favoured approach is leaning towards ideas from these docs.

This should allow you to call between JavaScript functions and Python methods on your html form.

If you’re more comfortable with JavaScript this might be the better approach.

If you get stuck following the docs let us know what’s not working and we can help from there.

2 Likes