Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to pass JavaScript variable to function in Jinja tag

<script>
       function myFunction() {
                var name = "some_string";
                var display = "{{ python_function(name) }}";
                alert(display);
       }
</script>

Above Javascript is writen in jinja2 template. It is supposed to pass javascript variable (i.e. var name) value to python function in macro. I know above code won't solve my purpose as I am not passing javascript variable value correctly to macro. Does anybody have method on passing javascript variable to macro in jinja2 template?

like image 641
Rohanil Avatar asked Sep 04 '15 05:09

Rohanil


People also ask

Can you use Jinja with JavaScript?

Jinja is one of the most used template engines for Python. This project is a JavaScript implementation with emphasis on simplicity and performance, compiling templates into readable JavaScript that minifies well.

Can you use functions in Jinja?

What might be worth knowing is the fact that you can pass a Python function into your Jinja templates. Doing this can greatly improve the readability of your template as well as allow you to handle more complicated scenario's.

Is Jinja2 dynamic?

Jinja supports dynamic inheritance and does not distinguish between parent and child template as long as no extends tag is visited.


1 Answers

You cannot pass values from javascript to the template that way because the template is going to be rendered before the response goes back to the browser for the javascript engine to evaluate. The only way the template renderer would be able to resolve the value of name specified in the javascript code would be to interpret the string embedded in <script></script>.

Update. Let's look at your second attempt, the one that you say has worked. You have:

<body>
    <button onclick="js_fn('{{ py_fn('some_string') }}')">Click me</button>
    <script>
        function js_fn(variable) {
            alert(variable);
        }
    </script>
</body>

Presumably this is in some partial (say _index.html). A view that has py_fn in scope, loads _index.html, evaluates the string "py_fn('some_string')", and replaces {{ py_fn('some_string') }} with the result of that evaluation. Let's say py_fn is the identity function on strings: it's a unary function that takes a string and immediately returns it. Then, the result of evaluating "py_fn('some_string')" will be the string 'some_string', which will be substituted back, obtaining the final, so-called "rendered" template:

<body>
    <button onclick="js_fn('some_string')">Click me</button>
    <script>
        function js_fn(variable) {
            alert(variable);
        }
    </script>
</body>

This string will be part of the response body of the request, so the browser will dump the button on the window, evaluate the js code inside the script block, which will create a global variable js_fn on the window, which will take something and alert it. The button, when clicked on, will call js_fn with the constant some_string, always. As you can see, there is no passing of values from JS to Python/Flask.

like image 171
Hunan Rostomyan Avatar answered Sep 30 '22 18:09

Hunan Rostomyan