Wie erstellt man ein dynamisches Formset aus dem Formular in Django/AJAX

Question

Ich arbeite an einer Seite, die zwei Formulare enthält. Einer dieser Formulare ist ein normaler Name, eine Beschreibung, Notizen usw. Der zweite ist zwei Dropdown-Menüs - Language und Level wo die Level ist verkettet mit Language mit AJAX.

Ich möchte dieses Formular auf der Seite erscheint so oft wie user will. Wenn also Language und Level gefüllt werden, erscheint unter dem alten Formular das neue Formular Language und Level.

Das Problem ist, dass, wenn die Form gekettet ist, muss ich separat jede Language und Level identifizieren, so kann ich nicht kopieren Sie einfach die form dies in Wiederholung. (Vielleicht kann ich das, aber ich kann es nicht herausfinden, seit ich neu in AJAX bin).

Dies ist ein create job django/html:

{% extends 'base.html' %} 
{% load crispy_forms_tags %} 
{% load static %} 
{% block head %} 
    <script src="{% static "js/main.js" %}"></script> 
{% endblock %} 
{% block content %} 
    {% if user.is_authenticated %} 
     <form action="" method="post" enctype="multipart/form-data">{% csrf_token %} 
      {{ language_form }} 
      <button value="Update" type="submit">Submit</button> 
     </form> 
    {% endif %} 
{% endblock %} 

Dies ist die JQuery:

$(document).on('change','#id_language',function(){ 
    language_id = $(this).val(); 
    request_url = '/get-highest-level/'+language_id+'/'; 
    $.ajax({ 
     url:request_url, 
     success: function(data){ 
      var select = $('#id_level'); 
      select.empty(); 
      $.each(data, function (key,value) { 
       $('select[name="level"]').append('<option value="'+ key + '">'+value + '</option>'); 
      }); 
      return false; 
     } 
    }) 
}); 

Und eine einfache Ansicht:

@login_required 
def create_order(request): 
    language_form = LanguageLevelForm(request.POST or None) 
    return render(request,'auth/jobs/create-job-test.html',context={'language_form':language_form}) 

Ich weiß, dass es möglich sein sollte, zu verwenden FormSet, aber ich kann nicht herausfinden, wie es mit derfunktioniert.

Answer 1

Um die ausgewählten Optionen zu aktualisieren, müssen Sie sie nicht identifizieren. Wenn das Sprachformular mit div oder etwas eingeschlossen ist, wird nur eine Ebene für eine Sprache ausgewählt.

$(document).on('change','select.language',function(){ // use class, not id 
    language_id = $(this).val(); 
    request_url = '/get-highest-level/'+language_id+'/'; 
    var language = $(this); 
    $.ajax({ 
     url:request_url, 
     success: function(data){ 
      //find closest select with class "level" 
      var select = language.closest('select.level'); 
      select.empty(); 
      $.each(data, function (key,value) { 
       // use select found above. 
       select.append('<option value="'+ key + '">'+value + '</option>'); 
      }); 
      return false; 
     } 
    }) 
}); 

In ähnlicher Weise können Sie Attribute von ihnen ändern, ohne zu identifizieren.

$('select.language').each(function(index){ 
    $(this).attr('name', 'language' + index); 
}); 

EDIT: Mit Ihrem HTML-Beispiel, versuchen Sie dies ..

$(document).on('change','select[id$="language"]',function(){ // id ends with 'language' 
    language_id = $(this).val(); 
    request_url = '/get-highest-level/'+language_id+'/'; 
    var level_select_id = $(this).attr('id').replace('language', 'level'); // tricky.. 
    $.ajax({ 
     url:request_url, 
     success: function(data){ 
      var select = $('#' + level_select_id); // use id string found above 
      select.empty(); 
      $.each(data, function (key,value) { 
       select.append('<option value="'+ key + '">'+value + '</option>'); 
      }); 
      return false; 
     } 
    }) 
});