A little while ago I was trying to figure out how I was going to create a dynamic webpage, based on a selection a user made, which would have to be determined using JavaScript. I know it's a mouthful but I did find a solution. This tutorial assumes you already know how to create XML and XSLT files and understand how these two work together to produce HTML output.

If you're looking for a nice XML editor I suggest you try XML Writer.

The First Problem

I'll try to set this up as easy as possible, so let's assume that this is a website about fruit. The user can select the fruits their interested in and then click next to see information on those fruits. The first problem is that I can't use PHP, or any type of real database.

The First Solution

I decided that I would use XML and XSLT to work this problem out. The XML would hold all the information about the fruits and the XSLT file would dynamically generate the HTML for the fruit their interested in. All [good] browsers today can do this transformation automatically.

The Second Problem

I won't know beforehand which fruits the user will select so how can I generate an HTML output page with their fruit selections without somehow checking to see which fruits they selected. This has to be done at runtime.

The Second Solution

I know from previous experience that you can pass parameters to an XSLT file before performing the transformation but this would need to be performed via a browser which is another challenge.

Fortunately, I was able to find JavaScript code that instantiates an XSLT processor which will allow you to set parameters for the XSLT file. Now I just needed to put it all together.

The Entire Solution

XSLT

In the XSLT file you will need to specify the names of the parameters that will be passed in. For this example, the user can select a maximum of five fruits, so I have to ensure that my XSLT document accepts at least 5 parameters. See Figure 1.

JavaScript

The JavaScript will instantiate the XSLT processor and set the parameters so think about what needs to be passed into this function. For this case I will need to pass in the URL to the XML document, XSL Document, the ID of the DIV I want to update, and the List of Fruits selected. The way it works is that the processor will be created, the parameters will be set (i.e. the fruits), the transformation will take place and a DIV element on the page will be set to the output of the transformation.

The part that you're probably interested in is the addParameter for IE and the setParameter for Mozilla browsers. In this case the script will loop through the fruitList which is an array and set the parameters in the XSLT document accordingly.

When the transformation is done you can see that the content for the divID you pass in will be set to the transformation output. See Figure 2.

View the script source.

HTML

Finally you need to setup the HTML file that will call the transformation function and pass along the proper parameters. Note: If the JavaScript above is in a separate file then you'll obviously need to include a reference to it in order to make this work.

For this example, let's assume that the selections made by the user have been pulled out and are held by the fruitList array. Next you'll need a DIV element with an id, for this example will call the id 'results'. So it would look like <div id="results"></div>.

Finally, you'll need to add the JavaScript to call the transform function, passing in the required parameters. We'll assume that the fruits XML and XSLT file are in the same location as the HTML file. See Figure 3.

Well Oiled Machine

In the end, the user will select the fruits their interested in. Using JavaScript one can determine which fruits the user selected and place them in an array. Next, you call the transformation function making sure to pass along the XML, XSLT, the DIV you want to update and the list of fruits in an array. The transformation function will set the parameters for the XSLT file and perform the transformation. The output from the transformation will placed in the DIV element you specified. Voila!