Menu
I have a Flask application which has a page where the user can input a sentence. I want to take this user input and feed that into a Flask method which will perform some calculations on that sentence and then return the result (which is a string).
I would ideally like it to return on the same page, just underneath the form's submit button.
At the moment, I am trying to do this by using javascript. Here's what I have at the moment:
result.html
<head>
<script type=text/javascript>
$(function() {
$('a#test').bind('click', function() {
$.getJSON('/result_sentence',{
sentence: $('textarea[name="sentence"]').val()}, function(data) {
// do nothing
document.getElementById('display').innerHTML = data.result;
});
return false;
});
</script>
</head><body>
<!-- The form where the user inputs -->
<div id="interactive" style="margin-top:50px">
<textarea style="width:100%;" rows="3" name="sentence" placeholder="Enter your sentence"></textarea>
<a href="#" id=test button type="submit" class="btn btn-lg btn-success"> Predict </a>
<label> I predict.. </label>
<p><span id='display'></span></p>
</div>
app.py
@app.route('/result_sentence')
def result_sentence():
sentence = flask.request.args.get('sentence')
pred = getPrediction(sentence)
return jsonify(result=pred)
Also, it should be noted that on the results.html, I have already called another Flask function which has redirected my Flask app to results.html and has displayed some charts.
So the main problem I am facing is that I am not sure why nothing happens when I click the button. To me it seems that when the button is clicked it should pass the sentence into the Flask function and perform the calculations. I've looked at a bunch of questions that were already posted here on StackOverflow such as this one: Flask - Calling python function on button OnClick event but they didnt really help me in this regard. I don't really see where it is going wrong so I would appreciate any insight or help with this.
Thanks!
EDIT: So it seems that the first problem is that the JS function doesnt get called at all when the button is clicked...
383
You need to use $.ajax with jquery. First, simply create an input box and button which, when clicked, will trigger the script to call the Ajax. In the HTML, the javascript will retrieve the user's input when the button is clicked, and the input will be sent to the flask route:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<input type='text' id='word'>
<button type='button' id ='retrieve'>Submit</button>
<div id='wordResult'></div>
</body>
<script>
$(document).ready(function() {
$('#retrieve').click(function(){
var word = $('#word').val();
$.ajax({
url: "/get_word",
type: "get",
data: {word: word},
success: function(response) {
$("#wordResult").html(response.html);
},
error: function(xhr) {
//Do Something to handle error
}
});
});
});
</script>
</html>
Then, create the route in app.py:
@app.route('/get_word')
def get_prediction():
word = flask.request.args.get('word')
return flask.jsonify({'html':getPrediction(word)})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
