Обновляйте данные с помощью Django и AJAX

#javascript #jquery #django #ajax #django-views

Вопрос:

У меня проблема с выбором поля в поле ввода из данных Django. в models.py является:

 class Manifold_monitoring(models.Model):  MFD_type = models.ForeignKey(Manifo_types , on_delete=models.CASCADE)  DATE_TEST = models.DateField()  Pressure_MFD = models.DecimalField(max_digits=15, decimal_places=3,null=True, blank=True)  Pressure_SP = models.DecimalField(max_digits=15, decimal_places=3,null=True, blank=True)  .....  def __str__(self):  return str(self.MFD_type.MFDsID.MFDsID  ' '  self.MFD_type.Type  ' '  self.MFD_type.Fluid_N)   class Meta:  ordering = ('-post_date',)  unique_together=[['MFD_type','DATE_TEST']]  

и обновление views.py:

 class UpdManifold_Monto(View): form_class = Manifold_monitoring_F def get(self,request, pk, *args, **kwargs):  if request.is_ajax():  task = Manifold_monitoring.objects.get(pk=pk)  task.delete()  return JsonResponse({"message":"success"})  return JsonResponse({"message": "Wrong request to delete"})  def post(self,request, pk, *args, **kwargs):  if request.is_ajax():  task = Manifold_monitoring.objects.get(pk=pk)  print('request.is_ajax()1', task.MFD_type_id)  data = {  "MFD_type_id": task.MFD_type_id,  "DATE_TEST" :task.DATE_TEST,  "Pressure_MFD":task.Pressure_MFD,  "Pressure_SP":task.Pressure_SP  }  print('request.is_ajax()2', task.MFD_type ,data )  form = self.form_class(request.POST, initial=data)  if form.is_valid():  MFD_type = form.cleaned_data['MFD_type']  DATE_TEST = form.cleaned_data['DATE_TEST']  Pressure_MFD = form.cleaned_data['Pressure_MFD']  Pressure_SP = form.cleaned_data['Pressure_SP']  print('request.is_ajax()3', MFD_type)  if form.has_changed():  task.MFD_type_id = MFD_type  task.DATE_TEST = DATE_TEST   task.Pressure_MFD = Pressure_MFD  task.Pressure_SP = Pressure_SP   task.save()  return JsonResponse({"message": "success"})  return JsonResponse({"message":"No change"})  return JsonResponse({"message":"Failed"})  return JsonResponse({"message": "Wrong request"})  

HTML-код формы редактирования:

 lt;div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLable" aria-hidden="true"gt;  lt;div class="modal-dialog modal-sm"gt;  lt;div class="modal-content"gt;  lt;div class="modal-header"gt;  lt;h4 class="modal-title"gt;Editlt;/h4gt;  lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"gt;  lt;span aria-hidden="true"gt;amp;times;lt;/spangt;  lt;/buttongt;  lt;/divgt;  lt;form id="formEdit" action=""gt;  {% csrf_token %}  lt;div class="modal-body"gt;  lt;div class="form-group validate"gt;  lt;input type="text" name="MFD_type" class="form-control" placeholder="Manifold"gt;  lt;small class="text-red text-muted mySpan"gt;lt;/smallgt;    lt;/divgt;  lt;div class="form-group validate"gt;  lt;input type="date" name="DATE_TEST" class="form-control" placeholder="Control Date"gt;  lt;small class="text-red text-muted mySpan"gt;lt;/smallgt;  lt;/divgt;  lt;div class="form-group validate"gt;  lt;input type="text" name="Pressure_MFD" class="form-control" placeholder="Pressure (bar)"gt;  lt;small class="text-red text-muted mySpan"gt;lt;/smallgt;  lt;/divgt;  lt;div class="form-group validate"gt;  lt;input type="text" name="Pressure_SP" class="form-control" placeholder="SP Pressure (bar)"gt;  lt;small class="text-red text-muted mySpan"gt;lt;/smallgt;  lt;/divgt;  lt;div class="modal-footer"gt;  lt;button type="button" class="btn btn-secondary" data-dismiss="modal"gt;Closelt;/buttongt;  lt;button type="submit" class="btn btn-primary btnUpdate"gt;Updatelt;/buttongt;  lt;/divgt;  lt;/divgt;  lt;/formgt;  lt;/divgt;  lt;/divgt; lt;/divgt;  

enter image description here

as the image adding and deleting works fine. So I have this list from the database as a dropdown (choice).

enter image description here

last the AJAX and Jquery script:

 lt;scriptgt; //Edit Function  $("#table_id tbody").on("click", ".link-edit", function(e){  e.preventDefault();  var $this = $(this);  let MFD_type = $this.parents(".record").find('td').eq(0).text();  let DATE_TEST= $this.data('start');  let Pressure_MFD = $this.parents(".record").find('td').eq(2).text();  let Pressure_SP= $this.parents(".record").find('td').eq(3).text();   $("#formEdit input[name='MFD_type']").val(MFD_type);  $("#formEdit input[name='DATE_TEST']").val(DATE_TEST);  $("#formEdit input[name='Pressure_MFD']").val(Pressure_MFD);  $("#formEdit input[name='Pressure_SP']").val(Pressure_SP);  $("#formEdit").attr("action", $this.attr('href'));  $("#editModal").modal("show");  return false;  });   $("#formEdit").on("submit", function(e){  e.preventDefault();  e.stopPropagation();  var $this = $(this);  var valid = true;  $('#formEdit input').each(function() {  let $this = $(this);    if(!$this.val()) {  valid = false;  $this.parents('.validate').find('.mySpan').text('The ' $this.attr('name').replace(/[_] /g, ' ') ' field is required');  }  });  if(valid){  let data = $this.serialize();  $.ajax({  url: $this.attr("action"),  type: "POST",  data: data,  dataType: "json",  success: function(resp){  if(resp.message === "success"){  alert("Updated successful");  $('#editModal .close').click();  }  else{  alert(resp.message);  }  },  error: function(resp){  console.log("Something went wrong");  }  });  }  return false;  }); lt;/scriptgt;  

I want to make the input of the first field as a choice MFD_type ?

введите описание изображения здесь

как я это делаю? и правильна ли моя функция ANAX и UpdManifold_Monto?

Ответ №1:

Я подготовил список выпадающего списка динамических зависимостей, поэтому мои взгляды будут

 def AddManifold_Monto(request):  form = Manifold_monitoring_F()  DrobdownMFD_type = Manifo_types.objects.exclude(Fluid_N = 'Stock')  model = Manifold_monitoring.objects.filter( DATE_TEST__exact= datetime.date.today())  context={  'title':'Manifold Monitoring',  'model':model,  'form': form,  'DrobdownMFD_type':DrobdownMFD_type  } return render(request,'Home/Production_Ser/MFD_Monitor/ADDMFD_Monitor.html',context)  

и в форме HTML я заменил ввод на этот:

 lt;select id="id_MFD_typeS" name="MFD_typeS" class="select-manifold form-control" required placeholder="Manifold"gt;  lt;option value=""gt;lt;/optiongt;   {% for brand in DrobdownMFD_type %}  lt;option id="{{ brand.id }}" value="{{ brand.id }}"gt;  {{ brand.MFDsID }}  lt;/optiongt;  {% endfor %}lt;/selectgt;  lt;small class="text-red text-muted mySpan"gt;lt;/smallgt;  

введите описание изображения здесь

Так что это работает, но когда я изменяю и обновляю значение, оно не сохраняется

из функции обновления представлений я только что распечатал значения формы

 form = self.form_class(request.POST, initial=data)  print(form)  

и это дает мне полный список?

 gt; lt;trgt;lt;thgt;lt;label for="id_MFD_type"gt;Manifold:lt;/labelgt;lt;/thgt;lt;tdgt;lt;ul gt; class="errorlist"gt;lt;ligt;This field is required.lt;/ligt;lt;/ulgt;lt;select gt; name="MFD_type" required id="id_MFD_type"gt; lt;option value="" gt; selectedgt;---------lt;/optiongt; gt;  gt; lt;option value="14"gt;AMA CTR HP Prodlt;/optiongt; gt;  gt; lt;option value="15"gt;AMA CTR HP Selectiflt;/optiongt; gt;  gt; lt;option value="16"gt;AMA CTR BP Prod N1lt;/optiongt; gt;  gt; lt;option value="17"gt;AMA CTR BP Prod N2lt;/optiongt; gt;  gt; lt;option value="18"gt;AMA CTR BP Selct N1lt;/optiongt; gt;  gt; lt;option value="19"gt;AMA CTR BP Selct N2lt;/optiongt; gt;  gt; lt;option value="20"gt;AMA MFDSlt;/optiongt; gt;  gt; lt;option value="21"gt;AMA MFDSlt;/optiongt; gt;  gt; lt;/selectgt;lt;/tdgt;lt;/trgt; lt;trgt;lt;thgt;lt;label for="id_DATE_TEST"gt;Control gt; Date:lt;/labelgt;lt;/thgt;lt;tdgt;lt;input type="date" name="DATE_TEST" gt; value="2021-10-28" class="form-control" required id="id_DATE_TEST" gt; /gt;lt;/tdgt;lt;/trgt; lt;trgt;lt;thgt;lt;label for="id_Pressure_MFD"gt;Pressure gt; (bar):lt;/labelgt;lt;/thgt;lt;tdgt;lt;input type="number" name="Pressure_MFD" gt; value="33" step="any" id="id_Pressure_MFD" /gt;lt;/tdgt;lt;/trgt; lt;trgt;lt;thgt;lt;label gt; for="id_Pressure_SP"gt;SP Pressure (bar):lt;/labelgt;lt;/thgt;lt;tdgt;lt;input gt; type="number" name="Pressure_SP" value="33" step="any" gt; id="id_Pressure_SP" /gt;lt;/tdgt;lt;/trgt;