I have the following code. These code supposed to get user's input and processed in python. All these are supposed to run in the same webpage.
I have tried all possible function under flask.request.
Inside the python file,
app.route("/",methods=['GET','POST'])
def homepage():
return render_template('index.html')
@app.route("/detection",methods=['GET'])
def detections():
code=request.args.get('code',default='',type=str)
print(code)
ide=Lang_Dec(code)
lang=ide.get_lang()
print(lang)
return jsonify({'html':lang})
Inside the html file,
<body>
<div class="container">
<div class="row">
<div class="col-lg-8">
<textarea class="codemirror-textarea" id='code'></textarea>
<button type="button" class="btn btn-primary btn-lg" id='butt'>Guess the function!</button>
</div>
<div class="col-lg-4">
<div class="card" >
<h5 class="card-header">Detected Language</h5>
<div class="card-body">
<h6 class="card-title" id='lang'></h6>
<p class="card-text">Percentages</p>
</div>
</div>
<div class="card text-white bg-dark mb-3" >
<h5 class="card-header">IDE OUTPUT</h5>
<div class="card-body">
<p class="card-text" id='ide'></p>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
var code = $(".codemirror-textarea")[0];
var editor = CodeMirror.fromTextArea(code, {
lineNumbers : true,
theme : "duotone-dark",
});
});
</script>
<script>
$(document).ready(function(){
$('#butt').click(function(){
var code=$('#code').val();
$.ajax({
url:"/detection",
type: "get",
data:{code:code},
success:function(response){
$('#lang').html(response.html);
},
error: function(xhr){
//do smtg
}
});
});
});
</script>
</body>
The Python is supposed to get the user input from the textarea, but it turns out that the Python script only getting a -.
This isn't a Python or Flask issue, you have not wrapped your textarea inside a form, and the CodeMirror Documentation suggests the following (emphasis mine):
CodeMirror.fromTextArea(textArea: TextAreaElement, ?config: object)
This method provides another way to initialize an editor. It takes a textarea DOM node as first argument and an optional configuration object as second. It will replace the textarea with a CodeMirror instance, and wire up the form of that textarea (if any) to make sure the editor contents are put into the textarea when the form is submitted. The text in the textarea will provide the content for the editor.
Try and confirm this with a simple form:
<form action='detection'>
<textarea id='code' name='code'></textarea>
<button type="submit">Go!</button>
</form>
Serving locally, submitting the form with some random text input yields the following:
127.0.0.1 - - [21/Jan/2019 22:50:04] "GET /detection?code=dfgdfgdfgggggggggg HTTP/1.1"
So in your case, it looks like you need to call cm.save() prior to your Ajax request, at least that is what a quick glance at the documentation suggests to me.
So a quick and dirty fix to your code would look like this:
<script>
$(document).ready(function(){
var code = document.getElementById('code');
var editor = CodeMirror.fromTextArea(code, {
lineNumbers : true,
theme : "duotone-dark",
});
$('#butt').click(function(){
editor.save(); // this is where the textarea content gets updated
var c=$('#code').val();
$.ajax({
url:"/detection",
type: "get",
data:{code:c},
success:function(response){
$('#lang').html(response.html);
},
error: function(xhr){
//do smtg
}
});
});
});
</script>