How can I call a python function from the jinja template after rendering the template?

Question

Actually, I have several RTSP feed links from the database. I want to show them in my UI after selecting any camera. But the problem is, the feed is generated from the app.py file using open-cv and a fixed URL. But after fetching api with my camera id, I got a new RTSP URL, but cannot set it in the Python file dynamically. Though I set it but that feed generating function already called and generated feed for the previous URL, not for the new one.

Here is app.py functionality: my app.py file is here

Calling from HTML: calling from html Sending URL from javaScript to app.py:

after fetching API, the new URL is send to app.py

Answer 1

Define a URL(route) that runs your script.
In your JavaScript code, make an HTTP request to the URL defined in Step 1.

It's so simple, I wrote codes for you with an example (you did not post your codes) and I hope it help you :

In this example, when user click on a button in index.html , a request send to flask app and it will execute a function.

I also made a gist at github

You can ask me any question you have about this subject.

main.py

from flask import Flask, render_template
from flask import request
import pdfkit


## ## ## ## ## ## ## ## ## ## ## ## 
app = Flask(__name__)


## ## ## ## ## ## ## ## ## ## ## ## 
# config wkhtmltopdf on my system
path_wkhtmltopdf = r'C:\Program Files\wkhtmltopdf\bin\wkhtmltopdf.exe'
config = pdfkit.configuration(wkhtmltopdf=path_wkhtmltopdf)


# function that we want to execute
def render_pdf(htmlstr):
    pdfkit.from_string(htmlstr, './static/sample.pdf', configuration=config) 


## ## ## ## ## ## ## ## ## ## ## ## 
@app.route('/')
def index():
    return render_template('index.html')


# route that will execute when button clicked on index.html
@app.route('/update-file/', methods=['POST'])
def convert_string_to_pdf():
    try:
        # geting the json request
        json = request.get_json()
        
        # call render_pdf function with new value
        render_pdf(json['htmlstr'])
        
        # '0' meaning no error
        return '0'

    except Exception as error:
        return str(error)


## ## ## ## ## ## ## ## ## ## ## ## 
if __name__ == "__main__":
    app.run(debug=True)

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Convert HTML to PDF</title>
</head>
<body>

    <p class="test">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, beatae!
        <span contenteditable="true" class="badge alert-info name" data-placeholder="Enter your name" data-focused-advice="Start typing"></span><i class="fa fa-lg fa-plus-circle"></i>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis, laboriosam?
    </p>

    <br><br>
    <button onclick="commandServerToRender()">Convert to PDF</button>

    
    <br><br>
    <div id="downloadBox" hidden>
        <p style="color: green;"><b>File is ready to download</b></p>
        <a href="/static/sample.pdf" download="my_file">Download PDF File</a>
    </div>

    <div id="errorBox" hidden>
        <p style="color:red"><b>There was an error:</b></p>
        <p id="errorMessage" style="color:red"></p>
    </div>


    <script>
        function commandServerToRender() {
            test = document.getElementsByClassName("test")[0].innerHTML;
            downloadBox = document.getElementById('downloadBox');
            errorBox = document.getElementById('errorBox');
            errorMessage = document.getElementById('errorMessage');

            downloadBox.hidden = true;
            errorBox.hidden = true;

            // Sending data in JSON format using POST method
            //
            var xhr = new XMLHttpRequest();
            var url = "/update-file/";

            xhr.open("POST", url, true);
            xhr.setRequestHeader("Content-Type", "application/json");

            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    // if print 0 meaning that it was successfull
                    if (xhr.responseText == '0') {
                        downloadBox.hidden = false;

                    } else {
                        errorMessage.innerHTML = xhr.responseText;
                        errorBox.hidden = false;

                    }
                }
            };

            var data = JSON.stringify({"htmlstr": test});
            xhr.send(data);
        }
    </script>
</body>
</html>

How can I call a python function from the jinja template after rendering the template?

Question

1 answers

solution1
0 2021-07-11 14:20:39

How can I call a python function from the jinja template after rendering the template?

Question

1 answers

solution1 0 2021-07-11 14:20:39

solution1
0 2021-07-11 14:20:39