Insert View Data Through Bootstrap Modal using Python Flask and Jquery Ajax MysqlDB
--
-- Table structure for table `tbl_employee`
--
CREATE TABLE `tbl_employee` (
`id` int(11) NOT NULL,
`name` varchar(50) NOT NULL,
`address` text NOT NULL,
`gender` varchar(10) NOT NULL,
`designation` varchar(100) NOT NULL,
`age` int(11) NOT NULL,
`image` varchar(100) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
--
-- Dumping data for table `tbl_employee`
--
INSERT INTO `tbl_employee` (`id`, `name`, `address`, `gender`, `designation`, `age`, `image`) VALUES
(214, 'Ashton Cox', 'San Francisco', 'Male', 'Junior Technical Author', 46, ''),
(213, 'Angelica Ramos', 'London', 'Male', 'Chief Executive Officer (CEO)', 45, ''),
(212, 'Airi Satou', 'Tokyo', 'Male', 'Accountant', 78, '');
app.py
#app.py
from flask import Flask, render_template, request, redirect, flash, jsonify, json
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 main():
cursor = mysql.connection.cursor()
cur = mysql.connection.cursor(MySQLdb.cursors.DictCursor)
result = cur.execute("SELECT * FROM tbl_employee ORDER BY id")
employee = cur.fetchall()
return render_template('index.html', employee=employee)
@app.route('/insert', methods=['GET', 'POST'])
def insert():
cursor = mysql.connection.cursor()
cur = mysql.connection.cursor(MySQLdb.cursors.DictCursor)
if request.method == 'POST':
name = request.form['name']
address = request.form['address']
gender = request.form['gender']
designation = request.form['designation']
age = request.form['age']
cur.execute("INSERT INTO tbl_employee (name, address, gender, designation, age) VALUES (%s, %s, %s, %s, %s)",[name, address, gender, designation, age])
mysql.connection.commit()
cur.close()
return jsonify('success')
@app.route('/select', methods=['GET', 'POST'])
def select():
cursor = mysql.connection.cursor()
cur = mysql.connection.cursor(MySQLdb.cursors.DictCursor)
if request.method == 'POST':
employee_id = request.form['employee_id']
print(employee_id)
result = cur.execute("SELECT * FROM tbl_employee WHERE id = %s", [employee_id])
rsemployee = cur.fetchall()
employeearray = []
for rs in rsemployee:
employee_dict = {
'Id': rs['id'],
'emp_name': rs['name'],
'address': rs['address'],
'gender': rs['gender'],
'designation': rs['designation'],
'age': rs['age']}
employeearray.append(employee_dict)
return json.dumps(employeearray)
if __name__ == '__main__':
app.run(debug=True)
templates/index.html
//templates/index.html
<!DOCTYPE html>
<html>
<head>
<title>Insert View Data Through Bootstrap Modal using Python Flask and Jquery Ajax MysqlDB</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<br /><br />
<div class="container" style="width:700px;">
<h3 align="center">Insert View Data Through Bootstrap Modal using Python Flask and Jquery Ajax MysqlDB</h3>
<br />
<div class="table-responsive">
<div align="right">
<button type="button" name="age" id="age" data-toggle="modal" data-target="#add_data_Modal" class="btn btn-warning">Add</button>
</div>
<br />
<div id="employee_table">
<table class="table table-bordered">
<tr>
<th width="70%">Employee Name</th>
<th width="30%">View</th>
</tr>
{% for row in employee %}
<tr>
<td>{{row.name}}</td>
<td><input type="button" name="view" value="view" id="{{row.id}}" class="btn btn-info btn-xs view_data" /></td>
</tr>
{% endfor %}
</table>
</div>
</div>
</div>
<div id="add_data_Modal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Insert View Data Through Bootstrap Modal using Jquery Ajax and python flask Mysql</h4>
</div>
<div class="modal-body">
<form method="post" id="insert_form">
<label>Enter Employee Name</label>
<input type="text" name="name" id="name" class="form-control" />
<br />
<label>Enter Employee Address</label>
<textarea name="address" id="address" class="form-control"></textarea>
<br />
<label>Select Gender</label>
<select name="gender" id="gender" class="form-control">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
<br />
<label>Enter Designation</label>
<input type="text" name="designation" id="designation" class="form-control" />
<br />
<label>Enter Age</label>
<input type="text" name="age" id="age" class="form-control" />
<br />
<input type="submit" name="insert" id="insert" value="Insert" class="btn btn-success" />
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="dataModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Employee Details</h4>
</div>
<div class="modal-body">
<div class="table-responsive">
<table class="table table-bordered">
<tr>
<td width="30%"><label>Name</label></td>
<td width="70%"><input type="text" class="form-control" id="view_name"></td>
</tr>
<tr>
<td width="30%"><label>Address</label></td>
<td width="70%"><input type="text" class="form-control" id="view_address"></td>
</tr>
<tr>
<td width="30%"><label>Gender</label></td>
<td width="70%"><input type="text" class="form-control" id="view_gender"></td>
</tr>
<tr>
<td width="30%"><label>Designation</label></td>
<td width="70%"><input type="text" class="form-control" id="view_designation"></td>
</tr>
<tr>
<td width="30%"><label>Age</label></td>
<td width="70%"><input type="text" class="form-control" id="view_age"></td>
</tr>
</table></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('#insert_form').on("submit", function(event){
event.preventDefault();
if($('#name').val() == "")
{
alert("Name is required");
}
else if($('#address').val() == '')
{
alert("Address is required");
}
else if($('#designation').val() == '')
{
alert("Designation is required");
}
else
{
$.ajax({
url:"/insert",
method:"POST",
data:$('#insert_form').serialize(),
beforeSend:function(){
$('#insert').val("Inserting");
},
success:function(data){
$('#add_data_Modal').modal('hide');
if (data=='success') {
window.location.href = "/";
}
}
});
}
});
$(document).on('click', '.view_data', function(){
var employee_id = $(this).attr("id");
$.ajax({
url:"/select",
method:"POST",
data:{employee_id:employee_id},
success:function(data){
$('#dataModal').modal('show');
var data_rs = JSON.parse(data);
$('#view_name').val(data_rs[0]['emp_name']);
$('#view_address').val(data_rs[0]['address']);
$('#view_gender').val(data_rs[0]['gender']);
$('#view_designation').val(data_rs[0]['designation']);
$('#view_age').val(data_rs[0]['age']);
}
});
});
});
</script>
</body>
</html>
VIDEO
