Figure 1: Master Detail Page Set Dialog Box
Dreamweaver's Master/Detail page set is a handy set of behaviors to use for a drill-down functionality -- display a list of records, and click on a link in the list to view the full record. Using the behaviors, however, you typically create two pages. If you create one page with both master and detail functionality, the page will refresh each time you click on a link. In this tutorial, I'll show how to create one master/detail page that uses some very simple JavaScript to load the details section of the page dynamically using Ajax. This creates a much faster page, in that it only loads the dynamic details portion when needed, rather than the entire page. This tutorial will apply to PHP, ColdFusion, and ASP, with the concepts applicable to the other available server models that Dreamweaver now supports.
To continue with the tutorial you'll need some sample data. We will use the Microsoft sample Northwind database, which is a common database that developers have at their disposal. If you have Microsoft SQL Server or Microsoft Access, you should have a copy of the Northwind database already. If not, the SQL Server database is available here. If you are using MySQL (with PHP or ColdFusion), the included script will generate a sample table for you. Simply create a blank database (or use a test database) and run the northwindproducts.sql file included in this download. This will create the Products table from the Microsoft sample Northwind database. If you would prefer to load in the complete Northwind database for MySQL you can find it at my site at http://www.flash-remoting.com/examples/frdg/northwindmysql.zip
You'll need a data source connection to continue. For the purposes of this tutorial, I'll assume you know how to create datasources already. Create that now, and call it "connNorthwind". ColdFusion users should create this connection in the ColdFusion administrator. ASP users should first make an ODBC connection before creating the connection in Dreamweaver. PHP users can create the connection in Dreamweaver directly.
In the Bindings tab, create the recordset now using the Advanced dialog. In the dialog box for SQL, put the following SQL statement:
SELECT ProductID, ProductName, SupplierID, CategoryID, QuantityPerUnit, UnitPrice,
UnitsInStock, UnitsOnOrder, ReorderLevel, Discontinued
FROM Products
ORDER BY p.ProductID
This is simply the Products table with all fields chosen. If using the simple recordset dialog box, you can simply select all fields -- however do not select the "All" radio button. This will use "SELECT * " in the statement, which is never desirable. When you test, you should see all the records. Name the recordset rsMaster and click OK if everything tested OK.
Next, we'll create the Master/Detail page set just as we would if we were building the functionality on two pages. We'll eventually use the detail page to feed our Ajax functionality.
Open the Master Detail Page Set data object from the Insert bar or Insert menu.
Figure 1: Master Detail Page Set Dialog Box
For the master page, choose the fields ProductName and UnitPrice. Choose the ProductName field for "Link To Detail From" and the ProductID field for the "Pass Unique Key" box. Finally, type in the name of a details page. This page will be automatically created by the behavior, so name it details.cfm (or details.php, details.asp).
When you test the master page you should see 10 records:
Figure 2: Master page
Clicking the linked ProductName field will take you to the details page. If you test it out now, the details page will open when you click the link.
We will be using the details page as a section in our master page, so the first thing we need to do is to remove the html, head, and body tags so that the page acts as a functional include. Open the page and remove every except the recordset and the details display.
Next, add the following JavaScript to the head of the master page:
<script src='tfm_ajax.js' type='text/javascript'></script>
The tfm_ajax.js file looks like this:
// JavaScript Document
function processRemote(url,callback) {
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
try {
req.open("GET", url, true);
req.onreadystatechange = function() {
// only if req shows "loaded"
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
var temp = new Array();
temp.push(req.responseText);
callback.apply(callback,temp);
} else {
alert("There was a problem retrieving the XML data:\n" +
req.statusText);
}
}
};
req.send(null);
}catch(e) {
alert(e.message);
}
}
function setElement(url,id) {
var callback = function(result) {
document.getElementById(id).innerHTML = result;
}
processRemote(url, callback);
}
The processRemote() function simply uses Ajax to retrieve a document from the server and execute a callback function -- any callback function of your choice. It is a general purpose function that I use on most Ajax applications. The setElement() function is what we will call to set the details page into the master page using a callback function simply called callback().
Next, add a <div> tag to the master page that will be the container for the details page:
<div id="detailsDiv"></div>
Finally, change the link in the master page to use our setElement() function instead of calling the details page:
<a onclick="setElement('details.cfm?recordID=#rsMaster.ProductID#', 'detailsDiv')"
href="javascript:;">
#rsMaster.ProductName#</a>
<a onclick="setElement('details.php?recordID=<?php echo $row_rsMaster['ProductID']; ?>', 'detailsDiv')" href="javascript:;">
<?php echo $row_rsMaster['ProductName']; ?></a>
<a onclick="setElement('details.asp?<%= Server.HTMLEncode(MM_keepBoth) &
MM_joinChar(MM_keepBoth) & "ProductID=" & rsMaster.Fields.Item("ProductID").Value %>',
'detailsDiv')" href="javascript:;">
<%=(rsMaster.Fields.Item("ProductName").Value)%></a>
Now, if you browse the master page, you can click the links and see the details page below the master table.
Figure 3: The completed Master/Detail Ajax page
This technique can be used anywhere on your page with any div. To sum up, the steps we followed were simple:
That's it.
With a little JavaScript, a master/detail page can be made much more user friendly and functional by including both on the same page. Using Ajax makes the page faster than a complete reload of the page.