Дублирование элемента после выполнения Ajax

Я пытаюсь автозаполнить поля формы, используя Ajax и Jquery. Сначала я использовал Django, и функция views.py выглядит следующим образом:

def CreateWellMon(request):
    if request.method == 'POST':
        form = SurveillanceDesPuits_F(request.POST or None)
        if form.is_valid():
            form.instance.author = request.user
            form.save()
            return redirect('WellMonitor')
    else:
        try:
            PUITS_id = request.GET.get('PUITS')
            record = SurveillanceDesPuits.objects.filter(PUITS_id__id__exact=PUITS_id)[:1]
            record2 = SurveillanceDesPuits.objects.get(id= record[0].id)
            form = SurveillanceDesPuits_F(instance=record2)
        
            return render(request, 'measure/Surveill_Wells/Add_wellMntr2.html', {'form': form})
        except:
            record2 = SurveillanceDesPuits.objects.all().first()
            form = SurveillanceDesPuits_F(instance=record2)
            return render(request, 'measure/Surveill_Wells/Add_wellMntr2.html', {'form': form})

Здесь я сначала просто выбрал последнюю запись из базы данных. После, когда пользователь выбирает Well, он перезагружает последнюю запись элемента.

мой HTML код страницы:

Проблема в том, что после выбора колодца AJAX дублирует некоторые элементы на странице, как описано на фото. и как мне решить эту проблему и сохранить выбранный колодец, потому что это поле выбора?

enter image description here

enter image description here

Сначала я сделал изменение в models.py, я удалил to_field='WellID', так что он будет сохранять выбранное после вызова AJAX.

class SurveillanceDesPuits(models.Model):
    PUITS    =  models.ForeignKey(Surveill_Wells , on_delete=models.CASCADE)
    DATE_TEST=  models.DateField()
    ....

тогда я изменил views.py:

def CreateWellMon(request):
    if request.method == 'POST':
        form = SurveillanceDesPuits_F(request.POST or None)
        if form.is_valid():
            form.instance.author = request.user
            form.save()
            return redirect('WellMonitor')
    else:
        try:
            PUITS_id = request.GET.get('PUITS')
            record2 = SurveillanceDesPuits.objects.filter(PUITS_id__id__exact=PUITS_id)[:1]
            return JsonResponse({'record2': list(record2.values())}, safe=False)
        except:
            form = SurveillanceDesPuits_F()
            return render(request, 'measure/Surveill_Wells/Add_wellMntr2.html', {'form': form})

последнее изменение в HTML странице и вызов ajax кода будет выглядеть так:

<script type="text/javascript">
        $.ajax({ 
            type: 'GET' ,               
            url: url,              
            data: {'PUITS': PUITSId },
            dataType: "json",
            success: function (response){           
                var  response = JSON.parse(response);
                const object = response[0]
    
                $("#id_PUITS").val(object.fields.PUITS);
                $("#id_DATE_TEST").val(object.fields.DATE_TEST);
                $("#id_MODE").val(object.fields.MODE);
                $("#id_CS").val(object.fields.CS);
                $("#id_SITUATION").val(object.fields.SITUATION);
                $("#id_DUSE").val(object.fields.DUSE);
                $("#id_PRES_TBG").val(object.fields.PRES_TBG);
                $("#id_PRES_CSG").val(object.fields.PRES_CSG);
                $("#id_PRES_AVD").val(object.fields.PRES_AVD);
                $("#id_RESEAU_GL").val(object.fields.RESEAU_GL);
                $("#id_ANNULAIRE_TECH").val(object.fields.ANNULAIRE_TECH);
                $("#id_OBSERVATION").val(object.fields.OBSERVATION);
                $("#id_Controle_Pression_ENSP").val(object.fields.Controle_Pression_ENSP);
                $("#id_Test_Puits").val(object.fields.Test_Puits);
                $("#id_Controle_Pression_DP").val(object.fields.Controle_Pression_DP);
            },
    
            });
            return false;
            });
    </script>

это позволит избежать дублирования страницы, вызванного

$("#SurveillanceDesPuits_F").html(response);

Большое спасибо

Вернуться на верх