Whenever the HTML element with id '#submit_snap_button' is clicked, this jquery piece of code makes a request to your ‘snapshot’ route:
$.getJSON("http://molab-backend:5000/snapshot/" + $('#hostname').val(), function(data) {
$('#div_result_msg').html(data.message);
if (data.success === 0) {
$('#div_result').addClass('alert-danger').removeClass('alert-success')
}
else {
$('#div_result').addClass('alert-success').removeClass('alert-danger')
}
$('#div_result').show();
$('#submit_snap_button').attr("disabled", false);
$('#submit_snap_button').html('<i class="fa fa-camera"></i> Snap');
}
If the request is successful, it adds the class 'alert-danger' and removes the class 'alert-success' from the element with id '#div_result'. If the request is not successful it does the opposite.
Then it makes the element with id '#div_result' visible.
It then changes the attribute 'disabled' of the element with id '#submit_snap_button' to false, and the HTML to '<i class="fa fa-camera"></i> Snap'
Your route should return a json file to be accessed by the front end.
@app.route('/snapshot/<hostname>')
def snapshot(hostname):
return SnapshotService().snapshot(hostname)
I am working on someone else’s code. I need to debug and resolve issue. I have pretty good experience with backend but zero knowledge on front-end. I believe his code is full stack code which includes front-end and backend micro-services implemented using flask. I need to connect his front end code with backend one. backend works fine. I have already verified. However, not sure what’s wrong in his code which connects backend and reflects output in web browser. Below is his code :
#backend flask (works totally fine)-
from flask import Flask
import os, sys
from drivers.snapshot.snapshot_service import SnapshotService
from drivers.comparison.comparison_service import ComparisonService
import json
os.environ['JSNAPY_HOME'] = sys.path[0]
app = Flask(__name__)
@app.after_request
def after_request(response):
response.headers.add('Access-Control-Allow-Origin', '*')
response.headers.add('Access-Control-Allow-Headers', 'Content-Type,Authorization')
response.headers.add('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS')
return response
@app.route("/")
def hello():
return "Initiate App!"
@app.route('/snapshot/<hostname>')
def snapshot(hostname):
return SnapshotService().snapshot(hostname)
#frontend flask
from flask import Flask, render_template, redirect
app = Flask(__name__)
@app.after_request
def after_request(response):
response.headers.add('Access-Control-Allow-Origin', '*')
response.headers.add('Access-Control-Allow-Headers', 'Content-Type,Authorization')
response.headers.add('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS')
return response
@app.route('/')
def index():
return redirect('/snapshot/')
@app.route('/snapshot/')
def view_snap():
return render_template('snap.html')
{% extends 'base.html' %}
{% block content %}
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<!-- general form elements -->
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">Snapshot</h3>
</div>
<!-- /.box-header -->
<!-- form start -->
<form role="form">
<div class="box-body">
<div class="form-group">
<input type="text" class="form-control" id="hostname" value="ASBNVAEG1CW" placeholder="Hostname/IP">
</div>
<button type="submit" id="submit_snap_button" class="btn btn-primary btn-block"><i class="fa fa-camera"></i> Snap</button>
</div>
</form>
<div id="div_result" class="alert alert-success" style="display: none;">
<div id="div_result_msg" class="text-center"></div>
</div>
</div>
<!-- /.box -->
</div>
</div>
{% endblock %}
{% block page_javascript %}
<script>
$(document).ready(function() {
$('#submit_snap_button').click(function(e) {
$('#submit_snap_button').html('<i class="fa fa-refresh fa-spin"></i>');
$('#submit_snap_button').attr("disabled", true);
$('#div_result').hide();
$.getJSON("http://molab-backend:5000/snapshot/" + $('#hostname').val(), function(data) {
$('#div_result_msg').html(data.message);
if (data.success === 0) {
$('#div_result').addClass('alert-danger').removeClass('alert-success')
}
else {
$('#div_result').addClass('alert-success').removeClass('alert-danger')
}
$('#div_result').show();
$('#submit_snap_button').attr("disabled", false);
$('#submit_snap_button').html('<i class="fa fa-camera"></i> Snap');
}, function() {
}, 'json');
e.preventDefault();
});
})
</script>
{% endblock %}
