Dropdown Navigation

Anvil Q&A
7

I can’t see any way to wire it into the rest of the code to handle the events.

Yeah, that’s also a blogpost that got stuck behind “responding to half of the Internet on Hacker News”. :wink: We’ve soft-launched a Javascript FFI (Foreign Function Interface) that lets you call from Python to JS and back again.

We’ll publish that blog post soon, but in the meantime you can check out this app, which is heavily commented to show what’s going on: Anvil | Login

You’ll need a paid account to edit the JS/HTML source, so here it is copied and pasted:

    <!-- Demo of calling from Python to Javascript and back -->
    
    <div id="from-js" style="border: 2px solid #d00; padding: 10px; text-align: center; cursor: pointer">
      Click here to call from Javascript to Python
    </div>
    <div id="from-python" style="border: 2px solid #00d; padding: 10px; text-align: center;">
      <!-- This will be filled with text from a Python call -->
    </div>
    <script>
      $('#from-js').on("click", function() {
        // The first parameter to anvil.call() is any DOM node inside this HTML form.
        // This identifies the correct Form instance.
        // The second parameter is a method name.
        // The rest of the parameters are passed on to the Python method.
        
        // anvil.call() returns a Promise that resolves/rejects when the Python code finishes executing.
        anvil.call($('#from-js'), "call_from_js", 42);
      });
      
      function say_hello(name) {
        // When you call a Javascript function with call_js(), 'this' is set to the
        // jQuery-wrapped DOM node representing this HTML form.
        // Other parameters are translated as normal.
        
        this.find(".card").css("background", "pink")
        
        $('#from-python').text("Hello, " + name + "!");
      }
    </script>

    <!-- End demo -->
4 Likes