--
-- Table structure for table `skills`
--
CREATE TABLE `skills` (
`id` int(11) NOT NULL,
`skillname` varchar(150) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Dumping data for table `skills`
--
INSERT INTO `skills` (`id`, `skillname`) VALUES
(2, 'Python Flask'),
(3, 'Laravel'),
(4, 'Python Django'),
(5, 'Angular'),
(6, 'PHP'),
(7, 'Codeigniter'),
(8, 'Python TKinter'),
(9, 'JQuery'),
(10, 'Javascript'),
(11, 'CakePHP'),
(12, 'Mysql'),
(13, 'MongoDB'),
(14, 'Java'),
(15, 'Android Studio'),
(16, 'Bootstrap'),
(17, 'Java Swing'),
(18, 'NodeJS'),
(19, 'NodeJS Express');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `skills`
--
ALTER TABLE `skills`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `skills`
--
ALTER TABLE `skills`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=20;
--
-- Table structure for table `user`
--
CREATE TABLE `user` (
`id` int(11) NOT NULL,
`fullname` varchar(150) NOT NULL,
`skills` varchar(150) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Dumping data for table `user`
--
INSERT INTO `user` (`id`, `fullname`, `skills`) VALUES
(1, 'Michael00000', 'Holz0000'),
(2, 'Paula', 'Wilson'),
(3, 'Antonio11111', 'Moreno11111'),
(4, 'cairocoders', 'NodeJS, NodeJS Express, CakePHP, Python Django');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `user`
--
ALTER TABLE `user`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `user`
--
ALTER TABLE `user`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=1;
JqueryUI Autocomplete : https://jqueryui.com/autocomplete/
Bootstrap Tokenfield : https://sliptree.github.io/bootstrap-tokenfield/
#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 skills ORDER BY id desc")
skills = cur.fetchall()
return render_template('index.html', skills=skills)
@app.route("/ajax_add",methods=["POST","GET"])
def ajax_add():
cursor = mysql.connection.cursor()
cur = mysql.connection.cursor(MySQLdb.cursors.DictCursor)
if request.method == 'POST':
name = request.form['name']
skill = request.form['skill']
print(name)
print(skill)
cur.execute("INSERT INTO user (fullname,skills) VALUES (%s,%s)",[name,skill])
mysql.connection.commit()
cur.close()
msg = 'New record created successfully'
return jsonify(msg)
if __name__ == "__main__":
app.run(debug=True)
templates/index.html
//templates/index.html
<!DOCTYPE html>
<html>
<head>
<title>Python Flask Insert Bootstrap Tokenfield Tag Data using Jquery Ajax and Mysql 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" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/bootstrap-tokenfield.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/bootstrap-tokenfield.js"></script>
</head>
<body>
<br />
<div class="container">
<div class="row">
<h2 align="center">Python Flask Insert Bootstrap Tokenfield Tag Data using Jquery Ajax and Mysql database</h2>
<br />
<div class="col-md-6" style="margin:0 auto; float:none;">
<span id="success_message"></span>
<form method="post" id="reg_form">
<div class="form-group">
<label>Enter Name</label>
<input type="text" name="name" id="name" class="form-control" />
</div>
<div class="form-group">
<label>Enter your Skill</label>
<input type="text" name="skill" id="skill" class="form-control" />
</div>
<div class="form-group">
<input type="submit" name="submit" id="submit" class="btn btn-info" value="Submit" />
</div>
</form>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('#skill').tokenfield({
autocomplete:{
source: [{% for row in skills %} '{{row.skillname}}', {% endfor %}],
delay:100
},
showAutocompleteOnFocus: true
});
$('#reg_form').on('submit', function(event){
event.preventDefault();
if($.trim($('#name').val()).length == 0) {
alert("Please Enter Your Name");
return false;
}else if($.trim($('#skill').val()).length == 0) {
alert("Please Enter Atleast one Skill");
return false;
}else{
var form_data = $(this).serialize();
$('#submit').attr("disabled","disabled");
$.ajax({
url:"/ajax_add",
method:"POST",
data:form_data,
beforeSend:function(){
$('#submit').val('Submitting...');
},
success:function(data){
if(data != '') {
$('#name').val('');
$('#skill').tokenfield('setTokens',[]);
$('#success_message').html(data);
$('#submit').attr("disabled", false);
$('#submit').val('Submit');
}
}
});
setInterval(function(){
$('#success_message').html('');
}, 5000);
}
});
});
</script>
</body>
</html>
