Inserting data into Popup with Django - javascript

In my Django project, I want to have the institution selection selected from a list, for this I created a model for the institution name and I want the user to enter it as a pop-up window or a list selection for this:
models.py
class Institution(models.Model):
institutionName = models.CharField(max_length=200,null=True,blank=True)
def __str__(self):
return self.institutionName
views.py
def getInstitutionName(request):
context = {'institutionName':Institution.objects.all()}
return HttpResponse(context)
I created it in the form of html, but I'm having trouble with how to integrate the data I bring here with html. In this process, I want to make a form that includes other entries, only the institution entry in this way. My question on this subject is, what action should I take while printing the data I have brought here to the screen.

Django provides the form field ModelChoiceField. When this field of a form is rendered, it will by default generate a <select> with <option> for each instance in a queryset.
You can either transform this using Javascript, or you can write (or look for) your own widget to use with this field, to generate the HTML you desire.
I'd start by writing a view with such a form and no fancy stuff. When you have it working, then start developing it into the pop-up you seek.
class InstitutionSelectForm ( forms.Form):
institution = forms.ModelChoiceField(
queryset = Institution.objects.all(),
)
# other fields
class InstitutionSelectView( FormView):
form_class = InstitutionSelectView
template_name = 'myapp/institution_select.html'
def form_valid( self, form):
institution_instance = form.cleaned_data['institution']
# do whatever is called for with this institution and
# any other form fields
return HttpResponseRedirect( reverse( ...))
To start with, a very basic template for rendering a form:
<form method="post">
{% csrf_token %}
{{ form.as_p }}
<input type="submit" value="Submit">
</form>
Make it work, inspect the select structure in your browser, and set to work on customizing it.

Related

How to get value from HTML user input in django view?

Hello everyone I have an HTML form as follows:
and after clicking on post i am redirecting it to views.py. can any one tell me how to get the field values of all the fields of the form into views.py.
here's the output
i want the field value in key value pair like shown in above pic i.e. API=hello&Area=hello1 so on...
i know we can do that using this
if html:
<div class="form-group col-md-2">
<label for="param">TAF Parameter</label>
<input type="text" name="inputdata_API" class="form-control" id="inputapi_param" value="API" readonly>
</div>
and view:
def register(request):
api = request.GET.get['inputdata_API']
But in that case i have to write each and every input name in my view
To get form input without individual access, Django provide ModelForm
For resume :
Define a model to store your form informations
class MyModel(models.Model):
api = models.CharField()
# ...
Define a model form linked to the previous model
from django import forms
class MyModelForm(forms.Form):
class Meta:
model = MyModel
fields = ['api', # all others fields you want to display]
In the views.py
from django.http import JsonResponse
from django.shortcuts import redirect
def register(request):
if request.method == 'POST':
# Instanciate the form with posted data
form = MyModelFor(request.POST)
# Check if form is valid
if form.is_valid:
# Create a new MyModel object if the form is valid
form.save() # This is the most benefit line, save you from request.POST['field_name']
# You can eventually return to the same page
return redirect('.')
else: # The form is invalid return a json response
return JsonResponse({"Error": "Form is invalid"}, status=400)
At the end render the form fields in the template like this :
<form action="{% url 'url_to_register' %}" method="post" novalidate>
{% csrf_token %}
{{ form.as_p }}
<button type="submit" class="btn btn-success">Register</button>
</form>
But the downside of this approach is the style of the form on the frontend :
You need to add some Bootstrap class for example in the right place to make it nice to look, it is a a counterpart...
Django form documentation.

ModelChoiceField javascript onChange arguments

I have a Django project that has a Students model with multiple fields, and I have implemented a ModelChoiceField form which drops down and allows for selecting a particular record in the Students table.
forms.py:
class StudentChoiceField(forms.Form):
students = forms.ModelChoiceField(
queryset=Student.objects.values_list().order_by("last_name"),
empty_label="(select student)",
widget=forms.Select(attrs={"onChange":'refresh()'})
)
def __init__(self, *args, **kwargs):
super(StudentChoiceField, self).__init__(*args, **kwargs)
# without the next line label_from_instance does NOT work
self.fields['students'].queryset = Student.objects.all().order_by("last_name")
self.fields['students'].label_from_instance = lambda obj: "%s %s" % (obj.last_name, obj.first_name)
The label_from_instance method is overridden, so that the drop-down form displays just two model fields (there are eleven total in the model).
When a student is selected, I want to update some textfields in the page to display the remaining fields of the model. Currently, have implemented a javascript function refresh() which is invoked for the onChange event of the StudentChoiceField form.
index.html (all_students_choice is the StudentChoiceField form):
{% extends "base.html" %}
{% block content %}
<body>
<script>
function refresh(){
var id = document.getElementById("id_students").value;
console.log(id);
}
</script>
<div class="container">
<form method=POST action="">
{% csrf_token %}
{{ all_students_choice }}
</form>
</div>
</body>
{% endblock %}
I have confirmed through the browser console that the javascript function is getting called, and printing the value of the ModelChoiceField form. As expected, after selecting an instance from the dropdown menu the value of the form element is the primary key of the table.
I need advice on the best approach to populate the textfields which I will be adding to display the remaining Student model fields (aside from first and last name). Should these be passed as parameters to the javascript function? Is there a best way to approach this problem.
Answering this question with the approach that that was eventually used, in case it would be of assistance to someone else. Decided to render the same template, but with additional element in the context to reference the selected student. In the initial index home page, the selected_student is None:
def index(request):
....
context = {
'students_choice_ln': students_choice_ln,
'students_choice_fn': students_choice_fn,
'selected_student': None
}
return render(request, 'awards/index.html', context)
For the select function, the selected_student is passed in through the context:
def select(request):
if request.method == "GET":
...
student_id = ...
selected_student = Student.objects.get(pk=student_id)
...
context = {
...
'students_choice_ln': students_choice_ln,
'students_choice_fn': students_choice_fn,
'selected_student': selected_student,
...
}
return render(request, 'awards/index.html', context)
The template can then check whether the selected_student variable is available or not, and then accordingly display the additional fields in a separate div.
If there are any experienced web developers / django developers who see problems with this structure, perhaps they can point them out.

Django-ckeditor not saving edits with crispy-forms

I have a cripsy form and I want to change one field from Textarea to CKEDitorUploadingWdidget
So my form looks like this (I have left in what was previoulsy working:
class RenameStudyForm(BetterModelForm):
name = forms.CharField(label='Study Name', max_length=51, required=False) # Update study name
#waiver = forms.CharField(widget=forms.Textarea, label='Waiver of Documentation', required=False)
waiver = forms.CharField(widget=CKEditorUploadingWidget(), label='Waiver of Documentation', required=False)
I have amended my model as follows:
class study(models.Model):
researcher = models.ForeignKey("auth.user") # Researcher's name
name = models.CharField(max_length = 51) # Study name
instrument = models.ForeignKey("instrument") # Instrument associated with study
#waiver = models.TextField(blank = True)
waiver = RichTextUploadingField(blank = True)
My template looks has:
{% load crispy_forms_tags %}
{{ form.media }}
{% crispy form %}
When I enter the screen to edit the waiver I get a rich text field to edit, as I would expect. However, nothing I enter into the field is passed back to the form. Within the form I added a print statement, as below
def clean(self):
cleaned_data = super(RenameStudyForm, self).clean()
print(cleaned_data['waiver'])
The print always gives the original text. Can anyone help me please
EDIT
I've been reviewing console when I'm using the CKEditorUploadingWidget against the forms.Textarea widget and it appears to be generating the following jQuery warning
Synchronous XMLHttpRequest on the main thread is deprecated because of
its detrimental effects to the end user's experience.
I believe I am getting this because I am loading the form into a modal using this button
<button type="button" class="btn btn-secondary btn-block" onclick = "modal_form('/interface/study/{{ current_study|urlencode }}/rename_study/')" >Update Study</button>
And this view
def rename_study(request, study_name):
#do stuff
return render(request, 'researcher_UI/add_study_modal.html', form_package)
So my JavaScript for ckeditor is being loaded now rather than when the document is originally loaded so I think this causes the issues. Any thoughts really appreciated
Found the answer. The form is being submitted via ajax. As such I need to copy the CKEditor data into the form field, which I do with
for (var instance in CKEDITOR.instances){
CKEDITOR.instances[instance].updateElement();
}

Form without submit button in Django

I see that forms without buttons are very popular (like here). How to create a form that will be automatically submit for two different fields in Django, after the user selects the field (example 1) or type in the text and clicks something (it means completes typing) (example 2):
1.) ChoiceField
forms.py
class Search(forms.Form):
field = forms.ChoiceField(choices=MY_CHOICES)
views.py
if request.method == "GET":
form = Search(request.GET)
if form.is_valid():
print('it's work')
template.html
<form method="GET">
{% csrf_token %}
{{ form }}
</form>
2.) CharField
forms.py
class Search(forms.Form):
field = forms.CharField(max_length=10)
* other files like above
You may simply change forms.py:
class Search(forms.Form):
field = forms.ChoiceField(choices=MY_CHOICES,
widget=forms.Select(attrs={'onchange': 'submit();'}))
Nothing else to add, no jquery needed.
See also here.
You can use jquery in your template like this:
$('#search_field').change(function(){
$('#your_form').submit()
});
or when user click on something:
$('#something').click(function(){
$('#your_form').submit()
});

How to use django forms and javascript for autocompletion of field

I have a model that has fields like name, place (address), lat, lon, hobby etc.
In order to get these fields, I am using a form in Django. Something like this:
from django import forms
from .models import User
class UserForm(forms.ModelForm):
class Meta:
model = User
fields = ["name", "place", "date","hobbies"]
widgets = {
'date': SelectDateWidget()
}
I want to use the google maps api to enable autocompletion on filling the address from here: https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform
and read the lat/lon from the place address itself.
In my html, i render it like:
<form method="POST" action="" enctype='multipart/form-data'>{% csrf_token %}
{{ form.as_p}}
{{ form.media }}
<input type="submit" value="Submit Post"/>
</form>
However, I wonder how can I link the 'id' of the 'places' text box to the javascript action that enables autocompletion?
Then I plan to use lat/lan as hidden field to populate their values, client side.
Is there a better way to get this done?
Django renders form with id name something like id_model_field_name. If your model field name is place, in form the id of that field will be id_place. Using this id you can enable autocomplete javascript code.

Categories