查看更新django列表中的一個元素

Question

我對django很新穎，我在我的模板中顯示項目列表，每個項目都有一個編輯按鈕，當用戶單擊它時，會彈出一個編輯窗體在頁面上。我正在考慮這樣做，單擊編輯時，會調用一個隱藏頁面其餘部分的js函數，並且直到現在隱藏的編輯表單纔可見，但是我的問題是我不知道如何編輯表單獲取有關該項目的信息以填寫表單的字段。我可以編輯視圖來返回填充了信息的表單，但我怎麼稱呼它。除了ajax有沒有其他的方法，我嘗試使用Ajax，它不工作。

這是我現在的代碼，但我不想使用ajax，請告訴我，如果有一些替代，如果不是我怎麼能寫這個ajax查詢，我不知道django太多。

的意見/ edit_keyword：

def edit_keyword(request, id=None): 
if id: 
    keywword_to_edit=keyword.objects.get(keyword_id=request.POST['edit_keyword_id']) 
    form_edit=KeywordForm(request.POST or None, instance=keywword_to_edit) 
    if request.POST and form_edit.is_valid(): 
     form_edit.save() 
     return HttpResponseRedirect(reverse('list_keyword')) 
    return render('form': form_edit) 
} 

的JavaScript edit_key功能

function edit_key(id) { 
    el = document.getElementById("edit_key"); 
    el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible"; 
    ell = document.getElementById("main_content"); 
    ell.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible"; 
    document.getElementById("edit_keyword_id").value= id; 

    $.ajax({ 
       type:"GET", 
       url:"/edit_keywords/", 
       data: { edit_keyword_id: id } 
       success: function(response){ 
        //I dont know what I should write here to fill the form in my template with the form returned. 
       } 
      }); 
    } 

Answer 1

您應該呈現的字段兩次，一個是在一個div和顯示其他的作爲應該被隱藏的形式。這假設有多個教育學位。

{% for education in education_list %} 
<div id="div_education{{forloop.counter0}}" class="pr mb30"> 
    <button class="btn btn-profile profile-edit js_edit_education_btn" data-idx={{forloop.counter0}} data-role="button">Edit</button> 
    <div class="row mt-10"> 
     <div class="col-sm-3 col-md-3">Institute Name</div> 
     <div class="col-sm-9 col-md-9" data-role="input" data-editable>{{education.institute}}</div> 
    </div> 
    <div class="row mt-10"> 
     <div class="col-sm-3 col-md-3">Degree</div> 
     <div class="col-sm-9 col-md-9" data-role="input" data-editable data-type="qualification">{{education.degree}}</div> 
    </div> 
</div> 

<form id="form_edit_education{{forloop.counter0}}" data-url='{% url "something" idx=forloop.counter0 %}' class="js_form_edit_education" style="display:none;"> 
    <div style="display:none"><input type="hidden" name="csrfmiddlewaretoken" value="{{csrf_token_value}}"></div> 
    <div class="row mt-10"> 
     <div class="col-sm-3 col-md-3">Institute</div> 
     <div class="col-sm-9 col-md-9" data-role="input" data-editable=""><input class="pro-input js_institute" type="text" name="institute{{forloop.counter0}}" value="{{education.institute}}"></div> 
    </div> 
    <div class="row mt-10"> 
     <div class="col-sm-3 col-md-3">Degree</div> 
     <div class="col-sm-9 col-md-9" data-role="mobile" data-editable=""><input class="pro-input js_degree" type="text" name="degree{{forloop.counter0}}" value="{{education.degree}}"></div> 
    </div> 
    <div class="row mt-10 save-event"> 
     <div class="col-sm-9 col-md-9 col-sm-push-3 col-md-push-3"> 
      <button id="save_edit_education{{forloop.counter0}}" class="btn btn-primary" data-idx="{{forloop.counter0}}" type="submit">Save</button> 
      <a id="cancel_edit_education{{forloop.counter0}}" data-idx="{{forloop.counter0}}" class="btn js_cancel_edit_education">Cancel</a> 
     </div> 
    </div> 
</form> 
{% endfor %} 

您可以使用視圖輕鬆列出詳細信息。現在一旦按下編輯按鈕，顯示窗體並隱藏div。一旦用戶在編輯後點擊保存，調用ajax來更新數據庫中的相同內容。