Dynamic Dropdowns with Data Bridge 2.0

Step 1: Create a Dreamweaver PHP site

Your Dreamweaver site should include a local testing server set to use PHP as a server model. After the site is created, follow these steps:

1. Open the tutorial files, Dynamic Drop-downs Tutorial.zip.
   
2. Add all files and folders contained in the expanded zip archive to the site root.

Step 2: Set-up MySQL database

Using phpMyAdmin or a similar MySQL management tool, follow these steps:

1. Create a new database called nwbsa.
   This database has two tables, towns and teams, that you will use in the tutorial.
   
2. Import the file nwbsa.sql, found in the files added to the Dreamweaver site in the source folder.

Your preliminary set-up is now complete.

Step 1: Add form and form elements

We'll start by adding a basic form to the page and then inserting a form with the required properties.

1. Open the file, main.php.
   
2. Place your cursor in the <div id="mainContent"> tag.
   
3. From the Insert menu, Form category, choose Form.
   
4. In the Property inspector, set the Method attribute to POST.
   
5. From the Insert menu, choose Label.
   
6. Within the <label> tag, enter Towns: followed by a space.
   
7. Place your cursor after the closing </label> tag, choose Select from the Insert menu, Form category.
   
8. With the <select> tag highlighted, in the Property inspector Name field, enter towns.

Step 2: Add a div tag for second select list

You'll need to provide an empty <div> to hold the dynamically inserted (and populated) second select list. Make sure to give this div an ID.

1. Place your cursor after the closing </form> tag.
   
2. In Code view, enter the following code:

   <div id="childSelect"></div>

   
   
3. Save your page.

Step 1: Add database connection

Before we can add a recordset to the page, we'll need to establish a connection to the database.

1. Choose Windows > Databases.
   
2. Click Add (+) and select Dynamic MySQLi Connection.
   
3. In the Dynamic MySQLi Connection dialog, insert the following values:
   
   1. Connection name: connNWBSA
      
   2. Charset: default
      
   3. MySQL server: localhost
      
   4. User name: [YOUR_DATABASE_USER_NAME]
      
   5. Password: [YOUR_DATABASE_PASSWORD]

   
   

4. Click Select next to the Database field, and from the dialog list, choose nwbsa.
   
5. Click OK.

Step 2: Create rsTowns recordset

Now that the recordset is available to us, we'll use it to dynamically populate the select list.

1. From the Server Behaviors panel, click Add (+).
   
2. Choose Recordset.
   
3. In the Recordset dialog, make sure the Simple interface is displayed (click Simple if the Advanced UI is shown), and set the following values:
   
   1. Name: rsTowns
      
   2. Connection: connNWBSA
      
   3. Table: towns
      
   4. Columns: All
      
   5. Filter: None
      
   6. Sort: townName Ascending

   
   

4. Click OK.

Step 3: Bind dynamic data to list

With our rsTowns recordset defined, we can now bind the dynamic data to the select list.

1. Choose the <select id="towns"> list.
   
2. In the Property inspector, click the Dynamic button.
   
3. When the WebAssist MySQLi Dynamic List/Menu dialog opens, first make sure Menu is set to "towns" in form 0.
   We'll add a static option that will appear before the dynamic data to help guide the user.
   
4. For Static Options, click Add (+).
   
5. Set Value to None.
   
6. Set Label to First choose a town and press Tab.
   
7. From the Options from recordset list, choose rsTowns.
   We'll match the town name in the teams data to the town name selected in this list.
   
8. Set both Values and Labels to townName.
   
9. Click OK.
   
10. Save your page.

Step 1: Add form elements

This secondary page will eventually be integrated into the main page, so here we'll add the HTML for the second select list. You'll notice we don't need to add a new form tag, because the child page is not independent and the body elements will be inserted into the form within the main page.
Because WebAssist refers to child pages used by Framework Builder as plugins, I like to store such pages in a folder with that name.

1. Open the file, plugins/childSelect.php.
   
2. Place your cursor in the <body> tag.
   
3. From the Insert menu, Form category, choose Label.
   
4. Within the <label> tag, enter Teams: followed by a space.
   
5. Place your cursor after the closing </label> tag, and choose Select from the Insert menu, Form category.
   
6. In the Propery inspector Name field, enter teams.
   
7. Save your page.

Step 1: Adding the Database Connection

As with the main page, we'll need to establish a connection to the database. Since it's already been created, all we need to do is add it to the page.

1. Place your cursor at the top of the page in Code view.
   
2. From the Databases panel, select connNWBSA.
   
3. Right click and choose Insert code.
   
4. Save your page.

Step 2: Define child page recordset

Again, we'll dynamically populate the select list - but for the child page, we'll need to filter our data according to a specific variable, the value of the towns select list POSTed to the page.

1. From the Server Behaviors panel, click Add (+).
   
2. Choose Recordset.
   
3. In the Recordset dialog, make sure the Simple interface is displayed, and set the following values:
   
   1. Name: rsTeams
      
   2. Connection: connNWBSA
      
   3. Table: teams
      
   4. Columns: All
      
   5. Filter: teamTown = Form Variable towns
      
   6. Sort: teamName Ascending

   
   

4. Click OK.

Step 3: Bind dynamic data to child page select list

With our rsTeams recordset defined, we can now bind the dynamic data to the select list on the child page.

1. Choose the <select id="teams"> list.
   
2. In the Property inspector, click the Dynamic button.
   
3. When the WebAssist MySQLi Dynamic List/Menu dialog opens, first make sure Menu is set to select "teams".
   Again, we'll add a static option that will appear before the dynamic data to help the user.
   
4. For Static Options, click Add (+).
   
5. Set Value to 0.
   
6. Set Label to Then choose a team and press Tab.
   
7. From the Options from recordset list, choose rsTeams.
   
8. Set both Values and Labels to teamName.
   
9. Click OK.
   
10. Save your page.

Step 4: Show static option conditionally.

To keep our user experience clean, we'll use a WebAssist server behavior to only show the static option if the rsTeams recordset is empty -- which will only be the case if a town has not been selected.

1. Select the static <option> inserted in the previous step.
   
2. Choose WebAssist > MySQLi > Show Region > Show if Recordset Empty.
   
3. In the WebAssist MySQLi Show if Recordset Empty dialog, make sure rsTeams is selected and click OK.
   
4. Save your page.

There appears to be an issue where sometimes Dreamweaver will not place the closing PHP code in the proper position. Make sure that the following code is placed directly after the closing </option> tag:

<?php } // Show if mysqli recordset empty ?>

Step 1: Connect main page to child page

In this step, we'll use a feature of Framework Builder to insert the child page into the main page. Note that this step will not insert the needed Ajax code—we'll do that in the next one.

1. Place cursor in the <div id="childSelect"> tag.
   
2. Choose WebAssist > Framework Builder > Plug-in > Insert Plug-in
   
3. In the Framework: Insert Plug-in dialog, set Trigger to before page load and, for Plug-in Source, click the folder icon and navigate to the plugins folder and choose childSelect.php.
   
4. Click OK.
   The extension will insert code in two places in your HTML, as well as above the <html> tag. In addition to adding code within the <div> tag, it also adds a line of code just before the closing </head> tag. This code will bring in any code in the <head> section of the plugin page. In this case, doing so would repeat the <meta charset="UTF-8"> tag, so it's best to remove the inserted PHP code.
   
5. Highlight the PHP code line directly above the closing </head> tag that starts " <?php echo((isset($WA_childSelect…" and delete it.
   
6. Save your page.

Step 2: Add Ajax Functionality

Now it's time to bring Ajax into play. We'll use a Framework Builder feature found in Dreamweaver's Behavior panel, used for inserting client-side behaviors to the page.

1. Select the <select id="towns"> tag.
   
2. Choose Windows > Behaviors to open the Behaviors panel.
   
3. From the Behaviors panel, choose WebAssist > Framework Builder > Load Plugin to Div.
   
4. In the Load Plugin to Div dialog, set the following values:
   
   1. Submit form: forms[0]
      
   2. Plugin: plugins/childSelect.php
      
   3. Load into: div: childSelect

   
   

5. Click OK.
   
6. Save the page.

Dreamweaver will insert a script tag to load Ajax.js in the <head> section of the page as well as add an onChange attribute to the chosen <select> tag. When executed, this code will asynchronously—without refreshing the page—load the child select list into the main page, based on the option chosen from the parent select list. The coding is now complete and we're ready to test the page!

Step 3: Test your work

All right, you did it! Now, let's test your work!

1. From the main.php page, click the Real-time Preview icon on the lower right of the document window and select your preferred browser.
   
2. When the page displays, choose a town from the first select list.
   
3. After the second select list populates, choose a team.
   Note that the static option "Then select a team" is no longer visible after a town has been selected and the rsTeam recordset is not empty.

Congratulations! You've successfully used Data Bridge 2.0 to create dynamic drop-downs. The method we used to accomplish this is extremely powerful and can be used to power all sorts of Ajax functionality.