0

I have a simple flask app with many forms. The first form will be showed, when the user answer the question and click at the 'Next' button, the next form will be showed... until the last form.

I want show one form by time, but I want stay on the same page. By now, after click at the button 'Next', the page is reload.

The project: https://github.com/kallylopes/Oneblood

1 Answers1

1

Note: I am not trying to answer your question directly.

Flask is a backend serverlet

Here are the only things in flask related to this question.

# Render a new template OR Redirect an url
return render_template(...)
return redirect(url_for(...))

# process request.
query_string = request.xxx

but I want stay on the same page. By now, after click at the button 'Next', the page is reload

Your purpose could be done by pure-javascript(done by one request) or Ajax(partial reload).

Current flow

1. Fill questions & Click next
2. Send request to flask
3. Serverlet process data and Reload/Redirect next page
4. Loop 1~3

Expected flow (sending all data in one request)

1. Fill questions & Click next
2. Hide current questions & Show next questions
3. Loop 1~2 until finish all question
4. Click finish then send request to flask
5. Serverlet process data

# the key point is 2, I will describe below.

How to hide or show questions?

There are lots way to do this, jquery is a common solution. Or you can try any other front-end framework, angularJS/reactJS/vueJS/etc. Of course, pure javascript can do this too.

Some example: How To Show And Hide Input Fields Based On Radio Button Selection

How to load new questions?

Load all question at the beginning, storing them by js, and processing them by js.(which should shows/hides)

If you want to store single page, you can use hash tag. Here is another exmaple: How do I link to part of a page? (hash?).

The other one is using Ajax, storing questions by js, but processing them by flask(like pagination).

http://someurl/question/1 // <--flask return page1 questions for ajax get
# after click next
http://someurl/question/2 // <--flask return page2 questions for ajax get

Which one is better?

It depends. Processing by flask will consume server resource. Processing by javascript will consume client resource.

Community
  • 1
  • 1
Kir Chou
  • 2,980
  • 1
  • 36
  • 48