close ad
Databridge V2 with MySQLi support IS Now Available!
open ad
View Menu

Web development tutorial

Dynamic Dropdowns with Data Bridge 2.0

Tutorial created by jlowery

Categories: Data Bridge

rating

This tutorial demonstrates how to use Data Bridge 2.0 to implement dynamic drop-downs, where a choice in one select list populates another select list.

Data Bridge 2.0 uses Ajax (Asynchronous JavaScript and XML) to dynamically modify portions of the web page without refreshing. This allows the selection of an item in one list to entirely update a second list. This Data Bridge 2.0 feature is extremely powerful and can be used in many ways, including the replacing the functionality of the Dynamic Dropdowns extension, as shown in this tutorial.

arrow downWhat will you need to start?

  1. Dreamweaver CS3 or newer
  2. Data Bridge 2.0 or higher, installed and activated in Dreamweaver
  3. PHP site defined in Dreamweaver
  4. SQL sample files to use with this tutorial: nwbsa.sql
  5. PHP sample files to use with this tutorial: Dynamic Drop-downs Tutorial.zip


Using the Data Bridge extension, you will learn how to use one select list to dynamically populate a second select list.

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.

arrow downAdd HTML to Main Page

In this section, you'll insert the needed HTML for the primary page.

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.

arrow downIncorporate Recordset on the Main Page

Now it's time to integrate the dynamic data from your database. To do this, you'll need to first add a recordset and then dynamically populate your select list.

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.

arrow downAdd HTML to the Child Page

In this section, we'll work with the static, HTML elements of the child page. The child page will hold the second select list and, eventually, be integrated into the main 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.

arrow downDefining and Applying the Child Page Recordset

Time to get dynamic on the child page. Here, as with the main page, we'll establish the database connection, create the recordset and then bind it to the select list.

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 ?>

arrow downIntegrate Child Page and Add Ajax Functionality

In the final two steps, we'll use the one feature of the WebAssist Framework Builder extension to dynamically insert the contents of the child page into the main page. Then, we'll add the necessary Ajax-related code via another feature of that extension.

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.

arrow downReviews and comments

Comments will be sent to the author of this tutorial and may not be answered immediately. For general help from WebAssist, please visit technical support.

Sign in to add comments
rating
rating

georgina_barrett_187762: 8 Months, 2 Weeks, 5 Days, 23 Hours, 30 Minutes ago

Clear and concise tutorial - I got it to work first time. Thank you.

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.