Forums

Another guy at work has been learning Javascript, and it's looking like he's able to have his webapp do lots of stuff on-click instead of a full-on submission / post request.

All of my Flask code is set up to run one button at a time to reload the whole page. I'd love to be able to click and only reload part of the page, while the rest of the page updates immediately as some fields change.

Is this possible with Flask/Django, or am I trying to step outside the bounds of python's magic?

It's worth noting that my actual job has kept me insanely busy and real follow-up isn't likely to happen very soon, but I'd like to have the right answers for my annoying (and innovative) coworker whom I'm trying to convert.

This is possible with Ajax (a JavaScript feature allowing web requests to be made to the website without page reloading). You could set up something like this on the server side:

@app.route('/reload-thing/<name>')
def reload_thing(name):
    # run some code here to get the content that will be loaded on part of the webpage
    return flask.jsonify(content=content)

This makes a JSON response whose content field is set to some content. I suck at JS, so I don’t know exactly what you have to do on the JS to use Ajax

@dull is right -- you essentially need to do stuff in JavaScript that works by talking to specific URLs on your website that are designed to be accessed that way rather than by people submitting forms and so on.

To take an example you can look at -- on the "Consoles" page inside PythonAnywhere, at the bottom of the page, there is a section where you can look at the processes that are running. When you first look at it, there's a button that says "Fetch process list". If you click it, the page does not reload -- instead, after a brief pause, the bottom of the page changes to show a list of running processes. The list has a "refresh" button at the top; if you click that, again, the page does not reload, but the list is refreshed in-place. And each process has a "kill" button, which will kill the process in question, once more without loading the page.

The way that this all works -- to take the initial "Fetch process list" click as an example -- is that there is some JavaScript code that is executed when the button is clicked. This code makes an AJAX request to a URL on our site that is designed to be accessed from JavaScript, and returns the list of running processes in JSON format. The JS code receives that response, and uses it to modify the page in-place. The other buttons work similarly.

The specific libraries that we are using to do all that is the React JavaScript framework to handle all of the in-place changes to the web page from JavaScript, the Fetch API to make the Ajax requests, and Django Rest Framework to allow us to write Django code that provides an API that JavaScript can easily interact with.

But you don't need all of that if you just want to experiment; a good set of tool to start with is jQuery to do in-place modifications of the web page and also to provide a nice way to make AJAX requests. For the server side, @dull's suggestion of using flask.jsonify is a good one when you're using Flask -- it's a simple way of converting the data that you want to send back to your JS code into a format that it can easily interpret.

Apologies for the delayed follow-up, my bandwidth isn't as high as I would like for it to be.

To make sure I understand--I would build and save a JS file to be hosted here, and use Django (or Ajax?) instead of Flask? I've got some Python down and I can more or less work Flask, but I don't know JS or Django or Ajax at all. Where do I need to start if I'm looking to get a small-scale model working to learn the concept?

Yes to the build and save a JS file, but if you're comfortable with Flask, just use Flask for the server-side part. Ajax is just the method of using JS to communicate with a server. For learning the Javascript part, try checking out some of the links that giles posted.