2017-07-30 83 views
0

當用戶從下拉列表中選擇一個項目時,我需要在前端,一種信號被髮送到Django後端並且所選項目的主鍵。Django - 如何根據前端下拉選擇更新視圖?

Models.py:

class Company(models.Model): 
    name = models.CharField(max_length=10, blank=True, null=True) 
    code = models.CharField(max_length=2, blank=True, null=True) 

我把這個模型爲HTML並將其解壓:

{% load staticfiles %} 
{% load i18n %} 
<!DOCTYPE html> 
<html> 
<head> 
</head> 

<body> 
    <form action="" method="GET" id="selection-form"> 
    {% csrf_token %} 
    <select> 
      {% for company in company_list %} 
     <option> 
      {{ company.name }} 
     </option> 
      {% endfor %} 
    </select> 
    <input type="button" value="Update" id="selection-button"> 
    </form> 
</body> 

</html> 

現在用戶選擇的選項,例如公司A,公司B和公司C,如果用戶選擇了說公司A和點擊「更新」按鈕時,它發出的主鍵來的views.py

Views.py:

def company_selected(request): 
    if request.method === 'GET': 
     selection = request.GET.get() // Not sure what to have within .get() 
     selected_company = Company.objects.filter(pk=selection) 
     return selected_company 

我實際上我不確定是否在views.py中正確地做了它。從前端發送什麼樣的信號可以幫助識別所選選項的主鍵?

+0

如果您希望在選擇元素時更新表單(即,沒有提交表單作爲一個整體),你需要使用AJAX。 –

+0

另外,Python中沒有'==='。但是'is'運算符。 –

回答

1

您需要修改您的html a liitle才能將id添加到select

的.html

<select id = "company-list"> 
    {% for company in company_list %} 
    <option value="{{ company.id }}"> 
     {{ company.name }} 
    </option> 
    {% endfor %} 
</select> 

當按鈕被點擊就可以使用.click功能的ajax呼叫發送到view.so修改你.js文件是這樣的:

// ajax call on your button click 
var url = $('#selection-form').attr('action'); 
$("selection-button").click(function(e) { 
    e.preventDefault(); 
    $.ajax({ 
     type: "GET", 
     url: url, 
     data: { 
      id: $('#company-list').val();, 
      }, 
     success: function(result) { 
      alert('ok'); 
     }, 
     error: function(result) { 
      alert('error'); 
     } 
    }); 
}); 

最後,在視圖中你可以這樣使用它 views.py

def company_selected(request): 
    if request.method == 'GET': 
     selection = request.GET.get('id',None) 
     if selection: 
      selected_company = Company.objects.filter(pk=selection) 
      return selected_company 
     else: 
      return #anything you want to send when no id value is sent in the ajax call 
相關問題