Toll Free: 877.736.4080
Email Us
Request a Meeting
Javascript components for managing Dependent Selects is starting to find use in ecommerce applications we are developing. It all started with need for updating contents of State field, on change of Country in postal address forms.
More then a year ago we started using Ajax for updating State select box options on change of Country select box value. It was a step forward but I wasn’t satisfied. Recently I had time to build a Dependent Select javascript component that takes the process of managing dependent selects boxes to the next level. Please read my blog post, OFBiz Tutorial – Dependent Selects for Prototype, to know more about it. If you are wondering about a scenario from real world, Here you go.
Below is the piece of code from the Freemarker template for the Checkout page in OFBiz ecommerce application. It renders Country and State select boxes with their options.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div>
<label for="shipToCountryGeoId">Country</label>
<select id="shipToCountryGeoId" class="required select dependentSelectMaster" title="shipToCountry" name="shipToCountryGeoId">
<option title="${country.geoId}" value="${country.geoId}">${country.get("geoName")?default(country.geoId)}</option>
<!--#list-->
</select></div>
<div id="shipToStates">
<label for="shipToStateProvinceGeoId">State</label>
<select id="shipToStateProvinceGeoId" class="required shipToCountry" name="shipToStateProvinceGeoId">
<option class="${country.geoId}" title="${stateAssoc.geoId}" value="${stateAssoc.geoId}"><#if shippingAddress.stateProvinceGeoId?has_content && shippingAddress.stateProvinceGeoId?default("") == stateAssoc.geoId> SELECTED <!--#if-->>${stateAssoc.geoName?default(stateAssoc.geoId)}</option>
<!--#list-->
<!--#if-->
<!--#list-->
</select></div> |
Following Javascript code will unobtrusively manage the relationship between Country select box (master) and State select box (slave),
1 2 3 | $('checkoutPanel').select('.dependentSelectMaster').reverse().each( function (elt) {
new Dependent( $$( '.'+elt.title ).first() , elt );
}) |
Where ‘checkoutPanel’ is Id of wrapper div that encloses checkout html form. Apply ‘dependentSelectMaster’ class to select boxes that have dependent slave elements, making them the master. Slave select box is related to its master using title and class attribute of elements, A select box is slave if it has a class applied to it that is equal to title of master select box.
The javascript code snippet traverses DOM tree looking for master select boxes. Using title attribute of master select it finds all the slaves and creates Dependent select relationship between them. Its all clean and simple.
Needless to say, you’ll need to include Prototype.js and DependentSelect.js in your webpage. I hope you will find this short OFBiz tutorial useful.
- Anil
Anil Patel is Chief Development Officer at HotWax Media as well as an OFBiz project committer, PMC member, and active community contributor. He also studies karate! Anil will join other HotWax Media employees and advisors in periodically posting thoughts here related to OFBiz, eCommerce, ERP, and related topics.
