[DJANGO] verschachtelte Form-Darstellung

[djangothoto]

Hallo Experten,

ich habe folgendes Problem:

Ich möchte eine Select-Form basteln, indem alle Values von einander abhängig sind.
D.h. es muss möglich sein wenn ich als Hauptkategorie Option1, Option2, Option3 habe die jeweiligen Unterkategorien abhängig von der Hauptkategorie anzeigen zu lassen. Und zwar nur diese die abhängig von der Hauptkategorie sind
Ich hab mir gedacht dass sollte mittels ajax und jquery gehn allerdings komm ich nicht wirklich weit, da dies in django wohl ein sonderfall ist!

Ich hoffe auf schnelle Ideen und Antworten

MFG thoto

[/me]

Ich hab mir gedacht dass sollte mittels ajax und jquery gehn allerdings komm ich nicht wirklich weit, da dies in django wohl ein sonderfall ist!

Ich hatte keine AJAX-Erfahrung aber mit Django und jQuery habe ich nur einen Tag gebraucht um das Zusammenspiel zu realisieren.

Ich habe als erstes mit "from django.utils import simplejson" eine Funktion importiert um Daten als JSON bereitzustellen. In der von AJAX aufgerufenen Methode des views-Moduls habe ich in einem Fall dann ein Dictionary in derived_atts und die letzten Zeilen der Methode sehen wie folgt aus:

Code: Alles auswählen

    # Serialize the result of the database retrieval to JSON and send an application/json response
    j_atts = simplejson.dumps(derived_atts)
    return HttpResponse(j_atts, mimetype='application/json')

Die aufrufende und empfangende JavaScript-Funktion sieht wie folgt aus

Code: Alles auswählen

var calc_attributes = function(event) {
	if (!is_valid_char(event.keyCode)) { return true; }
	var data = { 
				agility: $("#att_agility").val(), 
				strength: $("#att_strength").val(),
				vitality: $("#att_vitality").val(),
				alertness: $("#att_alertness").val(),
				intelligence: $("#att_intelligence").val(),
				willpower: $("#att_willpower").val()
				};
	$.getJSON("/bdh/char_attr_change/", data,
		function(data) {
			$.each(data, function(key, value) {
				$("#att_" + key).html(value);
			});
			$("#count_attributes").html("(" + data["attr_total_count"] + ")");
		}
	);

	return false;
};

Das sollte dir eine grundsätzliche Idee geben. Ob das wirklich schön ist kann ich wegen mangelnder Erfahrung in dem Bereich nicht sagen, funktionieren tut es aber.

[djangothoto]

Vielen Dank für deinen Tipp und das Beispiel.
Ich werde nun mal probieren ob ich es auch auf mein Fall anwenden und umsetzen kann.
P.S. Ist auch mein erster Gehversuch mit AJAX xD

[djangothoto]

Hallo nochmal ne Frage, vielleicht kannst du mir da auch noch weiterhelfen:

also das befüllen mit ajax funktioniert schonmal in einfacher weise, d.h. sobald ich in meinem view zusätzlich zum request noch eine variable übergeben möchte, um das queryset zu filtern funktioniert der ajax request nicht mehr beziehungsweise mein gesamtes .js file nicht mehr ich poste es hier mal rein xD

view:

Code: Alles auswählen

def testjq(request):
    
    data = serializers.serialize('json', Komplettsystem.objects.all())
    return HttpResponse(data, mimetype='application/json')

jQuery:

Code: Alles auswählen

$(function(){
  $("select#id_celsius").change(function(){
        $.getJSON('/benchmark/testjq/',$(this).val() +"/", function(j){
          var options = '<option value="">---------- </option>';
          for (var i = 0; i < j.length; i++) {
              options += '<option value="' + parseInt(j[i].pk) + '">' + j[i].fields.name + '</option>';
          }
          $("select#id_CPU").html(options);
          $("select#id_CPU option:first").attr('selected', 'selected');
          $("select#id_CPU").attr('disabled',false);
        })
        $("select#id_celsius").attr('selected', 'selected');
  })
})

Ich hoffe einer weiss wieso es nicht funktioniert viele grüße
thoto

[djangothoto]

hallo comunity,
ich poste hier mal mein ergebnis noch mit rein, falls es jemand in zukunft benötigt xD

die js datei:

Code: Alles auswählen

$(function(){
  $("select#id_celsius").change(function(){
        $.getJSON('/benchmark/testjq/'+$(this).val()+"/", function(j){
          var options = '<option value="">---------- </option>';
          for (var i = 0; i < j.length; i++) {
              options += '<option value="' + parseInt(j[i].pk) + '">' + j[i].fields.name + '</option>';
          }
          $("select#id_CPU").html(options);
          $("select#id_CPU option:first").attr('selected', 'selected');
          $("select#id_CPU").attr('disabled',false);
        })
        $("select#id_celsius").attr('selected', 'selected');
  })
})

mein view:

Code: Alles auswählen

def testjq(request, id):
    queryset = Komplettsystem.objects.filter(celsius = id)
    data = serializers.serialize('json', [p.cpu for p in queryset])
    return HttpResponse(data, mimetype='application/json')

(man achte hier auf den übergabewert "id"

und um diesen zu übergeben muss man natürlich noch die urls anpassen:

Code: Alles auswählen

(r'^benchmark/testjq/(?P<id>\d+)/$', 'benchmarkproject.config.views.testjq'),

so bitteschön , falls es dazu fragen gibt bzw. anregungen bin ich gerne bereit weiterzuhelfen

mfg thoto