In chapter 1, we built the detail page that retrieves the description from the database and pulls it to list_items.php
In chapter 2, we built list_items.php and left it almost finished: It already had the required div's for presentation and the repeat region to list the items. However, it needs some more code to make it dynamic and connect to item_details.php.
Remember something we talked about in chapter 2:
OK let's start.
- We used divDynamicID as id for the hidden layer: We'll use it again here
- The name of the parameter required by item_details.php to get the detailed desciption: 'id_item'
- The first step is linking to jah.js, the file that will make the ahah connection to item_details.php. Add this code inside your document's head:
- Select the whole link (you can click on the <a> tag on the status bar), open the Behaviors panel and Select 'Show/Hide Layers'. Select the div that you will see named 'divDynamicID' and press the "Show" button:
- Click ok and make sure that in the behaviors panel it is attached to the onMouseOver event:
- Repeat steps 3 and 4 but, this time, select 'hide' instead of 'show' and check that the behavior is attached to the onmouseout event:
In the next steps, we'll make the call to jah.js function (this is the part you've been waiting for!)
The method is quite simple, the function calls have this structure:
Where 'urlToGetData' is the file that will return the data (it will be item_details.php, that we created in chapter 1) and 'targetDiv' is the id of the div where the retrieved data will be shown (our hidden layers).
in the dialog window, type this:
This way, we have written an url to our item_details.php document and add the provisional code to pass a param value.
Make sure the onMouseOver is selected for this behavior:
At this point, we've got almost everything we need. However, it won't work. Why?
If you execute the document and check the html, you'll see that all the links point to the same url (item_details.php?id_item=DynamicID) and all the hidden divs have the same name (divDynamicID).
How can make all the divs have a different id?. Well, we have a field in our database that can help: id_item.
So it's time for some search and replace: We shall replace de text 'DynamicID' with server side code to display the id of each field. Since it is a dynamic value, the divs will have different id's when the code is parsed. Besides, the URL param will also point to the item_details.php file passing the correct value:
(Dirty trick: If you don't want to write the server code by hand, drag the id_item field from the Data Bindings panel into an empty place on your document, cut the code written by Dreamweaver and paste it into the 'Replace' textarea in the dialog window).
That is: All the dynamic values are parsed to point to the correct div for each block (div1, div2, div3 and so on). At the same time, the first parameter in jah() points to the url passing the item id.
Click here to download the sample files. You will find:
- ahah_list_items.php: The php version of the file (it won't work because of DB connection, but it will let you see the original code)
- ahah_list_items.html: A working version of previous file, you can use it to see the code at work.
- ahah_item_details.php: a modified version of the file explained in chapter 1: it uses some predefined values, so you can test it without a database.
- jah.js: the script file
To test them, place them into your server root folder and run http://localhost/ahah_list_items.html
Also, you can click here to see a running demo