Display Popups Data on Mouse Hover Using Jquery Ajax and Python Flask PostgreSQL Database

Learn how to display popups data on mouse hover using Jquery Ajax and Python Flask PostgreSQL database.

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you’re building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.

Subscribe: https://www.youtube.com/c/Cairocoders/featured

Source Code

app.py


#app.py
from flask import Flask, render_template, request, jsonify
import psycopg2 #pip install psycopg2 
import psycopg2.extras
 
app = Flask(__name__)
 
app.secret_key = "caircocoders-ednalan"
 
DB_HOST = "localhost"
DB_NAME = "sampledb"
DB_USER = "postgres"
DB_PASS = "admin"
     
conn = psycopg2.connect(dbname=DB_NAME, user=DB_USER, password=DB_PASS, host=DB_HOST) 
   
@app.route('/')
def index(): 
    cur = conn.cursor(cursor_factory=psycopg2.extras.DictCursor)
    cur.execute("SELECT * FROM employee ORDER BY id ASC")
    employeelist = cur.fetchall()
    return render_template('index.html', employeelist=employeelist)
  
@app.route("/fetchdata",methods=["POST","GET"])
def fetchdata():
    cur = conn.cursor(cursor_factory=psycopg2.extras.DictCursor)
    if request.method == 'POST':
        id = request.form['id']
        cur.execute("SELECT * FROM employee WHERE id = %s", [id])
        rs = cur.fetchone() 
        name = rs['name']
        photo = rs['photo']
        position = rs['position']
        office = rs['office']
        print(photo)
    return jsonify({'htmlresponse': render_template('response.html', name=name, photo=photo, position=position, office=office)})
 
if __name__ == "__main__":
    app.run(debug=True)

templates/index.html


//templates/index.html
<!DOCTYPE html>
<html>
<head>
<title>Display Popups data on mouse hover using Jquery Ajax and Python Flask PostgreSQL database </title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>  
<div class="container">
   <br />
   <h3 align="center">Display Popups data on mouse hover using Jquery Ajax and Python Flask PostgreSQL database </a></h3><br />
   <br />
   <div class="row">
    <div class="col-md-12">
        <div class="panel-body">
            <div class="table-responsive">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th width="60">Photo</th>
                            <th>Name</th>
                            <th>Position</th>
                            <th>Office</th>
                            <th>Age</th>
                            <th>Salary</th>
                        </tr>
                        </thead> 
                        {% for row in employeelist %}
                            <tr>
                                <td><a href="#" id="{{row.id}}" title=" "><img src="/static/images/{{row.photo}}" height="50" width="50"/></a></td>
                                <td>{{row.name}}</td>
                                <td>{{row.position}}</td>
                                <td>{{row.office}}</td>
                                <td>{{row.age}}</td>
                                <td>{{row.salary}}</td>
                            </tr>
                        {% endfor %} 
                </table>
            </div>
      </div>
     </div>
    </div>
  </div>
<script>  
$(document).ready(function(){ 
    $('a').tooltip({
        classes:{
            "ui-tooltip":"highlight"
        },
        position:{ my:'left center', at:'right+50 center'},
        content:function(result){
            $.post('/fetchdata', {
                id:$(this).attr('id')
            }, function(data){
                result(data.htmlresponse);
                  
            });
        }
    });
});  
</script>
</body>  
</html>

templates/response.html


//templates/response.html
<p align="center"><img src="/static/images/{{photo}}" class="img-thumbnail" /></p>
<p>Name : {{ name }}</p>
<p>Position : {{ position }}</p>
<p>Office : {{ office }}</p>

#python #jquery #flask #postgresql