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 9 years ago
GREAT!!!
I was looking for this solution all day!