change forms.py widget dynamically with user input from dropdown field in Django - django

Question

I am trying to make a coding webapp in which users can write choose language and write the code.For it I am using ace editor.Ace editor requires the "mode" variable to know the language and provide syntax highlighting.
So,I have made a dropdown and I want to set the value of "mode" as the value of the dropdown field.e.g. If the users choose C++ I want mode="c++".I have the following code but I can't think of how to do it.
forms.py
from django_ace import AceWidget
class notepadModelForm(forms.ModelForm):
Your_code = forms.CharField(widget=AceWidget(mode='python', theme='clouds'))
class Meta:
model=notepadForm
fields=['Title','Your_code','Separator']
models.py
class notepadForm(models.Model):
CHOICES=[('python','Python'),('Cplusplus','C++'),('c','C')]
Title=models.CharField(max_length=120,null=False,blank=False)
Separator=models.CharField(choices=CHOICES,max_length=10,default=";")
Your_code=models.TextField(null=True,blank=True)
I have searched for it and found some examples to dynamically add fields but modifying the widget I didn't found thats why I asked it here.

Answer 1

You can create dropdown using javascript and the modelist extension from ace
<script src=http://ajaxorg.github.io/ace-builds/src/ace.js></script>
<script src=http://ajaxorg.github.io/ace-builds/src/ext-modelist.js></script>
<script>
var modelist = ace.require("ace/ext/modelist")
var dom = ace.require("ace/lib/dom")
// using buildDom from ace, but any other method of constructing dom can be used here
var modePicker = dom.buildDom(["select", {
value: "ace/mode/text",
onchange: function() {
editor.setOption("mode", this.value);
}
}, modelist.modes.map(function(x) {
return ["option", {
value: x.mode
}, x.caption];
})
], document.body);
var editor = ace.edit(null, {
maxLines: 10,
minLines: 5
})
document.body.appendChild(editor.container)
</script>