CODEWITHSUNDEEP
pythongoogle-app-enginedynamicdrop-down-menudjango-templates
nicko
nicko

Reputation: 11

dynamic dropdown list in python GAE

I am using GAE with Python for building an app. I have 2 dropdowns 'applications' and 'versions' in my firstpage( Index.html). I am able to populate the first dropdown dynamically from the database. Based on the selection of the first dropdown, I need to populate the second. I tried with an onchange event and a javascript to capture the selection id in the first dropdown list. but i am not sure how to pass the captured onchangeid to the backend. request.get doesn't seem to work. Appreciate any help.

my main.py looks like

class MainPage(webapp.RequestHandler):
  def get(self):
      proj = db.GqlQuery("SELECT DISTINCT Applicationname FROM Dashboard")

      Appname1 = self.request.get('selvalue.value')
      proj1 = Dashboard.all().filter('Applicationname =',Appname1)

      values = {'appnames' : proj, 'vernums' : proj1}
      self.response.out.write(template.render('index.html',values))

class Dashboard(db.Model):
   Applicationname = db.StringProperty(required=True)
   Version=db.StringProperty(required=True)
   Type=db.StringProperty()
   Pagename=db.StringProperty(required=True)
   Responsetime=db.StringProperty(required=True)


class DisplayHandler(webapp.RequestHandler):
  def post(self):
      Appname=self.request.get('Applicationname')
      Vernum=self.request.get('Version')
      query = Dashboard.all().filter('Applicationname =',Appname).filter('Version =',Vernum)
      values = {'query' : query}
      self.response.out.write(template.render('response.html',values))

def main():
    application = webapp.WSGIApplication(
                                     [('/', MainPage),
                                      ('/Display', DisplayHandler)
                                     ],
                                     debug=True)
    run_wsgi_app(application)

if __name__ == "__main__":
  main()

my index.html looks like this

<html>
<head>
<title> My First Web Page </title>
<link rel="stylesheet" type="text/css" href="style.css"> </link>
<script type="text/javascript">
function myFunction(Applicationname)
{
var selvalue = document.getElementById("Applicationname");      
}

</script>
</head>

<body>
    <form action="/Display" method="post">

        <select name="Applicationname" id="Applicationname" onchange="myFunction()"  >
            <option value="Select">---Select---</option>
                {% for q in appnames %}
            <option value="{{q.Applicationname}}">{{q.Applicationname}}</option>
                {% endfor %}
</select>

 <br><br>

Select the Version number
        <select name="Version" id="Version">
            <option value="Select">---Select---</option>
            {% for r in vernums %}
            <option value="{{q.Version}}">{{r.Version}}</option>
            {% endfor %}
        </select>

    <input type="submit" value="Submit" align="center"/>
    </form>

Upvotes: 0

Views: 1778

Answers (3)

dragonx
dragonx

Reputation: 15143

I built something to do this a while ago. Read the bottom of this page for an explanation of what you'd need to do to build this:

https://github.com/dragonx/django-hier-ajax-form/blob/master/README.rst

I found out later that there's an existing project that does the same thing:

https://github.com/digi604/django-smart-selects

Upvotes: 0

Brent Washburne
Brent Washburne

Reputation: 13158

Your MainPage.get() routine looks like it's expecting a query string selvalue.value. Change your index.html like this:

<select name="Applicationname" id="Applicationname"
 onchange="document.location.href='/?selvalue.value="+this.value+"'"  >

This will cause the page to reload and show the vernums for the specified Applicationname.

This is not the only way to solve this problem, but it is the shortest.

Upvotes: 1

dnozay
dnozay

Reputation: 24324

please have a look at django-smart-select or this question: customizing admin of django to have dependent select fields

Upvotes: 0

Related Questions