Ajax example: Two Dependent Listboxes & Autofill

Description

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

Usage

1. Select a category. The product listbox populates automatically without the page being refreshed.
2. Select a product. Product information is displayed without the page being refreshed.

Steps to recreate

1. Add a record form using the Forms tab in the Toolbox panel. In the "Add Record Form" dialog set the following properties:
   • store_productsSearch in the Name field
   • set the number of rows to 2
   • select Listbox as the type of controls
   • uncheck Allow Insert, Allow Update, Allow Delete options
2. While in the Design mode, modify listbox properties as follows:
   • For the s_category_id listbox, set the Connection property to InternetDB , select store_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.
   • For the s_product_id Listbox, set the Connection property to InternetDB , select store_products in the Data Source property, product_id in the Bound Column property, product_name in the Text Column Property and integer in the Data Type property. Then open the Visual Query Builder by clicking the [...] button next to the Data Source property, add Where parameter with the condition: product_id equals(=) 0 and set the Parameter Source Type to Expression.<>
3. Add another record form (store_products ) to your page using the Forms tab in the Toolbox panel. In the "Add Record Form" dialog:
   • specify store_products in the Name field
   • set the number of rows to 2
   • select Label type of controls
   • uncheck Allow Insert, Allow Update, Allow Delete options
4. Rename Label1 to price and Label2 to description.
5. Use the Insert Row option to insert a row between the price and description rows.
6. Add Image control the new row using the image option available in the Forms Tab of the Toolbox, then name it image_url
7. Switch to the HTML mode and add the span tags after the product_name, price and product_description labels as shown in the example:

   <span id="store_productsproduct_name"></span>
   <span id="store_productsprice"></span>
   <span id="store_productsdescription"></span>
   

8. Run the Feature Builder to create Dependent Listboxes:
   • On Step 1 select the Dependent ListBoxes option
   • On Step 2 select the Internet database
   • On Step 3 use the following settings:
     Master ListBox: s_category_id
     Slave Listbox: s_product_id
     DataSource: store_products
     Bound Column: product_id
     Text Column: product_name
     Dependent Field: category_id
9. Run the Feature Builder again, this time to create AutoFill feature:
   • On Step 1 select the AutoFill option
   • On Step 2 select the Internet database
   • On Step 3 use the following settings:
     Target Control: product_id
     DataSource: store_products
     Search Field: product_id

     Filled Controls:
     Control Name: price
     Field Name: price
     Target: value

     Control Name: image_url
     Field Name: image_url
     Target: value

     Control Name: description
     Field Name: description
     Target: value
     

10. Open the features property dialog for  the s_product_id control and add the Ajax Condition feature to determine whether a product is selected in the s_product_id listbox.
    Condition: equals(=)
    Name: store_productsSearchs_product_id
    Source Type: Control
    Name: ""
    Source Type: Expression
    Start event:
    store_productsSearch.onload;store_productsSearchs_product_id.onchange;store_productsSearchs_product_idPTDependentListBox_s_product_id.onsuccess;
11. In the same s_product_id features dialog add Ajax Hide-Show feature to be used to hide store_products form when the above Condition is false (no product is selected in the s_product_id listbox) and show the form only when the Condition is true (there is some product selected in the s_product_id listbox).
12. Make cosmetic changes as needed by modifying the text and captions within the HTML.

Database Tables used:

Database: Internet

Tables: store_categories, store_products