Forums

Deploying a web app with a dynamic text update (no refresh)

Hi All

I've been trying out PythonAnywhere and found the tutorials especially helpful as someone with only limited HTML experience.

I would like to design a page that takes in input text and outputs a text underneath it, without the page refreshing, something like https://talktotransformer.com but without the incemental word addition.

I've heard I should consider AJAX, but I wanted to get the community's opinion on the most facile way forward for a non-web dev.

Thank you in advance.

AJAX is an option. For something simple, it may be the easiest, too. You could try JQuery, which makes some of the things you'd need to do for an AJAX page a little easier. For more complicated actions, there are a huge number of Javascript libraries available, but they tend to be a lot more complicated to set up than something like JQuery.

Thank you for the reply. I've setup similiar to the layout specified in the tutorial https://blog.pythonanywhere.com/121/

As it suits my needs. Essentially I'd like to refresh the textview when we click the submit button with text entered into the input-form.

I noticed that in the example, the changes made are permanent for all visitors to the page (hence password protection). I assume this is due to the way it is extracting information, and won't be a problem with AJAX/Jquery pages?

Moreover, suppose I wanted to extract the text and do something to it with a python function, before rendering it on some textview using Jquery. https://blog.pythonanywhere.com/169/

This tutorial illustrates how to do simple addition, which is similiar in concept. How would I make the requests dynamic however, especially as I want to populate a pre-existing textview?

The permanence that you're talking about is because the tutorial web app writes to the database when someone enters something and then reads from the database to show the new page. The same would be true if you're using AJAX/JQuery - that behaviour is determined by the code on the server. If your code does not persist anything, then there will be no persistence.

If you want to make the requests dynamic, you would need a view that returned some sort of response containing the new data you want to display. Then you'd need so javascript that was triggered by the button press that would make a request to the view and take the data that was returned and update the textview. JQuery provides functions that would perform each of those actions.

So I've tried to follow a simple tutorial on JQuery for dynamic text extraction and updating https://pythonprogramming.net/jquery-flask-tutorial/

I noticed that they don't have any POST or GET methods, is that normal?

However, my model does not do anything when I click the submit button. I cannot identify the discrepancy - any input would be appreciated!

https://gist.github.com/EXJUSTICE/da6776adc54fe1b14b695653cfc368ae https://gist.github.com/EXJUSTICE/7dea7b519b1e8e34805d127ad47dd2f1

EDIT: FIXED, forgot to import jsonify!

They are using getJSON, which makes a request to an endpoint and expects a JSON response.

Glad you found a fix!

EDIT: Nevermind!