如何将 Javascript 变量传递到我的 Django 框架以在模板中或通过 get_context 使用？

Question

我一直致力于使用 Django 将表单值传递给模式。我已经了解了大部分内容，但我不太清楚如何将两者联系起来......

这是我的 AJAX...

     $("#avail").on("click", function(event) {
       var modalavail = document.getElementById("myModalavail");
       var markedCheckbox = document.querySelectorAll('input[type="checkbox"]:checked');
       event.preventDefault();
       $(window).unbind('beforeunload');
       $.ajax({
           method: 'get',
           headers: { "X-CSRFToken": token },
           url: "",
           processData: false,
           contentType: false,
           cache: false,
           enctype: 'multipart/form-data',
           success: function(resp) {
             modalavail.style.display = "block";
             for (var checkbox of markedCheckbox) {
             console.log(checkbox.value + ' ');
           }
           },
           error: function (request, status, error) {
             console.log(request.responseText);
             showAjaxFormErrors(JSON.parse(request.responseText));
             $('html, body').animate({ scrollTop: 0 }, 50);
             },
          });
       });

这是我的 HTML...

  <button class="button209" id="avail">Check Availability</button>

  <div id="myModalavail" class="modal">
    <div class="modal-content">
      <span class="close"></span>
      <img class="logo4" src="/static/images/threecircles.svg">

      <div class="table56">

        {% for entry in form.approvers %}

          <table class="table57">
            <thead>
              <tr>
                <th class="title156">Name</th>
                <th class="title118">Available?</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="title156">{{ entry.name }}</td>
                <td class="title117">Yes</td>
              </tr>
            </tbody>
          </table>
        {% endfor %}
      </div>
      <input type="hidden" id="modal-approvers">
      <button type="button" class="button210" id="modalcloseavail">Close</button>
    </div>
  </div>

显然，form.approvers将为我提供表单中所有符合条件的审批者......但是我只是想通过选定的审批者......

这行代码运行完美......

  var markedCheckbox = document.querySelectorAll('input[type="checkbox"]:checked');

它正在获取在表单中选择的批准者....

这是我的表格......

class DailyPlannerForm(forms.ModelForm):
    class Meta:
    model = NewDailyPlannerEvent
    exclude = [ 'created_by','summary']

def __init__(self, user, *args, **kwargs):
    start_time = kwargs.pop('start_time', None)
    User = get_user_model()
    super(DailyPlannerForm, self).__init__(*args, **kwargs)
    self.fields['approvers'] = forms.ModelMultipleChoiceField(
                            widget=forms.CheckboxSelectMultiple(),
                            queryset=User.objects.exclude(Q(is_active=False)).order_by('last_name','first_name'),required=False)

def clean(self):
    cleaned_data = super(DailyPlannerForm, self).clean()
    approvers = cleaned_data.get('approvers')

这是模型......

class NewDailyPlannerEvent(models.Model):

    STATUS_CHOICES = (
    ("AwaitingResponse","AwaitingResponse"),
    ("Cancelled","Cancelled"),
    ("Declined","Declined"),
    ("Delete","Delete"),
    ("Saved","Saved"),
    ("Scheduled","Scheduled"),
    ("Submitted","Submitted"),
)

STATUS_CHOICES1 = (
    ("Cancel","Cancel"),
)

STATUS_CHOICES3 = (
    ("True","True"),
    ("False","False"),
    ("N/A","N/A")
)

approver_by_department = models.ManyToManyField(Department,related_name="new_daily_planner_event_approver_by_department")
approvers = models.ManyToManyField(User)
created_by = models.ForeignKey(User,null=True,on_delete=models.CASCADE,related_name='new_daily_planner_event_created_by')
creation_date = models.DateTimeField(editable=False,null=True)
daily_planner_event_creation_date = models.DateTimeField(editable=False,null=True)
daily_planner_event_name = models.CharField(max_length=255,blank=True)
last_update = models.DateTimeField(null=True)        
request_type = models.CharField(choices=REQUEST_TYPE,default="New Daily Planner Event Request",max_length=35)
start_time = models.DateTimeField(null=True,blank=True)
status = models.CharField(choices=STATUS_CHOICES,default="Submitted",max_length=20)
submitted = models.CharField(choices=STATUS_CHOICES3,default="False",null=True,blank=True,max_length=20)
    
class Meta:
    ordering = ["daily_planner_event_name"]
    
def __str__(self):
    return self.daily_planner_event_name
    
def get_absolute_url(self):
    return reverse("DailyPlannerEvents:create_daily_planner_event_detail",kwargs={'pk':self.pk})

但是我不知道如何将此信息传递回 HTML，以便我可以循环选择的用户并进行更多查询，我需要在提交表单之前完成所有这些操作。

提前感谢您的任何想法。

Answer 1

在 HTML 中显示选中的值非常容易，无需任何 AJAX 请求。

首先，您的 HTML。保留一切原样，但进行以下更改：

1. 删除html中的

   for loop

   table

   。
2. 清空桌子的

   tbody

   。

然后，添加脚本：

let modalElement = $("#myModalavail")
modalElement.hide() // hide the modal by default
$("#avail").on("click", ()=>{
    let checkedValues = $("input[type='checkbox']:checked") // They will only be the input tags, without labels
    $("table tbody").html("") // Clear the tbody contents
    for (const element of checkedValues) {
        let label = $(`[for=${element.getAttribute("id")}]`).text()
        let bodyRow = $("<tr>").append($("<td>").text(label)).append($("<td>").text("Yes"))
        $("table tbody").append(bodyRow)
    }
    modalElement.show() // Now show the modal
})

这应该如您所期望的那样工作。

但我注意到在您的

ModelForm

中，您正在手动定义

queryset

到

ManyToMany

字段。那是不必要的。相反，您可以通过设置

blank=True

并使用

limit_choices_to

在模型本身中完成此操作。

class NewDailyPlannerEvent(models.Model):
    ...
    approvers = models.ManyToManyField(User, limit_choices_to=Q(active=True), blank=True)
    ...

然后在

ModelForm

中，您可以简单地更改

Meta

类中的小部件：

class DailyPlannerForm(forms.ModelForm):
    class Meta:
       model = NewDailyPlannerEvent
       exclude = [ 'created_by','summary']
       widgets = {"approvers": forms.CheckboxSelectMultiple()}

   def __init__(self, user, *args, **kwargs):
       start_time = kwargs.pop('start_time', None)
       super(DailyPlannerForm, self).__init__(*args, **kwargs)

我不知道为什么你需要重写

init

方法。而且您不需要

clean

方法。