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:
   • Name: directory_items_statesSearch
   • Rows: 3
   • Listbox as type of controls
   • Uncheck Allow Insert, Allow Update, Allow Delete options
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:
   
   • For the s_category_id listbox, set the Connection property to InternetDB, select directory_categories in the Data Source property, category_id in the Bound Column property, category_name in the Text Column property and Single in the Data Type property. Then open the 'Data Source' dialog and add the following Where parameters:
     - category_id_parent (is null) , with the Parameter Source set to 1 and Parameter Source Type set to Expression. Also set And/Or property to Or.
     - category_id_parent equals(=) 0, with the Parameter Source Type set to Expression.
   • For the s_subcategory_id listbox, set the Connection property to InternetDB, select directory_categories in the Data Source property, category_id in the Bound Column property, category_name in the Text Column property and Single in the Data Type property. Then open the 'Data Source' dialog and add the following Where parameter:
     - category_id equals(=) 0, Parameter Source Type set to Expression
   • For the s_item_id listbox, set the Connection property to InternetDB , select directory_items in the Data Source property, item_id in the Bound Column property, item_name in the Text Column property and Single in the Data Type property. Then open the 'Data Source' dialog and create the following Where parameter:
     - category_id equals(=) 0, with Parameter Source Type set to Expression
3. Create record form "directory_items_states" using the Forms tab of the Toolbox.
   In the Add Record Form dialog specify the following:
   • set the number of rows to 9
   • select Label as the type of controls
   • uncheck Allow Insert, Allow Update, Allow Delete options
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.
   
   • On Step 1 select Dependent ListBoxes option
   • On Step 2 select Internet database
   • On Step 3 use the following settings:
     Master ListBox: s_category_id
     Slave Listbox: s_subcategory_id
     DataSource: directory_categories
     Bound Column: category_id
     Text Column: category_name
     Dependent Field: category_id_parent
     
7. Run the Feature Builder again to create the second pair of dependent listboxes.
   • On Step 1 select Dependent ListBoxes option
   • On Step 2 select Internet database
   • On Step 3 use the following settings:
     Master ListBox: s_subcategory_id
     Slave Listbox: s_item_id
     DataSource: directory_items
     Bound Column: item_id
     Text Column: item_name
     Dependent Field: category_id
     
8. Run the Feature Builder once again to create Ajax Autofill feature.
   • On Step 1 select Autofill option
   • On Step 2 select Internet database
   • On Step 3 use the following settings:
     Target Control: s_item_id
     DataSource: click Build Query button and join directory_items and states tables by state_id field
     Search Field: item_id
     
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.
    • ClientCustomCode1:
      Start event: directory_items_statesSearchs_item_idPTDependentListBox3.onstart;
      

      var lb = document.getElementById("directory_items_statesSearchs_item_id");
      lb.options[0].text = "please wait";
      lb.disabled = true;
      

    • ClientCustomCode2:
      Start event: directory_items_statesSearchs_item_idPTDependentListBox3.onfailure;directory_items_statesSearchs_item_idPTDependentListBox3.onsuccess;
      

      var lb = document.getElementById("directory_items_statesSearchs_item_id");
      lb.options[0].text = "Select Value";
      lb.disabled = false;
      

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