Custom HTML Javascript Function not found at runtime

Anvil Q&A
1

I want to print a page, so I searched the forums and followed the proposed solution:

  1. the calling form triggers an event, when the “print button” is clicked, like:
def lnk_print_starpvda_click(self, **event_args):
  """This method is called when the link is clicked"""
  self.cst_starpvda_print_1.raise_event('x-stampa_starpvda')
  1. the same form uses a custom component, cst_starpvda_print in my case
  2. in the custom component cst_starpvda_print, the x-stampa_starpvda event is managed:
self.set_event_handler('x-stampa_starpvda', lambda **e: self.call_js('printStarpvda',self.starpvda,self.session))
  1. the custom component is made up simply of an empty, custom HTML component, where I define the Javascript function printStarpvda that will render the HTML page and open the browser print window:
<script>
    function printStarpvda(starpvda,sessione){
    var printWindow = window.open('_blank');
    var is_chrome = Boolean(printWindow.chrome);
    printWindow.document.open('text/html');
    printWindow.document.write('<body>');
    printWindow.document.write('<img textaling="center" align="center" src=""></img>');
    // some cool html rendering here
    printWindow.document.write('</body>');
    printWindow.document.close();
    if (is_chrome) {
        printWindow.onload = function() { // wait until all resources loaded 
            printWindow.focus(); // necessary for IE >= 10
            printWindow.print();  // change window to mywindow
            printWindow.close(); // change window to mywindow
        };
    }
    else {
        printWindow.document.close(); // necessary for IE >= 10
        printWindow.focus(); // necessary for IE >= 10
        printWindow.print();
        printWindow.close();
    }
  }
</script>

Everything worked fine up to now. But the rendered HTML was too simple.
I improved the function and now, when I click the “print” link on the calling page, I get the error:

Cannot find the JavaScript function printStarpvda

But there it is, I can see it if I inspect the running app with F12…

How is that?

Thanks

2

This usually happens if you try to call_js() a Javascript function before the component that defines that function is added to the page. (Usually this is because you’re trying to call something from an __init__ function of a form, which runs before the form is added to the page.)

This is just my guess – I’d need to see more of your code to be sure. If you post a clone link we can tell for sure. But if my guess is right, then you can fix this issue by triggering the call_js() from the form’s show event, instead of from the __init__ method.

3

Hi Meredydd and thanks a lot for the quick reply.
I’m going to check my code for your suggestions.
BTW I already shared a clone of the App in this other thread.
The code is there, but now the problem described in that post will prevent you to reach the point where the Javascript breaks. Too bad.
I’ll check back with a working example as soon as I can.

Thanks and BR

Edit
As I mentioned in my post, the strange thing is that it broke while I was just working inside the javascript code of the function.
Nothing changed in the call-tree.
A few lines of JS code earlier it was working (and in my currently published App it is working, but the print is too simplified), a few lines of JS code later, the caller can’t find the function anymore? Very strange.

A few

4

Just for the sake of completion, working inside the function’s JavaScript I actually made a syntax mistake, as Shaun pointed out in the other post I mentioned.
Fixing that syntax mistake, the function came back to work as it was expected.

Thanks guys for your help.

1 Like