Now it works perfectly. It's easy to work with drop down list using Ajax.
The main differenct with previous version is I used empty instead of remove so second drop box stays on the page which give us more natural feelings when it's updated.
onchange="jQuery(maker_name).remove();
onchange="jQuery('#maker_name').empty();
Working Sample
http://ochiba.pythonanywhere.com/dropdown/default/index

MODEL - db.py
Add the following at the bottom
# Foreign key is used for good practice but not required to use ajax casading drop down
db.define_table('Category',
Field('Name'))
db.define_table('Maker',
Field('Name'),
Field('Category_ID', db.Category),
Field('Note', 'text'))
db.define_table('Product',
Field('Part_Number'),
Field('Maker_ID', db.Maker),
Field('List_Price', 'decimal(13,2)'),
Field('Special_Price', 'decimal(13,2)'))
db.Category.Name.requires = IS_NOT_EMPTY()
db.Maker.Name.requires = IS_NOT_EMPTY()
db.Maker.Category_ID.requires = IS_IN_DB(db, db.Category.id, '%(Name)s')
db.Product.Part_Number.requires = IS_NOT_EMPTY()
db.Product.Maker_ID.requires = IS_IN_DB(db, db.Maker.id, '%(Name)s')
# Insert test data - you can delete the line below if it's not necessary
if db(db.Category.id>0).count() == 0:
db.Category.insert(Name='PC')
db.Category.insert(Name='Smart Phone')
db.Maker.insert(Name='Toshiba', Category_ID=1, Note='Good Maker')
db.Maker.insert(Name='HP', Category_ID=1, Note='Good Maker')
db.Maker.insert(Name='Dell', Category_ID=1, Note='Good Maker')
db.Maker.insert(Name='Apple', Category_ID=2, Note='Good Maker')
db.Maker.insert(Name='Samsung', Category_ID=2, Note='Good Maker')
db.Product.insert(Part_Number='Toshiba Product A', Maker_ID=1, List_Price=1000, Special_Price=500)
db.Product.insert(Part_Number='Toshiba Product B', Maker_ID=1, List_Price=1500, Special_Price=1000)
db.Product.insert(Part_Number='Toshiba Product C', Maker_ID=1, List_Price=2000, Special_Price=1500)
db.Product.insert(Part_Number='Toshiba Product D', Maker_ID=1, List_Price=2500, Special_Price=2000)
db.Product.insert(Part_Number='Toshiba Product E', Maker_ID=1, List_Price=3000, Special_Price=2500)
db.Product.insert(Part_Number='Toshiba Product F', Maker_ID=1, List_Price=3500, Special_Price=3500)
db.Product.insert(Part_Number='HP Product A', Maker_ID=2, List_Price=1000, Special_Price=500)
db.Product.insert(Part_Number='HP Product B', Maker_ID=2, List_Price=1500, Special_Price=1000)
db.Product.insert(Part_Number='HP Product C', Maker_ID=2, List_Price=2000, Special_Price=1500)
db.Product.insert(Part_Number='HP Product D', Maker_ID=2, List_Price=2500, Special_Price=2000)
db.Product.insert(Part_Number='HP Product E', Maker_ID=2, List_Price=3000, Special_Price=2500)
db.Product.insert(Part_Number='HP Product F', Maker_ID=2, List_Price=3500, Special_Price=3500)
db.Product.insert(Part_Number='Dell Product A', Maker_ID=3, List_Price=1000, Special_Price=500)
db.Product.insert(Part_Number='Dell Product B', Maker_ID=3, List_Price=1500, Special_Price=1000)
db.Product.insert(Part_Number='Dell Product C', Maker_ID=3, List_Price=2000, Special_Price=1500)
db.Product.insert(Part_Number='Dell Product D', Maker_ID=3, List_Price=2500, Special_Price=2000)
db.Product.insert(Part_Number='Dell Product E', Maker_ID=3, List_Price=3000, Special_Price=2500)
db.Product.insert(Part_Number='Dell Product F', Maker_ID=3, List_Price=3500, Special_Price=3500)
db.Product.insert(Part_Number='Apple Product A', Maker_ID=4, List_Price=1000, Special_Price=500)
db.Product.insert(Part_Number='Apple Product B', Maker_ID=4, List_Price=1500, Special_Price=1000)
db.Product.insert(Part_Number='Apple Product C', Maker_ID=4, List_Price=2000, Special_Price=1500)
db.Product.insert(Part_Number='Apple Product D', Maker_ID=4, List_Price=2500, Special_Price=2000)
db.Product.insert(Part_Number='Apple Product E', Maker_ID=4, List_Price=3000, Special_Price=2500)
db.Product.insert(Part_Number='Apple Product F', Maker_ID=4, List_Price=3500, Special_Price=3500)
db.Product.insert(Part_Number='Samsung Product A', Maker_ID=5, List_Price=1000, Special_Price=500)
db.Product.insert(Part_Number='Samsung Product B', Maker_ID=5, List_Price=1500, Special_Price=1000)
db.Product.insert(Part_Number='Samsung Product C', Maker_ID=5, List_Price=2000, Special_Price=1500)
db.Product.insert(Part_Number='Samsung Product D', Maker_ID=5, List_Price=2500, Special_Price=2000)
db.Product.insert(Part_Number='Samsung Product E', Maker_ID=5, List_Price=3000, Special_Price=2500)
db.Product.insert(Part_Number='Samsung Product F', Maker_ID=5, List_Price=3500, Special_Price=3500)
CONTROLLER - default.py
# -*- coding: utf-8 -*-
def index():
if request.vars.maker_name:
lists = db(db.Product.Maker_ID==request.vars.maker_name).select(db.Product.ALL)
themakers = db(db.Maker.id==request.vars.maker_name).select(db.Maker.ALL)
else:
lists = db(db.Product.Maker_ID==1).select(db.Product.ALL)
themakers = db(db.Maker.id==1).select(db.Maker.ALL)
categories = db().select(db.Category.ALL)
if request.vars.category_name:
makers = db(db.Maker.Category_ID==request.vars.category_name).select(db.Maker.ALL)
else:
makers = db(db.Maker.Category_ID==1).select(db.Maker.ALL)
return dict(lists=lists, categories=categories, makers=makers, themakers=themakers)
def maker():
makers = db(db.Maker.Category_ID==request.vars.category_name).select(db.Maker.ALL)
result = ""
for maker in makers:
result += "<option value='" + str(maker.id) + "'>" + maker.Name + "</option>"
return XML(result)
VIEW - default/index.html
{{extend 'layout.html'}}
<form enctype="multipart/form-data" action="{{URL()}}" method="post">
<select name='category_name'
onchange="jQuery('#maker_name').empty();
ajax('maker', ['category_name'], 'maker_name');">
{{for category in categories:}}
<option value="{{=category.id}}"
{{=" selected='selected'" if str(category.id)==request.vars.category_name else ""}}>
{{=category.Name}}
</option>
{{pass}}
</select>
<select id='maker_name' name='maker_name' >
{{for maker in makers:}}
<option value="{{=maker.id}}"
{{=XML(" selected='selected'") if str(maker.id)==request.vars.maker_name else ""}}>
{{=maker.Name}}</option>
{{pass}}
</select>
<input type="submit" value='Submit'>
</form>
<hr>
<div id="left_price">
<div id="effective_price">
{{for themaker in themakers:}}
<p>{{=themaker.Note}}</p>
{{pass}}
</div>
<table class="pricetable">
<tr>
<th class="priceleft">Part Number</th>
<th class="priceright">List ($)</th>
<th class="priceright">Special ($)</th>
</tr>
</table>
<div id="table_price">
<table class="pricetable">
{{for list in lists:}}
<tr>
<td class="priceleft">{{=list.Part_Number}}</td>
<td class="priceright">{{=list.List_Price}}</td>
<td class="priceright">{{=list.Special_Price}}</td>
</tr>
{{pass}}
</table>
</div>
</div>
<div id="right_price">
</div>


Comments (1)
0
guchi 10 years ago
GREAT!!!
I was looking for this solution all day!