Django crispy input from Ajax data - html

Question

I need to Auto-fill up the crispy fields so I called the needed data from my database using ajax function as:
views.py
def load_record(request):
PUITS_id = request.GET.get('PUITS')
record = SurveillanceDesPuits.objects.filter(PUITS_id__id__exact=PUITS_id)[:1]
my_record= [str(record[0].PUITS) , str(record[0].MODE), str(record[0].CS)]
print(my_record)
return render(request, 'measure/Surveill_Wells/Add_wellMntr.html', {'record': my_record})
And my HTML file is :
<form method="POST" id="SurveillanceDesPuits_F" data-record-url="{% url 'ajax_load_record' %}">
{% csrf_token %}
<!-- form from views.py-->
<div class="border p-2 mb-3 mt-3 border-secondary">
<div class="form-row">
<div class="form-group col-md-3 mb-0">
{{ form.PUITS|as_crispy_field }}
</div>
<div class="form-group col-md-3 mb-0">
{{ form.CS|as_crispy_field }}
</div>
<div class="form-group col-md-3 mb-0">
{{ form.MODE|as_crispy_field }}
</div>
</div>
</div>
<input class="btn btn-success mb-4" type="submit" value="ADD Record">
</form>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$("#id_PUITS").change(function () {
var url = $("#SurveillanceDesPuits_F").attr("data-record-url");
var PUITSId = $(this).val();
$.ajax({
url: url,
data: {
'PUITS': PUITSId
},
success: function (data) {
$("#id_MODE").html(data);
}
});
});
</script>
After selecting an item (PUITS) from the dropdown list, I want to set the value of CS and MODE automatically from the received data.
so in the console, it gives me this error:
File "D:\WikiPED\venv\lib\site-packages\crispy_forms\templatetags\crispy_forms_filters.py", line 102, in as_crispy_field
raise CrispyError("|as_crispy_field got passed an invalid or inexistent field")
crispy_forms.exceptions.CrispyError: |as_crispy_field got passed an invalid or inexistent field
[07/Sep/2021 17:30:05] "GET /ajax/load-record/?PUITS=1 HTTP/1.1" 500 25693
what I missed in this code?
Thanks

Answer 1

I changed the views.py as:
def load_record(request):
PUITS_id = request.GET.get('PUITS')
record = SurveillanceDesPuits.objects.filter(PUITS_id__id__exact=PUITS_id)[:1]
return JsonResponse({'record2': list(record2.values())}, safe=False)
the scripts will be:
<script type="text/javascript">
$.ajax({
type: 'GET' ,
url: url,
data: {'PUITS': PUITSId },
dataType: "json",
success: function (response){
const object = response.record2[0]
$("#id_PUITS").val(object.PUITS_id);
$("#id_DATE_TEST").val(object.DATE_TEST);
$("#id_MODE").val(object.MODE);
$("#id_CS").val(object.CS);
$("#id_SITUATION").val(object.SITUATION);
$("#id_DUSE").val(object.DUSE);
$("#id_PRES_TBG").val(object.PRES_TBG);
$("#id_PRES_CSG").val(object.PRES_CSG);
$("#id_PRES_AVD").val(object.PRES_AVD);
$("#id_RESEAU_GL").val(object.RESEAU_GL);
$("#id_ANNULAIRE_TECH").val(object.ANNULAIRE_TECH);
$("#id_OBSERVATION").val(object.OBSERVATION);
$("#id_Controle_Pression_ENSP").val(object.Controle_Pression_ENSP);
$("#id_Test_Puits").val(object.Test_Puits);
$("#id_Controle_Pression_DP").val(object.Controle_Pression_DP);
},
});
return false;
});
</script>