article

Monday, July 5, 2021

Table Edit using jquery ajax Python Flask and PostgreSQL Database

Table Edit using jquery ajax Python Flask and PostgreSQL Database

install psycopg2 https://pypi.org/project/psycopg2/
Psycopg is the most popular PostgreSQL database adapter for the Python programming language.
(venv) PS C:\flaskmyproject> pip install psycopg2

CREATE TABLE programming (
id serial PRIMARY KEY,
title VARCHAR ( 150 ) NOT NULL
);

INSERT INTO
    programming(title)
VALUES
('Python Flask'),
('Python Django'),
('Express.js'),
('Laravel'),
('Spring'),
('Angular'),
('React'),
('Vue');
app.py
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
#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 programming ORDER BY id ASC")
    topphpframework = cur.fetchall()
    return render_template('index.html', topphpframework=topphpframework)
      
@app.route("/ajax",methods=["POST","GET"])
def ajax():
    cur = conn.cursor(cursor_factory=psycopg2.extras.DictCursor)   
    if request.method == 'POST':
        getid = request.form['id']
        getname = request.form['name']
        print(getid)
        cur.execute("UPDATE programming SET title = %s WHERE id = %s ", [getname, getid])
        conn.commit()      
        cur.close()
    return jsonify('Record updated successfully')
 
if __name__ == "__main__":
    app.run(debug=True)
templates/index.html
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
//templates/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Edit using jquery ajax Python Flask and PostgreSQL Database</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $(".edit_tr").click(function() {
    var ID=$(this).attr('id');
    $("#first_"+ID).hide();
    $("#first_input_"+ID).show();
  }).change(function(){
      var ID=$(this).attr('id');
      var first=$("#first_input_"+ID).val();
      var dataString = 'id='+ ID +'&name='+first;
      $("#first_"+ID).html('<img src="/staticf/img/loader.gif" />');
      if(first.length>0){
        $.ajax({
          type: "POST",
          url: "/ajax",
          data: dataString,
          cache: false,
          success: function(html)
          {
            $("#first_"+ID).html(first);
          }
        });
      }else{
        alert('Enter something.');
      }
  });
     
  $(".editbox").mouseup(function() {
   return false
  });
  $(document).mouseup(function() {
      $(".editbox").hide();
      $(".text").show();
  });
});
</script>
</head>
<body>
<center><p><h1>Table Edit using jquery ajax Python Flask and PostgreSQL Database</h1></p></center>
<div style="margin:0 auto; width:350px; padding:10px; background-color:#fff;">
<table width="100%" border="0">
  <tr class="head">
  <th>Frameworks</th>
  </tr>
  {% for row in topphpframework %}
      <tr id="{{row.id}}" bgcolor="#f2f2f2" class="edit_tr">
        <td width="50%" class="edit_td">
        <span id="first_{{row.id}}" class="text">{{row.title}}</span>
        <input type="text" name="name" value="{{row.title}}" class="editbox" id="first_input_{{row.id}}" />
        </td>
      </tr>
    {% endfor %}
</table>
</div>
<style>
  body
  {
  font-family:Arial, Helvetica, sans-serif;
  font-size:16px;
  }
  .head
  {
  background-color:#333;
  color:#FFFFFF
  }
  .edit_tr:hover
  {
  background:url(/static/img/edit.png) right no-repeat #80C8E5;
  cursor:pointer;
  }
  .editbox
  {
  display:none
  }
  .editbox
  {
  font-size:16px;
  width:270px;
  background-color:#ffffcc;
  border:solid 1px #000;
  padding:4px;
  }
  td
  {
  padding:10px;
  }
  th
  {
  font-weight:bold;
  text-align:left;
  padding:4px;
  }
  </style>
</body>
</html>

Posted by ednalan at 1:05 AM . Under , .

Related Post