OK, I got to work as a standalone html-file with this code:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>A-z test</title>
<style >
ul { list-style:none; cursor:pointer; }
li { display:block; float:left; width:30px; text-align:center; padding:0 5px 0 5px; border-right:1px solid #ccc; }
li:hover { background:#ddd; }
div.demo-container { clear:both; margin:30px; }
</style>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function()
{
$("#a-z-list li").click(function() {
var selected = $(this).html();
$('div#result').html(function() {
return '[!Ditto? &parents=`369` &depth=`0` &display=`all` &sortBy=`pagetitle` &sortDir=`ASC` &extenders=`glossaryFilter` &filterBy=`' + selected + '` &tpl=`photoListSort-Norsk` &hideFolders=`1`!]';
});
});
});
</script>
</head>
<body>
<ul id="a-z-list">
<li>a-b</a></li>
<li>c</a></li>
<li>d</a></li>
<li>e-f</a></li>
<li>g-k</a></li>
</ul><br />
<div id="result">
Demonstration Box
</div>
</body>
</html>
You can see it here:
http://svalbardflora.net/a-z-list.html:
But with
<ul id="a-z-list">
<li>a-b</a></li>
<li>c</a></li>
<li>d</a></li>
<li>e-f</a></li>
<li>g-k</a></li>
</ul><br />
<div id="result">
Demonstration Box
</div> in a MODx document and
<script>
$(document).ready(function()
{
$("#a-z-list li").click(function() {
var selected = $(this).html();
$('div#result').html(function() {
return '[!Ditto? &parents=`369` &depth=`0` &display=`all` &sortBy=`pagetitle` &sortDir=`ASC` &extenders=`glossaryFilter` &filterBy=`' + selected + '` &tpl=`photoListSort-Norsk` &hideFolders=`1`!]';
});
});
});
</script> in the header it doesn’t work, see here:
http://svalbardflora.net/index.php?id=1121. The template for the id=1121 is almost empty, it only loads the jquery-1.4.4.
I also tried to change from $ to jquery, but then the script didn’t work at all, not even in the stand-alone file.
Has anyone of you a suggestion on what I’m doing wrong here?
)
