render_template in Flask on JS click event [duplicate]

Question

I am trying to call a function in Flask by clicking a button. When the button is clicked, the following script runs.

JS

$("#load_btn").click(function() { $.get("/callback"); }

Flask

@app.route('/callback') def callback(): print('called') ... # code here that needs to run before rendering callback return render_template('callback.html')

The problem here is, called is printed, and GET /callback HTTP/1.1 200 is logged as well, but callback.html is not rendered - the page stays the same. I'm guessing this is probably not the best approach to solving this problem, but if so what is the recommended approach?

bigblind · Accepted Answer · 2017-06-20 00:05:57Z

5

$.get just sends an HTTP request to your server, but doesn't actually do anything anything with the data (in your case, the rendered template) it gets back from the server.

Try something like this:

$("#load_btn").click(function() { $("html").load("/callback"); }

Or if the template you render doesn't contain any <head> tags, only body content, you can do

$("#load_btn").click(function() { $("body").load("/callback"); }

Or, you can exchange "body" for a specific element to only replace a specific part of the page.

If you want the user to be redirected, do this:

$("#load_btn").click(function() { window.location = "/callback"; }

edited Jun 20, 2017 at 0:05

answered Jun 19, 2017 at 23:53

bigblind

12.9k14 gold badges72 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Sudeep Over a year ago

This replaces the content in the current page. I would like the user to be redirected to mysite.com/callback and have callback.html rendered for that page, if that makes sense. The reason I'm sending it back through the flask application and not loading it directly in HTML is because I need to run a function within callback.

bigblind Over a year ago

I've updated my answer

Sudeep Over a year ago

Thanks, that changes the url, but it still doesn't solve my problem. I'm looking for the redirection to happen after the code in the callback method has been executed (I've represented that by ... in my original post.).

bigblind Over a year ago

Yes, that's what's happening. When the user clicks the #load_btn element, the click handler is called, which changes the url. The browser fetches the contents of this url from the server. Then, whatever code you have in your callback function runs. Then, the template is rendered, and the response is sent to the browser

bigblind Over a year ago

HTTP is a very simple protocol based on requests and responses. So when the user goes to /callback, your callback function can send only one response. There are a couple of ways to do it, but the simplest way to do it would be to have the callback function run your long-running task in a background thread, and then immediately return the response template which contains your progress bar. That page would then need to send requests to the server (using $.get) to ask for progress. You'd create a flask route like /callback_progressthat returns this information.

|

Collectives™ on Stack Overflow

render_template in Flask on JS click event [duplicate]

1 Answer 1

7 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Linked

Related