Tom Elliott

Here’s a useful Javascript function I recently coded to allow a list of checkboxes in a form to be selected or unselected. The Check\uncheck function takes in two parameters, the first is the form name and the second is a boolean value – true or false, true being to select all checkboxes and false to un-select all.

<script language="javascript">
function checkAll(formname, checktoggle)
{
  var checkboxes = new Array(); 
  checkboxes = document[formname].getElementsByTagName('input');
 
  for (var i=0; i<checkboxes.length; i++)  {
    if (checkboxes[i].type == 'checkbox')   {
      checkboxes[i].checked = checktoggle;
    }
  }
}
</script>

The function gets the array of checkboxes from the selected form from their HTML tag ‘input’ type. As there are other input types such as ‘radio’, the function loops through all the input fields in the form, selecting only those that are checkboxes.

To call the function, add the following javascript command to your check all and uncheck all text or image links:

<a href="javascript:void();" onclick="javascript:checkAll('form3', true);">check all</a>
<a href="javascript:void();" onclick="javascript:checkAll('form3', false);">uncheck all</a>

One of the advantages of using this method is that unlike some other similar functions, this check all works regardless of the name of the checkbox. There may be occasions for example where the checkbox name changes within a list, i.e. ‘checkbox1′, ‘checkbox2′ etc rather than ‘checkbox’ for the whole list.

The Javascript check all function has been tested for compatibility in IE8, IE9, Chrome & FireFox

I’ve been working a with various Spry functionality and xml feed integration recently. Being able to select a single row from a Spry XML Dataset sounds like it should be easy but the solution wasn’t immediately obvious. Hopefully the below will save you some time.

OK, so let’s say you’ve got a nice XML feed displaying on your site, in a repeat region showing X number of rows but you want to enable a click through to a single article\feed item showing more information, a ‘Master Detail Page Set’ if you like.

The process to do this involves:

1. Link to a detail page from the repeat region, passing the unique row ID
2. Filtering the unique, specific record from the xml using the passed ID

1. Link to the detail page

The Spry generated repeat region code may look a little like this:

<div spry:region="ds1" class="StackedContainers">
  <div spry:repeat="ds1" class="RowContainer">
    <div class="RowColumn"><h2>{title}</h2></div>
    <div class="RowColumn"><p>{articleDate}</p></div>
    <div class="RowColumn"><p>{articleContent}</p></div>
  </div>
</div>

To identify the unique row, we use {ds_RowID}. Adding this to a link – in this case the article heading, we can select and pass the unique Row ID. The code will then look more like:

<div spry:region="ds1" class="StackedContainers">
  <div spry:repeat="ds1" class="RowContainer">
    <div class="RowColumn"><h2><a href="detail-page.php?ID={ds_RowID}">{title}</a></h2></div>
    <div class="RowColumn"><p>{articleDate}</p></div>
    <div class="RowColumn"><p>{articleSnippet}</p></div>
  </div>
</div>

2. Selecting a single row from the Spry dataset

The next stage is to select the unique row from the xml using the row ID on the detail page. We can use the same feed file (providing it has the full information we want) and add a few lines of JavaScript below the main dataset declaration:

var ds1 = new Spry.Data.XMLDataSet("feed.xml", "rss/item");
 
ds1.addObserver({onPostLoad: function(ds, type) {
 ds1.setCurrentRow(X); 
} 
});

The addObserver line listens until the xml or data has been loaded before setting the current row. ‘X’ is the row ID which we have passed as a URL parameter and from PHP, this can generated by:

ds1.setCurrentRow(<?php echo $_GET['ID'];?>);

Finally, we need to make sure the spry region is not a repeat region (which will still display all rows). i.e. something like:

<div spry:region="ds1">
<h2>{title}</h2>
<p>{articleDate}</p>
<p>{articleContent}</p>
</div>

You should now see all the single row details, filtered from the full xml

The Spry toolset in the latest versions of Dreamweaver are a great set of features, especially the Spry Dataset for integrating xml files such as RSS data feeds. Customisation of certain functionality however, I’ve found tricky to implement at times. Here’s a few Spry tips that I’ve found useful when integrating xml data in websites.

Limit Rows in a Spry Repeat Region

One such seemingly simple task is being able to limit the number of rows displayed in a Spry repeat region from a Spry XML dataset. I found the below solution hidden in the Adobe Spry documentation. To limit the rows from an xml feed, locate the Spry dataset variable e.g:

var ds1 = new Spry.Data.XMLDataSet("feed.xml", "rss/item");

Then add [position() < X] to the xml node element, where X is the number of rows you want to display. For example to limit the rows to 10, use the following:

var ds1 = new Spry.Data.XMLDataSet("feed.xml", "rss/item[position() < 10]");

Limiting Characters in a Spry XML Dataset Field

Limiting the number of characters displayed in a field is another useful function but there’s no in-built option for this in the Spry parameters. I found something similar buried somewhere in the Adobe forums, you can use a JavaScript function to limit the amount of characters in any row or field such as a headline or description field.

Firstly add the function below in the head tag:

<script type="text/javascript">
function restrictChars(region,limitField){
   return  limitField('description').substr(0,100);
}
</script>

Where ’0′ is the character position to start trimming and ’100′ is how many characters you want to limit the field by. Next, replace the field name in the code generated by the Spry xml dataset to reference the character limiting function. For example the line:

<div class="RowColumn">{description}</div>

should become:

<div class="RowColumn">{function::restrictChars}</div>

Enabling External XML feeds with Spry

Adobe prevents using cross-domain xml files for security reasons, to protect any potential malicious code from finding it’s way into your site. There’s a number of reasons you may need to use external feeds, for example if you have multiple domains with data on the sites drawn from a single source.

I initially purchased an extension which I thought would do the trick but I had the security problems enabling the external feed to display in anything but the Chrome browser. Then I found this cross domain solution (for PHP) – full credit to Andy at the Pandahaus for this one.

Simply paste the code block from the link above into a new php file and reference the file from the main Spry dataset definition, i.e:

var ds1 = new Spry.Data.XMLDataSet("feed.php", "rss/item");