--
-- Table structure for table `topphpframework`
--
CREATE TABLE `topphpframework` (
`id` int(11) NOT NULL,
`name` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Dumping data for table `topphpframework`
--
INSERT INTO `topphpframework` (`id`, `name`) VALUES
(1, 'Laravel'),
(2, 'Codeigniter 2'),
(3, 'Symfony'),
(4, 'Yii framework '),
(5, 'Zend framework'),
(6, 'Cake php');
#app.py
from flask import Flask, render_template, request, jsonify
from flask_mysqldb import MySQL,MySQLdb #pip install flask-mysqldb https://github.com/alexferl/flask-mysqldb
app = Flask(__name__)
app.secret_key = "caircocoders-ednalan"
app.config['MYSQL_HOST'] = 'localhost'
app.config['MYSQL_USER'] = 'root'
app.config['MYSQL_PASSWORD'] = ''
app.config['MYSQL_DB'] = 'testingdb'
app.config['MYSQL_CURSORCLASS'] = 'DictCursor'
mysql = MySQL(app)
@app.route('/')
def index():
cursor = mysql.connection.cursor()
cur = mysql.connection.cursor(MySQLdb.cursors.DictCursor)
cur.execute("SELECT * FROM topphpframework ORDER BY id ASC")
topphpframework = cur.fetchall()
return render_template('index.html', topphpframework=topphpframework)
@app.route("/ajax",methods=["POST","GET"])
def ajax():
cur = mysql.connection.cursor(MySQLdb.cursors.DictCursor)
if request.method == 'POST':
getid = request.form['id']
getname = request.form['name']
print(getid)
cur.execute("UPDATE topphpframework SET name = %s WHERE id = %s ", [getname, getid])
mysql.connection.commit()
cur.close()
return jsonify('Record updated successfully')
if __name__ == "__main__":
app.run(debug=True)
templates/index.html
//templates/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Python Flask Table Edit using jquery ajax andd mysql Database</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<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>
<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>Python Flask Table Edit using jquery ajax and mysql 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>PHP 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.name}}</span>
<input type="text" name="name" value="{{row.name}}" class="editbox" id="first_input_{{row.id}}" />
</td>
</tr>
{% endfor %}
</table>
</div>
</body>
</html>
