eddjc
08-11-2008, 11:52 AM
Hi There,
I'm writing a wee script that uses Adobe's Spry Data tool - it's a basic repertoire list that you can click through using first letters of the composers or titles. My problem is that I'm using appendChild to add nodes for the Alphabet menu with the following function:
for (var i = 0; i < rows.length; i++)
{
if (rows[i][sortBy].charAt(0) != currentChar)
{
var txt = document.createTextNode(rows[i][sortBy].charAt(0));
document.getElementById("filterby").appendChild(txt);
//var letter = document.createElement('td');
//var link = document.createElement('a');
//link.setAttribute('href', '#');
//link.setAttribute('onclick', 'filterOut(\'' + rows[i][sortBy].charAt(0) + '\', sortBy); return false');
//var dest = document.getElementById("filterby");
//dest.appendChild(letter);
//letter.appendChild(link);
}
}
}
(commented out version is the one I tried, the one not commented is just a simple test to see why it wasn't working - this didn't work either)
Full code is here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php
require('includes/functions.php');
db_connect();
?>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Black Hair Contemporary Music Ensemble</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie.css" />
<![endif]-->
<link href="rss.php" rel="alternate" type="application/rss+xml" title="Black Hair Website RSS News Feed" />
<script type="text/javascript" src="js/add_bookmark.js">
</script>
<script language="JavaScript" type="text/javascript" src="spryincludes/SpryAccordion.js"></script>
<link href="spryincludes/SpryAccordion.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript" src="spryincludes/xpath.js"></script>
<script language="JavaScript" type="text/javascript" src="spryincludes/SpryData.js"></script>
<script language="JavaScript" type="text/javascript" src="spryincludes/SpryDataExtensions.js"></script>
<script language="JavaScript" type="text/javascript">
var myArrayOfData = [
<?php
$result = mysql_query('SELECT * FROM repertoire ORDER BY rSirname, rForename ASC');
while ($row = mysql_fetch_assoc($result))
{
echo '{ lastname: "' . $row['rSirname'] . '", firstname: "' . $row['rForename'] . '", title: "' . $row['rTitle'] . '", instruments: "' . $row['rinstruments'] . '", duration: "' . $row['rDuration'] . "\" },\n";
}
?>
];
var allRep = new Spry.Data.DataSet();
allRep.setDataFromArray(myArrayOfData);
var sortBy = 'lastname';
var currentChar = '';
var rows = allRep.getData();
function setList () {
for (var i = 0; i < rows.length; i++)
{
if (rows[i][sortBy].charAt(0) != currentChar)
{
var txt = document.createTextNode(rows[i][sortBy].charAt(0));
document.getElementById("filterby").appendChild(txt);
//var letter = document.createElement('td');
//var link = document.createElement('a');
//link.setAttribute('href', '#');
//link.setAttribute('onclick', 'filterOut(\'' + rows[i][sortBy].charAt(0) + '\', sortBy); return false');
//var dest = document.getElementById("filterby");
//dest.appendChild(letter);
//letter.appendChild(link);
}
}
}
filterOut('A', sortBy);
function sortByComposer ()
{
allRep.sort(["lastname", "firstname"]);
sortBy = 'lastname';
allRep.removeAllFilters();
setList();
filterOut('A', sortBy);
}
function sortByTitle ()
{
allRep.sort(["title"]);
sortBy = 'title';
allRep.removeAllFilters();
setList();
filterOut('A', sortBy);
}
function filterOut (letter, sortRow) {
var regExpStr = letter;
regExpStr = "^" + regExpStr;
var regExp = new RegExp(regExpStr, "i");
var filterFunc = function(ds, row, rowNumber)
{
var str = row[sortRow];
if (str && str.search(regExp) != -1)
return row;
return null;
};
allRep.filter(filterFunc);
}
</script>
</head>
<body>
<div class = "wrapper">
<div class = "header">
</div>
<div class = "bottom">
<div class = "left">
<div class = "repertoire">
<div id="Acc1" class="Accordion">
<div class="AccordionPanel">
<div class="AccordionPanelTab">SAMPLE PROGRAMMES</div>
<div class="AccordionPanelContent">
<?php
$result = mysql_query('SELECT text FROM texts WHERE tfield = "repertoire"');
while ($row = mysql_fetch_assoc($result))
{
echo '<div class="accordtext">';
echo $row['text'];
echo '</div>';
}
?>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">CURRENT REPERTOIRE</div>
<div class="AccordionPanelContent">
<?php
$result = mysql_query('SELECT * FROM Repertoire WHERE rCurrent = "YES" ORDER BY rSirname, rForename ASC');
echo '<div class = "accordtext">';
echo '<table>';
while ($row = mysql_fetch_assoc($result))
{
echo '<tr>';
echo '<td><b>' . $row['rSirname'] . ', ' . $row['rForename'] . '</b></td>';
echo '<td>' . $row['rTitle'] . '<span style="color:#333; font-size:11px;"> (' . $row['rinstruments'] . ')</span></td>';
echo '<td>';
if ($row['rDuration'] != '')
{
echo $row['rDuration'];
}
echo '</td>';
echo '</tr>';
}
echo '</table>';
echo '</div>';
?>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">ALL REPERTOIRE [A-Z BY COMPOSER]</div>
<div class="AccordionPanelContent">
<div spry:region="allRep">
<div class = "selector">
<table>
<tr id = "filterby">
<td>Filter By: </td>
<td><a href = "#" onclick="sortByComposer();return false;">Composer</a></td>
<td><a href = "#" onclick="sortByTitle(); return false;">Title</a></td><td id = "filterby"></td>
</tr> </table>
</div>
<div class = "accordtext">
<table>
<tr spry:repeat="allRep"><td><b>{lastname}, {firstname}</b></td><td>{title}<span style="color:#333; font-size:11px;"> ({instruments}) </span></td><td>{duration}</td></tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class = "navigation">
<div class = "navplaces">
<a href="index.php">HOME</a><p>
<a href="repertoire.php">REPERTOIRE</a></p><p>
<a href="workshops.php">WORKSHOPS</a></p><p>
<a href="audio.php">AUDIO/VIDEO</a></p><p>
<a href="gigs.php">UPCOMING GIGS</a></p><p>
<a href="about.php">ABOUT US</a></p><p>
<a href="gallery.php">GALLERY</a></p><p>
<a href="contact.php">CONTACT</a></p><p>
<a href="links.php">LINKS</a></p>
</div>
<div class = "options">
<table>
<tr><td style="width:24px; background:url(img/end.gif) no-repeat 16px 8px"><a href="feed://www.blackhairensemble.com/rss.php"><img src="img/rssicon.gif" /><a/></td><td><a href="feed://www.blackhairensemble.com/rss.php"><div style = "background:url(img/line.gif) repeat-x 0px 5px; width:90px;border-spacing:0px;">RSS News Feed</div></a></td></tr>
<tr><td style="width:24px; background:url(img/end.gif) no-repeat 16px 8px"><a href="javascript:addToFavorites()"><img src="img/bookmarkicon.gif" /></a></td><td><div id="addBookmarkContainer" style = "background:url(img/line.gif) repeat-x 0px 5px; width:115px;border-spacing:0px;"></div></td></tr>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var acc1 = new Spry.Widget.Accordion("Acc1");
</script>
</body>
</html>
Anybody any ideas as to why this isn't working?
Many Thanks
Edd
I'm writing a wee script that uses Adobe's Spry Data tool - it's a basic repertoire list that you can click through using first letters of the composers or titles. My problem is that I'm using appendChild to add nodes for the Alphabet menu with the following function:
for (var i = 0; i < rows.length; i++)
{
if (rows[i][sortBy].charAt(0) != currentChar)
{
var txt = document.createTextNode(rows[i][sortBy].charAt(0));
document.getElementById("filterby").appendChild(txt);
//var letter = document.createElement('td');
//var link = document.createElement('a');
//link.setAttribute('href', '#');
//link.setAttribute('onclick', 'filterOut(\'' + rows[i][sortBy].charAt(0) + '\', sortBy); return false');
//var dest = document.getElementById("filterby");
//dest.appendChild(letter);
//letter.appendChild(link);
}
}
}
(commented out version is the one I tried, the one not commented is just a simple test to see why it wasn't working - this didn't work either)
Full code is here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php
require('includes/functions.php');
db_connect();
?>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Black Hair Contemporary Music Ensemble</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie.css" />
<![endif]-->
<link href="rss.php" rel="alternate" type="application/rss+xml" title="Black Hair Website RSS News Feed" />
<script type="text/javascript" src="js/add_bookmark.js">
</script>
<script language="JavaScript" type="text/javascript" src="spryincludes/SpryAccordion.js"></script>
<link href="spryincludes/SpryAccordion.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript" src="spryincludes/xpath.js"></script>
<script language="JavaScript" type="text/javascript" src="spryincludes/SpryData.js"></script>
<script language="JavaScript" type="text/javascript" src="spryincludes/SpryDataExtensions.js"></script>
<script language="JavaScript" type="text/javascript">
var myArrayOfData = [
<?php
$result = mysql_query('SELECT * FROM repertoire ORDER BY rSirname, rForename ASC');
while ($row = mysql_fetch_assoc($result))
{
echo '{ lastname: "' . $row['rSirname'] . '", firstname: "' . $row['rForename'] . '", title: "' . $row['rTitle'] . '", instruments: "' . $row['rinstruments'] . '", duration: "' . $row['rDuration'] . "\" },\n";
}
?>
];
var allRep = new Spry.Data.DataSet();
allRep.setDataFromArray(myArrayOfData);
var sortBy = 'lastname';
var currentChar = '';
var rows = allRep.getData();
function setList () {
for (var i = 0; i < rows.length; i++)
{
if (rows[i][sortBy].charAt(0) != currentChar)
{
var txt = document.createTextNode(rows[i][sortBy].charAt(0));
document.getElementById("filterby").appendChild(txt);
//var letter = document.createElement('td');
//var link = document.createElement('a');
//link.setAttribute('href', '#');
//link.setAttribute('onclick', 'filterOut(\'' + rows[i][sortBy].charAt(0) + '\', sortBy); return false');
//var dest = document.getElementById("filterby");
//dest.appendChild(letter);
//letter.appendChild(link);
}
}
}
filterOut('A', sortBy);
function sortByComposer ()
{
allRep.sort(["lastname", "firstname"]);
sortBy = 'lastname';
allRep.removeAllFilters();
setList();
filterOut('A', sortBy);
}
function sortByTitle ()
{
allRep.sort(["title"]);
sortBy = 'title';
allRep.removeAllFilters();
setList();
filterOut('A', sortBy);
}
function filterOut (letter, sortRow) {
var regExpStr = letter;
regExpStr = "^" + regExpStr;
var regExp = new RegExp(regExpStr, "i");
var filterFunc = function(ds, row, rowNumber)
{
var str = row[sortRow];
if (str && str.search(regExp) != -1)
return row;
return null;
};
allRep.filter(filterFunc);
}
</script>
</head>
<body>
<div class = "wrapper">
<div class = "header">
</div>
<div class = "bottom">
<div class = "left">
<div class = "repertoire">
<div id="Acc1" class="Accordion">
<div class="AccordionPanel">
<div class="AccordionPanelTab">SAMPLE PROGRAMMES</div>
<div class="AccordionPanelContent">
<?php
$result = mysql_query('SELECT text FROM texts WHERE tfield = "repertoire"');
while ($row = mysql_fetch_assoc($result))
{
echo '<div class="accordtext">';
echo $row['text'];
echo '</div>';
}
?>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">CURRENT REPERTOIRE</div>
<div class="AccordionPanelContent">
<?php
$result = mysql_query('SELECT * FROM Repertoire WHERE rCurrent = "YES" ORDER BY rSirname, rForename ASC');
echo '<div class = "accordtext">';
echo '<table>';
while ($row = mysql_fetch_assoc($result))
{
echo '<tr>';
echo '<td><b>' . $row['rSirname'] . ', ' . $row['rForename'] . '</b></td>';
echo '<td>' . $row['rTitle'] . '<span style="color:#333; font-size:11px;"> (' . $row['rinstruments'] . ')</span></td>';
echo '<td>';
if ($row['rDuration'] != '')
{
echo $row['rDuration'];
}
echo '</td>';
echo '</tr>';
}
echo '</table>';
echo '</div>';
?>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">ALL REPERTOIRE [A-Z BY COMPOSER]</div>
<div class="AccordionPanelContent">
<div spry:region="allRep">
<div class = "selector">
<table>
<tr id = "filterby">
<td>Filter By: </td>
<td><a href = "#" onclick="sortByComposer();return false;">Composer</a></td>
<td><a href = "#" onclick="sortByTitle(); return false;">Title</a></td><td id = "filterby"></td>
</tr> </table>
</div>
<div class = "accordtext">
<table>
<tr spry:repeat="allRep"><td><b>{lastname}, {firstname}</b></td><td>{title}<span style="color:#333; font-size:11px;"> ({instruments}) </span></td><td>{duration}</td></tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class = "navigation">
<div class = "navplaces">
<a href="index.php">HOME</a><p>
<a href="repertoire.php">REPERTOIRE</a></p><p>
<a href="workshops.php">WORKSHOPS</a></p><p>
<a href="audio.php">AUDIO/VIDEO</a></p><p>
<a href="gigs.php">UPCOMING GIGS</a></p><p>
<a href="about.php">ABOUT US</a></p><p>
<a href="gallery.php">GALLERY</a></p><p>
<a href="contact.php">CONTACT</a></p><p>
<a href="links.php">LINKS</a></p>
</div>
<div class = "options">
<table>
<tr><td style="width:24px; background:url(img/end.gif) no-repeat 16px 8px"><a href="feed://www.blackhairensemble.com/rss.php"><img src="img/rssicon.gif" /><a/></td><td><a href="feed://www.blackhairensemble.com/rss.php"><div style = "background:url(img/line.gif) repeat-x 0px 5px; width:90px;border-spacing:0px;">RSS News Feed</div></a></td></tr>
<tr><td style="width:24px; background:url(img/end.gif) no-repeat 16px 8px"><a href="javascript:addToFavorites()"><img src="img/bookmarkicon.gif" /></a></td><td><div id="addBookmarkContainer" style = "background:url(img/line.gif) repeat-x 0px 5px; width:115px;border-spacing:0px;"></div></td></tr>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var acc1 = new Spry.Widget.Accordion("Acc1");
</script>
</body>
</html>
Anybody any ideas as to why this isn't working?
Many Thanks
Edd