I am trying to add another filter to the FAQ Categories>Questions w/ Filter App and have bascially duplicated the working code for the first filter but it isn't working even though I have setup a second entity type just like the first filter. See sample code below.
My cshtml code:
@using ToSic.SexyContent
@functions
{
// variable which will contain the sorted categories
IEnumerable<dynamic> sortedCategories;
IEnumerable<dynamic> sortedTypes;
// Prepare the data - get all categories through the pipeline
public override void CustomizeData()
{
// get all categories of these questions, then get the distinct entities
// this could all be done on 1 line, but it would be harder for people who don't know LINQ yet
var questionsInThisModule = AsDynamic(App.Data["CO-Filter"].List);
var categoriesUsed = questionsInThisModule.SelectMany(q => ((List<DynamicEntity>)q.Categories));
var distinctCategories = categoriesUsed.Select(AsEntity).Distinct(); // Distinct only works reliably when cast as entity
sortedCategories = AsDynamic(distinctCategories).OrderBy(q => q.Name);
var typesInThisModule = AsDynamic(App.Data["CO-Filter"].List);
var typesUsed = typesInThisModule.SelectMany(a => ((List<DynamicEntity>)a.Types));
var distinctTypes = typesUsed.Select(AsEntity).Distinct(); // Distinct only works reliably when cast as entity
sortedTypes = AsDynamic(distinctTypes).OrderBy(a => a.Name);
}
}
<h2 class="sc-element">@ListContent.Title @ListContent.Toolbar</h2>
<div>@Html.Raw(ListContent.Introduction)</div>
<div>
<strong>@App.Resources.FilterBy </strong>
<select id="ddlFeatureFilter">
<option value="all">@App.Resources.ShowAll</option>
@foreach (var cat in sortedCategories)
{
<option value="@cat.EntityId">@cat.Title</option>
}
</select>
</div>
<div>
<strong>@App.Resources.FilterBy </strong>
<select id="ddlFeatureFilterOne">
<option value="allOne">@App.Resources.ShowAll</option>
@foreach (var catOne in sortedTypes)
{
<option value="@catOne.EntityId">@catOne.Title</option>
}
</select>
</div>
<ol>
@foreach (var q in AsDynamic(App.Data["CO-Filter"]))
{
<li class="sc-element faq-set faq-setOne" data-tags="@String.Join(",", ((List<DynamicEntity>)q.Categories).Select(a => AsDynamic(a).EntityId))">
@q.Toolbar @Edit.Toolbar(actions: "edit,new", contentType: "CO-Filter")
<a class="faq-question" style="cursor: pointer">
@if(!String.IsNullOrEmpty(q.LinkText))
{
@q.LinkText
} else {
@q.Link
}
</a>
</li>
}
</ol>
<script src="@App.Path/assets/faq.js" data-enableoptimizations="true"></script>
<script>
$(document).ready(function() {
initFaqSection("DnnModule-" + @Dnn.Module.ModuleID, "@ListPresentation.ShowEffect");
});
</script>
My updated assets/faq js code:
function initFaqSection(containerSelector, showEffect) {
var container = $("." + containerSelector);
$(".faq-question", container).click(function (e) {
var answer;
switch(showEffect) {
case "slide":
answer = $(e.target).closest(".faq-set").find(".faq-answer");
answer.slideToggle();
e.preventDefault();
break;
case "lightbox":
var question = $(e.target);
answer = question.next();
answer.dialog({
title: question.text(),
autoOpen: true,
dialogClass: "dnnFormPopup",
modal: true
});
default:
break;
}
});
// Attach drop-down filter
$("#ddlFeatureFilter", container).change(function (changeEvent) {
var tagFilter = changeEvent.target[changeEvent.target.selectedIndex].value;
console.log("tf:" + tagFilter);
//alert(tagFilter);
$(".faq-set", container).each(function (i, e) {
var tags = ($(e).attr('data-tags') + ",all").split(',');
console.log(tags);
if ($.inArray(tagFilter, tags) != -1)// || tagFilter == "all")
$(e).slideDown();
else
$(e).slideUp();
});
});
// Attach drop-down filter
$("#ddlFeatureFilterOne", container).change(function (changeEvent) {
var tagFilter = changeEvent.target[changeEvent.target.selectedIndex].value;
console.log("tf:" + tagFilter);
//alert(tagFilter);
$(".faq-set", container).each(function (i, e) {
var tags = ($(e).attr('data-tags') + ",allOne").split(',');
console.log(tags);
if ($.inArray(tagFilter, tags) != -1)// || tagFilter == "allOne")
$(e).slideDown();
else
$(e).slideUp();
});
});
}
The content item entity fields setup:
The content item itself:
What I currently have (note second filter only displays but doesnt filter by 'type').
I know my code is incorrect but is there an easy solution?
Also, is there any easy way if a link is displayed (no linktext entered by a user) to remove the path url and the extension?
Thx
UPDATE:
I have tried to create a combined function like so:
function initFaqSection(containerSelector, showEffect) {
var container = $("." + containerSelector);
$(".faq-question", container).click(function (e) {
var answer;
switch(showEffect) {
case "slide":
answer = $(e.target).closest(".faq-set").find(".faq-answer");
answer.slideToggle();
e.preventDefault();
break;
case "lightbox":
var question = $(e.target);
answer = question.next();
answer.dialog({
title: question.text(),
autoOpen: true,
dialogClass: "dnnFormPopup",
modal: true
});
default:
break;
}
});
// Attach drop-down filters
function runFilters() {
var filter1 = $("#ddlFeatureFilterOne").value;
var filter2 = $("#ddlFeatureFilterTwo").value;
//alert(filters);
$("#ddlFeatureFilterTwo", container).change(runFilters);
$(".faq-set", container).each(function (i, e) {
var tags = ($(e).attr('data-tags') + ",allTwo").split(',');
console.log(tags);
if ($.inArray(filter1, tags) != -1 && $.inArray(filter2, tags) != -1)
$(e).slideDown();
else
$(e).slideUp();
});
}
}
with my cshtml code as follows:
<div>
<strong>@App.Resources.FilterBy </strong>
<select id="ddlFeatureFilterOne">
<option value="allTwo">@App.Resources.ShowAll</option>
@foreach (var catOne in sortedCategories)
{
<option value="@catOne.EntityId">@catOne.Name</option>
}
</select>
<select id="ddlFeatureFilterTwo">
<option value="allTwo">@App.Resources.ShowAll</option>
@foreach (var catTwo in sortedTypes)
{
<option value="@catTwo.EntityId">@catTwo.Name</option>
}
</select>
</div>
but this still only works the first filter?
