I am very new to python and am starting to learn about using AJAX and Jquery. I'm going to try to formulate my problem clearly but if it's in any way unclear, please tell me so and I will try to improve it.
I have a web app which is run from the function userinterface.py, and userinterface.py should be run from the function central.py.
In central.py, there is a variable called "devicequantity", which should be assigned to a div element in the html. I tried using ajax request for this (devicequantity is a changing variable).
In my web app, there are some fields that are hidden depending on the value of devicequantity. How can I assign devicequantity to the web app and let it update whenever a new value is assigned via central.py? Thank you so much for any feedback and help!
Here are my codes:
html
<div class="col-sm-4 d-inline-flex justify-content-center align-items-center my-0">
Device quantity:
<div class="border col-sm-5 px-2 py-2 justify-content-center align-items-center" type="number" id="devicequantity" name="devicequantity"> {{ devicequantity }} </div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$.ajax({
url:"/getdevicequantity",
type: "get",
success: function(response){
$("#devicequantity").html(response.devicequantity);
}
});
$('#alertsettings').hide(); $('#alertfillfield').hide(); $("#device1").hide(); $("#device2").hide(); $("#device3").hide(); $("#device4").hide(); $("#device5").hide(); $("#device6").hide(); $("#device7").hide(); $("#device8").hide(); $("#device9").hide();$("#device10").hide(); $("#SubmitSecondPart").hide(); $("#alertquantity").show();
if ($("#devicequantity").val() == 1) {$("#alertquantity").hide(); $("#device1").show(); $("#SubmitSecondPart").show();
}
else if ($("#devicequantity").val() == 2) {$("#alertquantity").hide(); $("#device1").show(); $("#device2").show(); $("#SubmitSecondPart").show();
}
else if ($("#devicequantity").val() == 3) {$("#alertquantity").hide(); $("#device1").show(); $("#device2").show(); $("#device3").show(); $("#SubmitSecondPart").show();
}
});
</script>
</script>
userinterface.py
@app.route("/", methods=['GET', 'POST'])
def home():
if request.method == 'POST':
getInputsSettings()
getInputsLicenses()
return render_template('printerlabel.html', devicequantity=devicequantity)
@app.route("/getdevicequantity")
def getdevicequantity():
return jsonify({'devicequantity' : devicequantity})
def runuserinterface():
app.run()
if __name__ == "__main__":
app.run()
central.py
devicequantity = 10
if __name__ == "__main__":
userinterface.devicequantity=devicequantity
userinterface.runuserinterface()
