How to call brython/python from javascript?

Question

I am trying to call brython function from javascript promise it giving error ReferenceError: brythonListener is not defined how to solve this?

python/brython code

<script type="text/python">
def execute(*args):
    print(str(args))
window.brythonListener=execute
</script>

javascript code

            function(data){
                console.log(data) //till here code works
                brythonListener(data)
            }
        )

what i am missing here?

Answer 1

Reason for the issue ReferenceError: brythonListener is not defined is brythonListener was created after brython was loaded to solve this just reload brython when the js script calling python script

Brython script

<script type="text/python">
from browser import window

def execute(*args):
    print(str(args))

window.brythonListener = execute
</script>

Js Script which will call brython function

<Script onload="brython()">
function(data){
  console.log(data)
  brythonListener(data)
})
</script>

Answer 2

I have programmed an add-on that enables you to do this after analyzing and looking at the code and the basic working method of Brython.....

<script>
runconsole_scripts = $B.parser._run_scripts
function check_all_old_brython()
{
    $("script[type='text/python']").attr("type","text/python/old")

};

function add_new_script(text)
{
    $(function () {
        $('<script>')
          .attr('type', 'text/python')
          .text(text)
          .appendTo('body');
      });
};

function remove_all_new_brython_scripts()
{
    $("script[type='text/python']").remove()
};

function uncheck_all_old_brython()
{
    $("script[type='text/python/old']").attr("type","text/python")
};

function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }

async function run_exec(code, options)
{
    check_all_old_brython();
    add_new_script(code);
    $B.parse_options(options);
    if (!($B.isWebWorker || $B.isNode)) {
        //_run_scripts(options)
        await sleep(1)
        runconsole_scripts(options);
        await sleep(1)
    };
    
    remove_all_new_brython_scripts();
    uncheck_all_old_brython();
};
</script>

You have to put the code right after calling the library ....

<script src="assets/js/brython.min.js?h=d56c14be45278a1455b1f545237583fc"></script>
<script src="assets/js/brython_stdlib.js?h=e1293c1c0a36696318d3804d6240f20d"></script>
<script>
runconsole_scripts = $B.parser._run_scripts
function check_all_old_brython()
{
    $("script[type='text/python']").attr("type","text/python/old")

};

function add_new_script(text)
{
    $(function () {
        $('<script>')
          .attr('type', 'text/python')
          .text(text)
          .appendTo('body');
      });
};

function remove_all_new_brython_scripts()
{
    $("script[type='text/python']").remove()
};

function uncheck_all_old_brython()
{
    $("script[type='text/python/old']").attr("type","text/python")
};

function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }

async function run_exec(code, options)
{
    check_all_old_brython();
    add_new_script(code);
    $B.parse_options(options);
    if (!($B.isWebWorker || $B.isNode)) {
        //_run_scripts(options)
        await sleep(1)
        runconsole_scripts(options);
        await sleep(1)
    };
    
    remove_all_new_brython_scripts();
    uncheck_all_old_brython();
};
</script>

or after body tag....

I recommend that you put the code in a file and name it "brython_call_from_console.js"