list related dropdown values django using jquery

Question

I want to display related drop down values using jquery in django. My first drop down list has languages such as python,ruby and php. The second dropdown has frameworks related to languages. For python the frameworks are django, pylons, grok. For ruby the frameworks are rails, cuba. For php the frameworks are cakephp,codeignator... I have written 3 tables names languages, framework and website.

models.py

class languages(models.Model):
    lname=models.CharField(max_length=10)
    def __unicode__(self):
        return self.lname

class framework(models.Model):
    fname=models.CharField(max_length=25)
    lang=models.ForeignKey(languages)
    def __unicode__(self):
        return self.fname

class website(models.Model):
    wname=models.CharField(max_length=30)
    framewrk=models.ForeignKey(framework)
    def __unicode__(self):
        return self.wname

Views.py

def lang_fun(request):
    if request.method=='POST':
        l=request.POST.get('l1')
        languages(lname=l).save()
        return HttpResponseRedirect('/frame_fun')
    else:
        return render(request,"languages.html")
def frame_fun(request):
    if request.method=='POST':
        la=request.POST.get('drop1')
        f=request.POST.get('f1')
        framework(lang_id=la,fname=f).save()
        return HttpResponseRedirect('/web_fun')
    else:
        stl=languages.objects.all()
        return render(request,"framework.html",{'stl':stl})
def web_fun(request):
    if request.method=='POST':
        fr=request.POST.get('drop2')
        w=request.POST.get('w1')
        website(framewrk_id=fr,wname=w).save()
        return HttpResponseRedirect('/display')
    else:
        stl=framework.objects.all()
        return render(request,"website.html",{'stl':stl})
def display(request):
    s1=languages.objects.all()
    s=website.objects.all()
    return render(request,"display.html",{'s':s,'s1':s1})

display.html

<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#drop1').on('change', function() { 
             $('#text1').val($('#drop1').val());

             });
    });
</script>
</head>
<body>
<table id="tab1" border="1px">
<tr><th>language</th><th>framework</th><th>website</th></tr>
{% for i in s %}
 <tr><td> {{i.framewrk.lang.lname}}</td>
  <td>{{i.framewrk.fname}}</td>
  <td>{{i.wname}}</td>
  </tr>
  {% endfor %}
</table>
<select id="drop1">
{% for i in s %}
<option value={{i.framewrk.fname}}>{{i.framewrk.lang.lname}}</option>
{% endfor %}
<input type="text" id="text1">
</body>
</html>

In my views.py I have added frameworks and websites for languages. In my display.html, I have displayed the corresponding frameworks and websites for languages. Am accessing the languages in dropdown, the languages are repeated depends on the number of frameworks it contains. I want it without repetition. And I can display the frameworks for languages one by one in text box. I want it to be in dropdon. When I select python I want the frameworks of python to be displayed in another drop down. Can you help me how to write the html and jquery. Thanks in advance. Am learning python. So please guide me.

score 1 · Answer 1 · edited May 23 '17 at 12:23

Its relatively easy task, but i would say, that you have tried to do too much with your own tools, rather than using best approach made possible by django. Writing all this out as example takes way too much time, so i'll outline the things i would do to achieve same thing.

1) Use django forms for displaying forms and saving/handing model data. You can create single form with different fields for different selectboxes. You will need conditional fields, because choices in one field depend on choices in another field. See this post about using conditional forms : (link). In your case you will need to do something like access forms bound data in form init method and read selected language/framework value from it and then set framework/website choices based on those values.

2) Field change event is good way to refresh form contents when changes are made. But don't POST the form then. You can do form GET on the same address.

3) In view, You can pass both request.POST or request.GET as initial parameter to form class. In both cases this will become form's bound data - the data you will use in form's init method to determine available choices.

4)In case of request.GET, just return the same form again. You can return just rendered form element and on webpage you can use that rendered html to swap existing form for it. Do not forget to use jquery.live method to bind 'change' event to form fields, cause otherwise the events would not work after swapping out the form.

5) use POST only when you are actually posting the form.

What this willget you:

1) You will use only one view instead of 4. all this can be done within one relatively simple view.

2) all logic related to fields values/choices will be in form class, where it is it's best place imo.

3) You will learn to use OOP, which will benefit you alot if you plan to stick with Django.

4) As sidenote, you should check out this : link

Alan

thanku for your brief and good guidance... as I am new to python my team lead asked to do like this .Can you give any suggestions about how to do like this — Madanika, Nov 12 '13 at 10:38
Well, start with reading about django forms. you need to create form based on django.forms.Form not forms.ModelForm. All the options are separate fields... then continue on from there. I doubt anybody has time to do your work for you. So you'll have to figure it out based on the answers you get here. Like i said - writing complete answer takes too much time. — Odif Yltsaeb, Nov 12 '13 at 10:46

list related dropdown values django using jquery

1 Answers1