0

For example, if I have the following code in index.html:

<div id='1'></div>
<div id='2'></div>
<div id='3'></div>

And, I have the following code in Python:

 from flask import *
 @app.route("/")
 def index():
     return render_template("index.html")

 @app.route('/experts')
 def route1():
     return render_template("experts.html", data=data)

So, among the three div blocks. When I click on any one of them. I want the program to know which one I click on, and pass the value of id (1,2,3) into the data variable in python so that I can use it on "expert.html".

What are some good ways I can achieve it? Thank you in advanced!

1 Answers1

0

Instead of divs, you can use buttons. That way, ajax can be utilized in the front end to retrieve the id of the button clicked and pass it to the backend:

"index.html":

<html>
 <body>
  <button id='1'>Button1</button>
  <button id='2'>Button2</button>
  <button id='3'>Button3</button>
</body>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
   $(document).ready(function() {
     $('button').click(function(event) {
       var the_id = event.target.id;
        $.ajax({
         url: "/get_id",
         type: "get",
         data: {the_id: the_id},
         success: function(response) {
           window.location.replace('/experts');
        },
        error: function(xhr) {
         //Do Something to handle error
        }
       });           
   });
 </script>
</html>

Then, a route to receive the id can be created, the results from the ajax can be stored in flask.session, and a "success" object can be passed back to the ajax in the index.html template. From the jquery in the template, the app can be redirected to /expert:

import flask
app = flask.Flask(__name__)
app.secret_key = 'SOME_SECRET_KEY'
@app.route('/get_id')
def expert():
  button_id = flask.request.args.get('the_id')
  flask.session['button_id'] = button_id
  return flask.jsonify({'success':True})

@app.route('/experts', methods=['GET'])
def experts():
  return render_template("experts.html", data=flask.session['button_id'])
Ajax1234
  • 69,937
  • 8
  • 61
  • 102
  • Is there something that I need to import on the python ? –  Jun 26 '18 at 00:34
  • @ronnLee Nothing except `flask`. – Ajax1234 Jun 26 '18 at 00:34
  • Why do we store the result in "flask.session" and call "flask.jsonify"? –  Jun 26 '18 at 01:46
  • @ronnLee The result needs to be stored in `flask.session` so that the value can be persisted across the full duration of the user's time on the site (the session). `flask.jsonify` returns an object whose attributes can be accessed by the javascript. – Ajax1234 Jun 26 '18 at 01:52
  • Thanks again. Is there any restriction on how and what value we give to the secret key? I also tried to declare the secret key inside the function, but it did not work. Why does it have to be outside of the function? –  Jun 27 '18 at 17:51
  • @ronnLee This link provides a great explanation of secret keys in `flask`:https://stackoverflow.com/questions/22463939/demystify-flask-app-secret-key. Regarding the declaration of the secret key, in Python, functions have scoping rules. Names assigned values inside a function/class's body are not accessible outside the scope of the function (the body of the function). When calling `app.route`, the interpreter searches for a variable `app` accessible in the current scope of the program, and in this example, it is the global scope. – Ajax1234 Jun 27 '18 at 17:55
  • I do know about the global and local scope of variables in python. However, if I declare the app.secretkey inside the expert() function, it will still crash in flask.session['button_id'] = button_id even though they're both inside a same function. Is that because flask.session is global, so the app.secretkey must also be global? –  Jun 27 '18 at 21:27
  • @ronnLee Yes, that is the case. My understanding is that `secretkey` must be bound to `app` before routes are added. `app.secret_key' must be placed before the routes are declared, after the import statements. Please see my recent edit. – Ajax1234 Jun 27 '18 at 21:31