We Keep Coding

RedirectToAction in Loop process [.Net Core 3.1]

I've been struggling to finish the app I'm developing,
here is the scenario:
I have a Razor page where the user will input customer number, Company Code, and Date. Users can input multiple customer numbers and the app will split them by comma.
once the user inputted the details a button with asp-action pointed to the action named GenerateSoa, it will run a foreach statement that will RedirectToAction for every customer that is inputted on the GUI
The problem starts here when the loop runs it only opens one tab even if there are 3 customers inputted.
It should open 3 tabs with their details for 3 different customers. below is my code
I did not however include the SoaLooper cshtml file.
SoaController.cs
public IActionResult GenerateSoa()
{
ClearAmounts();
#region Date management for SOA
// First day of Current Month
var FirstDateOfCurrentMonth = new DateTime(SD.DateToday.Year, SD.DateToday.Month, 1);
var PreviousMonthFirstDay = FirstDateOfCurrentMonth.AddMonths(-1);
var PreviousMonthLastDay = DateTime.DaysInMonth(SD.DateToday.Year, PreviousMonthFirstDay.Month);
****** Ommitted some code *****
// Get last day of Previews month
var PreviewsBalanceDate = PreviousMonthFirstDay.Month.ToString() + "/" +
PreviousMonthLastDay.ToString() + "/" + PreviousMonthFirstDay.Year.ToString();
#endregion Date management for SOA
//SD.GuiCustomerNum = customer.ToString();
var bsid_unpaid_payments = _context.BSIDs.Where(l =>
(l.UMSKZ == "" || l.UMSKZ != "C") && l.BLART == "DJ");
foreach (var payments in bsid_unpaid_payments)
{
SD.PAmount += Convert.ToDouble(payments.DMBTR);
}
SD.UPTotalAmount = SD.UPAmount - SD.PAmount;
return View();
}
public IActionResult SoaLooper(string customer, int company, DateTime asof)
{
string[] customerNum = customer.Split(',');
SD.GuiCompany = company.ToString();
SD.DateToday = asof;
foreach (var item in customerNum)
{
SD.GuiCustomerNumSelected = item.ToString();
RedirectToAction(nameof(GenerateSoa));
}
return View();
}
Index.cshtml
<div class="container h-100">
<div class="row h-100 justify-content-center align-items-center border">
<form method="post" class="col-12 text-center">
<div class="col-12 border-bottom">
<h2 class="text-primary">Statement of Account</h2>
</div>
<div class="col-8 pt-4">
<div class="form-group row">
<div class="col-4">
<label class="float-right">Customer</label>
</div>
<div class="col-8">
<input id="customer" name="customer" class="form-control" />
</div>
</div>
<div class="form-group row">
<div class="col-4">
<label class="float-right">Company Code</label>
</div>
<div class="col-8">
<select id="company" name="company" class="form-control">
<option value="">Select a number</option>
<option value="2000">2000</option>
<option value="3000">3000</option>
</select>
</div>
</div>
<div class="form-group row">
<div class="col-4">
<label class="float-right">Statement as of</label>
</div>
<div class="col-8">
<input id="asof" name="asof" type="date" class="form-control" />
</div>
</div>
<div class="form-group row">
<div class="col-8 offset-4">
<div class="row">
<div class="col">
<button type="submit" formtarget="_blank" id="btnCheck"
class="btn btn-primary form-control" asp-action="SoaLooper">Generate</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>

RedirectToAction doesn't open a new tab, it just returns a status code of 302 to tell the client to redirect.
If you really want to open multiple new tabs, you should do something like return a list of urls and then use window.open when the page loads.
I haven't tested it but you could do something like this:
Add your url to a list:
SoaController.cs
var newTabUrls = new List<string>();
foreach (var item in customerNum)
{
SD.GuiCustomerNumSelected = item.ToString();
newTabUrls.Add(nameof(GenerateSoa));
}
return View(newTabUrls);
Index.cshtml
<script type="text/javascript">
#if(Model?.Any() ?? false)
{
#foreach(var url in Model)
{
#:window.open(url, "_blank");
}
}
</script>
Open a URL in a new tab (and not a new window)
how to open a page in new tab on button click in asp.net?

How to resolve an error in To Do List Web App

Currently experimenting with JavaScript and building a To-Do List Web App. Having some issues with it. When I refresh the page, it gives the error:
TypeError: tasks is null
And when I press the submit button, it gives the error:
TypeError: cyclic object value
I was trying it out after reading a tutorial online on JavaScript and then I got the idea on implementing it with some basic project like this one.
How can I resolve the errors? I can't seem to figure out the solution.
JS Code:
document.getElementById('form-Task').addEventListener('submit', saveTask);
// Save new To-Do Item
function saveTask(e){
let title = document.getElementById('title').value;
let description = document.getElementById('description').value;
let task = {
title,
description
};
if(localStorage.getItem('tasks') === null) {
let = tasks = [];
tasks.push(tasks);
localStorage.setItem('tasks', JSON.stringify(tasks));
} else {
let tasks = JSON.parse(localStorage.getItem('tasks'));
tasks.push(task);
localStorage.setItem('tasks', JSON.stringify(tasks));
}
getTasks();
// Reset form-Task
document.getElementById('form-Task').reset();
e.preventDefault();
}
// Delete To-Do Item
function deleteTask(title) {
let tasks = JSON.parse(localStorage.getItem('tasks'));
for (let i = 0; i < tasks.length; i++){
if(tasks[i].title == title) {
tasks.splice(i, 1);
}
}
localStorage.setItem('tasks', JSON.stringify(tasks));
getTasks();
}
// Show To-Do List
function getTasks(){
let tasks = JSON.parse(localStorage.getItem('tasks'));
let tasksView = document.getElementById('tasks');
tasksView.innerHTML = '';
for(let i = 0; i < tasks.length; i++){
let title = tasks[i].title;
let description = tasks[i].description;
tasksView.innerHTML +=
`<div class="card mb-3">
<div class="card-body">
<div class="row">
<div class="col-sm-3 text-left">
<p>${title}</p>
</div>
<div class="col-sm-7 text-left">
<p>${description}</p>
</div>
<div class="col-sm-2 text-right">
X
</div>
</div>
</div>
</div>`;
}
}
getTasks();
HTML code:
<nav class="navbar navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">My To-Do List</a>
</div>
</nav>
<div class="container">
<div class="row my-5">
<div class="col-md-4">
<div class="card">
<div class="card-body">
<form id="form-Task">
<div class="form-group">
<input type="text" id="title" class="form-control" maxlength="50" autocomplete="off" placeholder="Title" required>
</div>
<div class="form-group">
<textarea type="text" id="description" cols="30" rows="10" class="form-control" maxlength="500" autocomplete="off" placeholder="Description" required></textarea>
</div>
<button type="submit" class="btn btn-success btn-block">Save</button>
</form>
</div>
</div>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-sm-3 text-left">
<p class="font-weight-bold">Title</p>
</div>
<div class="col-sm-6 text-left">
<p class="font-weight-bold">Description</p>
</div>
<div class="col-sm-3 text-right">
<p class="font-weight-bold">Delete</p>
</div>
</div>
<hr>
<div id="tasks"></div>
</div>
</div>
</div>
<script src="js/app.js"></script>

I am still learning javascript so I might have missed something, but in your first if statement, you have an extra "=":
if(localStorage.getItem('tasks') === null) {
let = tasks = []; // let tasks = []
tasks.push(tasks);
and I am not sure about that first definition of the task variable. With curly braces, you make key-value pairs, but you didn't add the value. For example:
var person = { firstName: "John", lastName: "Doe" };
Hope I helped.

AngularJS : Changing values in other div, is changing data in all divs

Page looks like this :
HTML
<li class="list-group-item" ng-repeat="eachData in lstRepositoryData">
<div class="ember-view">
<div class="github-connection overflow-hidden shadow-outer-1 br2">
<!-- code to created other stuff-- >
<div class="panel-heading">
<a for="collapse{{$index}} accordion-toggle" data-toggle="collapse" href="#collapse{{$index}}" aria-expanded="true" aria-controls="collapse{{$index}}">Show SFDC
connections</a>
<div id="collapse{{$index}}" class="collapse mt3 panel-collapse">
<div class="row no-gutters pa3">
<div class="col-12 col-sm-6 col-md-8">
<form>
<div class="form-group row">
<label for="inputorgNamel3" class="col-sm-2 col-form-label required">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputorgNamel3" placeholder="Name" ng-model="eachData.sfdcOrg.orgName" ng-disabled="eachData.sfdcOrg.disabledForm == 'true'">
</div>
</div>
<div class="form-group row">
<label for="inputenvironment3" class="col-sm-2 col-form-label required">Environment</label>
<div class="col-sm-10">
<div class="dropdown bootstrap-select">
<select class="form-control" id="inputenvironment3" ng-model="eachData.sfdcOrg.environment" ng-disabled="eachData.sfdcOrg.disabledForm == 'true'">
<option value="0" selected>Production/Developer</option>
<option value="1">Sandbox</option>
<option value="2">Custom Org</option>
</select>
</div>
</div>
</div>
<div class="form-group row">
<label for="salesforceLoginl3" class="col-sm-2 col-form-label required">Salesforce Login</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="salesforceLoginl3" placeholder="Salesforce userName"
ng-model="eachData.sfdcOrg.userName" ng-disabled="eachData.sfdcOrg.disabledForm == 'true'">
</div>
</div>
<div class="form-group row" ng-show="eachData.sfdcOrg.environment === '2'">
<label for="salesforceinstanceURLl3" class="col-sm-2 col-form-label required">Instance Url</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="salesforceinstanceURLl3" placeholder="Salesforce Instance Url"
ng-model="eachData.sfdcOrg.instanceURL" ng-disabled="eachData.sfdcOrg.disabledForm == 'true'">
</div>
</div>
<div class="form-group row">
<label for="branchNamel3" class="col-sm-2 col-form-label required">Branch Name</label>
<div class="col-sm-10">
<input class="form-control" id="branchNamel3" placeholder="search branches..."
ng-model="eachData.sfdcOrg.instanceURL">
</div>
</div>
<div class="form-group row">
<div class="form-group">
<!-- Buttons Code -->
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
JS Code :
var app = angular.module('forceCIApp', ["angularjs-dropdown-multiselect"]);
app.controller('orderFromController', function ($scope, $http, $attrs) {
$scope.reposInDB = [];
$scope.lstRepositoryData = [];
const sfdcOrg = {
orgName: '',
environment: '0',
userName: '',
instanceURL: '',
authorize: 'Authorize',
save: 'Save',
testConnection: 'Test Connection',
delete: 'Delete',
oauthSuccess: 'false',
oauthFailed: 'false',
oauthSaved: 'false',
disabledForm: 'false',
multiBranchData: [],
multiExtraSettings: {enableSearch: true, showCheckAll: false, showUncheckAll: false},
multiSelectedBranches: []
};
$http.get("/fetchUserName").then(function (response) {
if (response.data !== undefined && response.data !== null) {
$scope.userName = response.data.login;
localStorage.setItem('githubOwner', response.data.login);
$http.get("/fetchRepositoryInDB?gitHubUser=" + response.data.login).then(function (response) {
if (response.data.length > 0) {
for (let i = 0; i < response.data.length; i++) {
let lstBranches = [];
$.each(response.data[i].repository.mapBranches, function (key, value) {
console.log(key);
lstBranches.push(key);
});
sfdcOrg.multiBranchData = changeListToObjectList(lstBranches);
sfdcOrg.multiSelectedBranches = response.data[i].repository.lstSelectedBranches === undefined || null ? [] : changeListToObjectList(response.data[i].repository.lstSelectedBranches);
response.data[i].repository.sfdcOrg = sfdcOrg;
$scope.lstRepositoryData.push(response.data[i].repository);
$scope.reposInDB.push(response.data[i].repository.repositoryFullName);
}
$('#repoConnectedDialog').removeClass('hidden');
}
}, function (error) {
});
const avatarSpanTag = '<span class="absolute flex items-center justify-center w2 h2 z-2 ' +
'nudge-right--4 pe-none" style="top: -15px">\n' +
' <img src=' + response.data.avatar_url + '>\n' +
' </span>';
$(avatarSpanTag).insertAfter('#idSelectTab');
}
}, function (error) {
});
When I start editing input fields other divs input field also gets changed. But the data is different in both divs eachData.
Also disabling the form with eachData.sfdcOrg.disabledForm works fine.
But modifying the input elements modifies all the the input fields.
How do I avoid this?

The data was constructed by reference assignment instead of creating a clone object for each sfdcOrg property of each item in the lstRepositoryData array.
$http.get("/fetchRepositoryInDB?gitHubUser=" + response.data.login).then(function (response) {
if (response.data.length > 0) {
for (let i = 0; i < response.data.length; i++) {
let lstBranches = [];
$.each(response.data[i].repository.mapBranches, function (key, value) {
console.log(key);
lstBranches.push(key);
});
sfdcOrg.multiBranchData = changeListToObjectList(lstBranches);
sfdcOrg.multiSelectedBranches = response.data[i].repository.lstSelectedBranches === undefined || null ? [] : changeListToObjectList(response.data[i].repository.lstSelectedBranches);
̶r̶e̶s̶p̶o̶n̶s̶e̶.̶d̶a̶t̶a̶[̶i̶]̶.̶r̶e̶p̶o̶s̶i̶t̶o̶r̶y̶.̶s̶f̶d̶c̶O̶r̶g̶ ̶=̶ ̶s̶f̶d̶c̶O̶r̶g̶;̶
response.data[i].repository.sfdcOrg = angular.copy(sfdcOrg);
$scope.lstRepositoryData.push(response.data[i].repository);
$scope.reposInDB.push(response.data[i].repository.repositoryFullName);
}
$('#repoConnectedDialog').removeClass('hidden');
}
});
Use angular.copy to clone a new object.

Dynamic add field using nested accordion

Good Day!
I'm working on my project right now and I need to dynamically add form when button click. I have a nested accordion and inside the accordion is ng-select. To make it clear this is my code
<div class="box box-default" *ngFor="let form of forms; let form_array_index = index">
<div class="box-header with-border text-center">
<h3 class="box-title">
<div class="row">
<div class="col-md-4">
<select2 id="segment" name="segment"
[data]="add_segment"
[width]="293"
[value]="segment_value"
(valueChanged)="changedSegment($event, form_array_index)"
required>
</select2>
</div>
</div>
</h3>
<div class="box-tools pull-right">
</div>
</div>
<div class="box-body">
<div class="row">
<div class="col-md-2">
<label for="category">Values:</label>
<select2 id="category" name="category"
[options]="options"
[data]="add_category"
[width]="293"
[value]="category_value"
(valueChanged)="changedCategory($event, form_array_index)"
required>
</select2>
</div>
</div>
<div class="box-header with-border text-center" *ngIf="cat_value">
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion1" href="#{{ category_current[form_array_index] }}">{{collection_category[form_array_index].category}}
</a>
</h5>
</div>
<div id="{{ category_current[form_array_index] }}" class="panel-collapse collapse">
<div class="panel-body">
<div class="panel-body">
<button class="btn btn-success btn-xs pull-left" (click)="addQuestions()">Add Question</button>
<div class="row" >
<select2 *ngIf="query" id="question" name="question"
[data]="add_question"
[width]="293"
[value]="question_value"
(valueChanged)="changedQuestion($event)"
required>
</select2>
</div>
<button class="btn btn-success btn-xs pull-left" (click)="addSubCat()">Add Sub Category</button>
<div class="row" >
<select2 *ngIf="subcat" id="subcategory" name="subcategory"
[options]="options"
[data]="add_subcategory"
[width]="293"
[value]="subcategory_value"
(valueChanged)="changedSubcategory($event, form_array_index)"
required>
</select2>
</div>
<div class="panel-group" id="accordion21" *ngIf="subcat">
<ul class="list-group">
<li class="list-group-item" >
<div class="panel">
<a data-toggle="collapse" data-parent="#accordion21" href="#{{ subcategory_current }}" >
<strong>{{ get_subcategory }} </strong>
</a>
<div id="{{subcategory_current}}" class="panel-collapse collapse">
<div class="panel-body">
<label for="question">Question:</label>
<select2 id="question" name="question"
[data]="add_question"
[width]="293"
[value]="question_value"
(valueChanged)="changedQuestion($event)"
required>
</select2> <br>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div></div>
</div>
<div class="box-tools pull-right">
</div>
</div>
</div>
This means in SEGMENT it can have multiple CATEGORY and inside category it can have a question or they they Choose SUB CATEGORY and they have to choose a question
This is my component.ts
public collection_category = [];
public collection_subcategory = [];
addSegment(){
this._q_service.addSegment().
subscribe(
data => {
this.add_segment = Array.from(data);
let id = 0;
let text = 'Select Segment';
this.add_segment.unshift({id,text});
// this.segment_value = [];
this.segment_current = this.segment_value;
},
err => console.error(err)
);
}
changedSegment(data: any, form_array_index: any) {
this.segment_current = data.value;
if(this.segment_current.length > 0){
for (let i = 0; i < this.add_segment.length; ++i) {
if (this.add_segment[i].id == this.category_current) {
this.collection_category[form_array_index].segment = this.add_segment[i].text;
}
}
}
console.log('segment', this.collection_category);
}
addCategory(){
this._q_service.addCategory().
subscribe(
data => {
this.add_category = Array.from(data);
this.category_value = [];
this.options = {
multiple: true
}
let id = 0;
let text = 'Select Category';
this.add_category.unshift({id,text});
this.category_value = [];
// this.category_current.push(this.category_value);
// console.log(this.category_current);
},
err => console.error(err)
);
}
changedCategory(data: any, form_array_index: any ) {
this.category_current = data.value;
if(this.category_current.length > 0){
let len = this.add_category.length;
for (let i = 0; i < len; ++i) {
if (this.add_category[i].id == this.category_current) {
this.get_category = this.add_category[i].text;
this.collection_category[form_array_index].category = this.add_category[i].text;
}
}
this.cat_value = true;
}
console.log(this.collection_category);
this.addSubCategory();
this.addQuestion();
}
addSubCategory(){
this._q_service.addSubCategory().
subscribe(
data => {
this.add_subcategory = Array.from(data);
this.subcategory_value = [];
this.options = {
multiple: true
}
let id = 0;
let text = 'Select Sub Category';
this.add_subcategory.unshift({id,text});
this.subcategory_value = [];
this.subcategory_current = this.subcategory_value;
},
err => console.error(err)
);
}
changedSubcategory( data: any, form_array_index: any ) {
this.subcategory_current = data.value;
if(this.subcategory_current.length > 0){
let len = this.add_subcategory.length;
for (let i = 0; i < len; ++i) {
if (this.add_subcategory[i].id == this.subcategory_current) {
this.get_subcategory = this.add_subcategory[i].text;
this.collection_category[form_array_index].subcategory = this.add_subcategory[i].text;
// this.collection_subcategory[form_array_index].subcategory_collection = [];
}
}
this.sub_value = true;
}
}
addQuestion(){
this._q_service.questionList().
subscribe(
data => {
this.add_question = Array.from(data);
this.question_value = [];
let id = 0;
let text = 'Select Question';
this.add_question.unshift({id,text});
this.subcategory_value = ['0'];
this.question_current = this.question_value;
},
err => console.error(err)
);
}
changedQuestion(data: any) {
this.question_current = data.value;
if(this.question_current != 0){
let len = this.add_question.length;
for (let i = 0; i < len; ++i) {
if (this.add_question[i].id == this.question_current) {
this.get_question = this.add_question[i].text;
}
}
}
}
addFormRow(){
let new_form ={
id: '',
segment: '',
category: '',
subcategory: '',
question: ''
};
// this.category_current.push(0);
let segment_categories = {
segment: '',
category: '',
subcategory: '',
question: ''
};
//this.category_current[form_array_index].category
this.collection_category.push(segment_categories);
this.forms.push(new_form);
}
*And every time the user hit the Add Form button it dynamically add form *
But it gives me an error every time I add form the first accordion is not working on the second form but the first form is working well

Aurelia issue with setting element class based on obj.id === $parent.selectedId

I completed the contact-manager tut from Aurelia.io and am incorporating it into as task manager tut I'm putting together. The markup below sets the li class based on task.id === $parent.id.
task-list.html
<template>
<div class="task-list">
<ul class="list-group">
<li repeat.for="task of tasks" class="list-group-item ${task.id === $parent.selectedId ? 'active' : ''}">
<a route-href="route: tasks; params.bind: {id:task.id}" click.delegate="$parent.select(task)">
<h4 class="list-group-item-heading">${task.name}</h4>
<span class="list-group-item-text ">${task.due | dateFormat}</span>
<p class="list-group-item-text">${task.isCompleted}</p>
</a>
</li>
</ul>
</div>
task-list.js
#inject(WebAPI, EventAggregator)
export class TaskList {
constructor(api, ea) {
this.api = api;
this.tasks = [];
ea.subscribe(TaskViewed, x => this.select(x.task));
ea.subscribe(TaskUpdated, x => {
let id = x.task.id;
let task = this.tasks.find(x => x.id == id);
Object.assign(task, x.task);
});
}
created() {
this.api.getList().then( x => this.tasks = x);
}
select(task) {
this.selectedId = task.id;
return true;
}
}
If I edit the current task, represented by
task-detail.html
<template>
<require from="resources/attributes/DatePicker"></require>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Edit Task Profile</h3>
</div>
<div class="panel-body">
<form role="form" class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" placeholder="name" class="form-control" value.bind="task.name">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Description</label>
<div class="col-sm-10">
<input type="text" placeholder="description" class="form-control" value.bind="task.description">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Due Date</label>
<div class="col-sm-10">
<div class="input-group date">
<input type="text" datepicker class="form-control" value.bind="task.due | dateFormat:'L'"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Urgency</label>
<div class="col-sm-10">
<input type="range" min="1" max="5" step="1" class="form-control" value.bind="task.urgency">
</div>
</div>
</form>
</div>
</div>
<div class="button-bar">
<button class="btn btn-info" click.delegate="addTask(task)" >Add New</button>
<button class="btn btn-success" click.delegate="save()" disabled.bind="!canSave">Save Edit</button>
</div>
</template>
task-detail.js
#inject(WebAPI, EventAggregator, Utils, DialogService)
export class TaskDetail {
constructor(api, ea, utils, dialogService) {
this.api = api;
this.ea = ea;
this.utils = utils;
this.dialogService = dialogService;
}
activate(params, routeConfig) {
this.routeConfig = routeConfig;
return this.api.getTaskDetails(params.id).then(task => {
this.task = task;
this.routeConfig.navModel.setTitle(task.name);
this.originalTask = this.utils.copyObj(task);
this.ea.publish(new TaskViewed(task));
});
}
get canSave() {
return this.task.name && !this.api.isRequesting;
}
save() {
console.log(this.task);
this.api.saveTask(this.task).then(task => {
this.task = task;
this.routeConfig.navModel.setTitle(task.name);
this.originalTask = this.utils.copyObj(task);
this.ea.publish(new TaskUpdated(this.task));
});
}
canDeactivate() {
if (!this.utils.objEq(this.originalTask, this.task)) {
let result = confirm('You have unsaved changes. Are you sure you wish to leave?');
if (!result) {
this.ea.publish(new TaskViewed(this.task));
}
return result;
}
return true;
}
addTask(task) {
var original = this.utils.copyObj(task);
this.dialogService.open({viewModel: AddTask, model: this.utils.copyObj(this.task)})
.then(result => {
if (result.wasCancelled) {
this.task.name = original.title;
this.task.description = original.description;
}
});
}
}
If a value has changed, navigation away from the current task is not allowed, and that works -- that is, the contact-detail part of the UI doesn't change. However, the task <li>, that one tries to navigate to still gets the active class applied. That's not supposed to happen.
If I step along in dev tools, on the Aurelia.io contact-manager, I see that the active class is briefly applied to the list item, then it goes away.
from the contact-manager's contact-list.js This was run when clicking an <li> and no prior item selected.
select(contact) {
this.selectedId = contact.id;
console.log(contact);
return true;
}
This logs
Object {__observers__: Object}
Object {id: 2, firstName: "Clive", lastName: "Lewis", email: "lewis#inklings.com", phoneNumber: "867-5309"}
The same code on my task-manager's (obviously with "contact" replaced by task") task-list.js logs
Object {description: "Meeting With The Bobs", urgency: "5", __observers__: Object}
Object {id: 2, name: "Meeting", description: "Meeting With The Bobs", due: "2016-09-27T22:30:00.000Z", isCompleted: false…}

My first instinct is to say it's got something to do with this.selectedId = contact.id
this there would refer to what I assume is a function called select (looks like the function keyword is missing in your example?) or the global object (i.e. window)
select(contact) {
this.selectedId = contact.id;
console.log(contact);
return true;
}

Fixed it. It wasn't working because I had pushstate enabled. That clears things up. Thanks therealklanni.