CODEWITHSUNDEEP
pythonhtmlflask
user9724045
user9724045

Reputation:

In Flask, how can I redirect to a profile being clicked?

I am very new to Flask. I have a mysql database and a template. Let's say I have 3 images

 <a href="#"><div><img src= pathOfImage id="profile1"/></div></a>
 <a href="#"><div><img src= pathOfImage id="profile2"/></div></a>
 <a href="#"><div><img src= pathOfImage id="profile3"/></div></a>

The id of each image (profile1,profile2,profile3) is the primary key of the some tables in the database. What I want to do is to find the values of the corresponding attributes of that tuple by using the primary key. Then, load that those values to the template from the tuples.

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)

The snippet of HTML code I gave above is in expert.html. I almost of SQL query that was not listed above, data on the second parameter in render_template in route1() is the SQL tuple, which generate all these images and the ID.

I have tried to put a button next to the images, and give id to the button instead. Then, pass the id to the python script as a variable using Ajax, and get the SQL tuple.

However, this isn't the hard part. The hard part is making the new route and loading the content. I have tried make a new route using "app.route" and pass the data into the second parameter of render_template. But, it didn't redirect to a new profile, and the method was called before I even click on the profile.

previously, I used button to retrieve the id:

 <html>
  <body>
    <a href="{{ url_for('route2') }}"> <button id='1'>Button1</button></a>
    <a href="{{ url_for('route2') }}"><button id='2'>Button2</button></a>
    <a href="{{ url_for('route2') }}"><button id='3'>Button3</button></a>
  </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) {

      },
       error: function(xhr) {

    }
   });           
})});
</script>

and, I used these to generate a new template:

 import flask
 from flask import *
 from flaskext.mysql import MySQL

 @app.route("/")
 def index():
    return render_template("index.html")

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

 @app.route('/get_id')
 @app.route('/profile')
 def route2():
      button_id '"' + flask.request.args.get('the_id') + '"'
      //some code here to get the tuples that I need "client_info" and 
      //"skill_info" variable below
      return render_template("profile.html", client_info=client_info, 
      skill_info=skill_info)

Hope someone would give a fresh start. Thanks in advance!

Upvotes: 2

Views: 1057

Answers (2)

Tushar Sakhadeo
Tushar Sakhadeo

Reputation: 26

Instead of passing info by ajax you can pass it through the route url.

experts.html

<a href="{{ url_for('route2') }}/profile1"><div><img src="pathOfImage"></div></a>
<a href="{{ url_for('route2') }}/profile2"><div><img src="pathOfImage"></div></a>
<a href="{{ url_for('route2') }}/profile3"><div><img src="pathOfImage"></div></a>

flask routes

import flask
from flask import *
from flaskext.mysql import MySQL

@app.route("/")
def index():
    return render_template("index.html")

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

@app.route('/profile/<id>')
def route2(id):
    # id variable contains user profile id string as per user click
    # depending on id set variables client_info and skill_info and render
    return render_template("profile.html", client_info=client_info, skill_info=skill_info)

Upvotes: 0

Joran Beasley
Joran Beasley

Reputation: 113930

{% for profile in profiles %}
<a href="/profile?the_profile={{ profile.id }}"><img src="{{profile.img}}"></a>
{% endfor %}

...I guess? maybe?

Upvotes: 0

Related Questions