Ajax example: Three Dependent Listboxes & Autofill

Description

This example demonstrates how to implement three dependent dependent drop-down menus (dependent listboxes) using Ajax. Additionally, company information is automatically displayed based on the selection in the last listbox.

Usage

  1. Select Category "Computers and Internet". The subcategory listbox populates automatically without the page being refreshed.
  2. Select Subcategory "Software". The company listbox populates automatically without the page being refreshed.
  3. Select a Company. Company information is displayed without the page being refreshed.

Steps to recreate

  1. Use the Forms tab of the Toolbox to create a Record form on the page. In the "Add Record Form" dialog set the following properties:
  2. Rename the three listboxes to s_category_id, s_subcategory_id and s_item_id and while in the design mode, modify listbox properties as follows:
  3. Create record form "directory_items_states" using the Forms tab of the Toolbox.
    In the Add Record Form dialog specify the following:
  4. Rename the Labels on the directory_items_states form to be: item_name, address, sity, zip, state_name, phone, note, email, url. These labels are placeholders for the name, address, sity, zip etc. information.
  5. Switch to HTML mode and add span elements next to each of the labels:
    <span id="directory_items_statesitem_name"> </span>
    <span id="directory_items_statesaddress"> </span>
    <span id="directory_items_statescity"> </span>
    etc.
    
  6. Run the Feature Builder available under the Builders tab of the Toolbox.
  7. Run the Feature Builder again to create the second pair of dependent listboxes.
  8. Run the Feature Builder once again to create Ajax Autofill feature.
  9. Open s_item_id features and set Start event for the Ajax Autofill feature you’ve created.
    Start event:
    directory_items_statesSearchs_subcategory_id.onchange;directory_items_statesSearchs_subcategory_idPTDependantListBox2.onsuccess;
    directory_items_statesSearchs_subcategory_idPTDependantListBox2.onfailure;directory_items_statesSearchs_item_id.onchange;
    directory_items_statesSearchs_item_idPTDependentListBox3.onsuccess;directory_items_statesSearchs_item_idPTDependentListBox3.onfailure;
  10. Open Ajax Autofill feature’s service page (services/directory_items page in the example) and modify its html code to look like:
    <!-- BEGIN Grid directory_items -->[
    <!-- BEGIN Row -->{
    "item_id":"",
    "category_id":"",
    "item_name":"",
    "address":"",
    "city":"",
    "zip":"",
    "state_name":"",
    "phone":"",
    "note":"",
    "email":"",
    "url":""
    }<!-- END Row -->
    <!-- BEGIN Separator -->,<!-- END Separator -->
    <!-- BEGIN NoRecords -->{
    "item_id":"",
    "category_id":"",
    "item_name":"",
    "address":"",
    "city":"",
    "zip":"",
    "state_name":"",
    "phone":"",
    "note":"",
    "email":"",
    "url":""
    }<!-- END NoRecords -->
    ]<!-- END Grid directory_items -->
    
  11. Open s_subcategory_id control features and add ClientCustomCode feature using the directory_items_statesSearchs_subcategory_idPTDependantListBox2.onstart as a start event.
    var lb = document.getElementById("directory_items_statesSearchs_subcategory_id");
    lb.options[0].text = "please wait";
    lb.disabled = true;
    lb = document.getElementById("directory_items_statesSearchs_item_id");
    lb.options[0].text = "please wait";
    lb.disabled = true;
    
  12. Add another ClientCustomCode2 feature to the same s_subcategory_id control using directory_items_statesSearchs_subcategory_idPTDependantListBox2.onsuccess;directory_items_statesSearchs_subcategory_idPTDependantListBox2.onfailure; as a Start event.
    var lb = document.getElementById("directory_items_statesSearchs_subcategory_id");
    lb.options[0].text = "Select Value";
    lb.disabled = false;
    directory_items_statesSearchs_item_idPTDependentListBox3_start(lb);
    lb = document.getElementById("directory_items_statesSearchs_item_id");
    lb.options[0].text = "Select Value";
    lb.disabled = false;
    
  13. Open s_item_id control features and add two ClientCustomCode features as well.
  14. Make cosmetic changes as needed by modifying the text and captions within the HTML.

Database Tables used:

Database: Internet

Tables: store_categories, store_products