Uncaught ReferenceError: Bus is not defined in Spark Laravel - vuejs2

I was trying to move the some functionality which is the Drop down of the Laravel Spark at the NavBar to my app.blade.php .
my code looks like this
<body class="skin-1">
<!-- Wrapper-->
<div id="spark-app" v-cloak>
<!-- Navigation -->
#include('layouts.wf_navigation')
<!-- Page wraper -->
<div id="page-wrapper" class="gray-bg">
<!-- Main view -->
#yield('content')
<!-- Footer -->
#include('layouts.footer')
</div>
<!-- End page wrapper-->
</div>
<!-- End wrapper-->
#show
<script src="/js/app.js"></script>
but I am getting an error
Uncaught ReferenceError: Bus is not defined
the error is referencing to this line of code in APp.js
Bus.$on('updateUser', function () {
self.getUser();
})
UPDATE
The Bus variable is defined in the App.js itself the code looks like this
if (window.Vue === undefined) {
window.Vue = __webpack_require__(287);
window.Bus = new Vue();
}
note: the previous issue got fixed by removing the the extra Vuejs file which was included in the top of my app.blade.php
Update 1
There is new error
[Vue warn]: Templates should only be responsible for mapping the state
to the UI. Avoid placing tags with side-effects in your templates,
such as .
the templates which are being included are
wf_navigation.blade.php
<div class="row border-bottom">
<nav class="navbar navbar-static-top white-bg" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i class="fa fa-bars"></i> </a>
<form role="search" class="navbar-form-custom" method="post" action="/">
<div class="form-group">
<input type="text" placeholder="Search for something..." class="form-control" name="top-search" id="top-search" />
</div>
</form>
</div>
<ul class="nav navbar-top-links navbar-right">
<?php $currentTeam = auth()->user()->currentTeam; ?>
#if($currentTeam)
<li>
<a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{ $currentTeam->name }}
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
Profile
</li>
<li>
Members
</li>
<li>
Subscription
</li>
<li>
Invoices
</li>
#include('spark::nav.teams')
</ul>
</li>
#endif
</ul>
</nav>
</div>
Which is calling #include('spark::nav.teams')
the teams.blade.php looks like this
<li class="dropdown-header">{{ ucfirst(str_plural(Spark::teamString())) }}</li>
<!-- Create Team -->
#if (Spark::createsAdditionalTeams())
<li>
<a href="/settings#/{{str_plural(Spark::teamString())}}">
<i class="fa fa-fw fa-btn fa-plus"></i>Create {{ ucfirst(Spark::teamString()) }}
</a>
</li>
#endif
<!-- Switch Current Team -->
#if (Spark::showsTeamSwitcher())
<li v-for="team in teams">
<a :href="'/{{ str_plural(Spark::teamString()) }}/'+ team.id +'/switch'">
<span v-if="user.current_team_id == team.id">
<i class="fa fa-fw fa-btn fa-check text-success"></i>#{{ team.name }}
</span>
<span v-else>
<img :src="team.photo_url" class="spark-team-photo-xs"><i class="fa fa-btn"></i>#{{ team.name }}
</span>
</a>
</li>
#endif
<li class="divider"></li>
'footer.blade.php'
<div class="footer">
<div class="pull-right">
V4.0
</div>
<div>
<strong>Powered By</strong> Energy Engine © 2010-2017
</div>
</div>
I am new to vue so no idea whats happening there

Related

SmartWizard vertical style

I am using jquery SmartWizard control and want to show the toolbar vertically with the content for each tab to the right.However hen I run the below code, I get the error 'Element not found .nav'. What am I doing wrong? Any help is appreciated. Is it possible to make smartwizard show vertically with tab content to the side.
#model ApplicationViewModel
<div id="smartwizard">
<h3>Application</h3>
<div class="row">
<div class="col-3">
<ul class="nav flex-column nav-pills">
<li>
<a class="nav-link" href="#step-1">
Personal Information
</a>
</li>
<li>
<a class="nav-link" href="#step-2">
Education
</a>
</li>
<li>
<a class="nav-link" href="#step-3">
Professional Experience
</a>
</li>
<li>
<a class="nav-link" href="#step-4">
Business and Finanical Information
</a>
</li>
</ul>
</div>
<div class="col-9">
<div class="tab-content">
<div id="step-1" class="tab-pane" role="tabpanel">
<partial name="_PersonalInfo" model="Model" />
</div>
<div id="step-2" class="tab-pane" role="tabpanel">
Education
</div>
<div id="step-3" class="tab-pane" role="tabpanel">
Professional Experience
</div>
<div id="step-4" class="tab-pane" role="tabpanel">
Business and Finanical Information
</div>
</div>
</div>
</div>
</div>
#section scripts{
<script>
$(document).ready(function () {
// SmartWizard initialize
$('#smartwizard').smartWizard({
toolbarSettings: {
toolbarButtonPosition: 'right', // left, right, center
showNextButton: true, // show/hide a Next button
showPreviousButton: false, // show/hide a Previous button
toolbarExtraButtons: [$('<button></button>').text('Save')
.addClass('btn btn-info')
] // Extra buttons to show on toolbar, array of jQuery input/buttons elements
}
});
});
</script>
}

Dependency Injection not working when I using taghelper to trigger controller

I am using tag helper to activate the controller but when I use specifically asp-controller and asp-action it doesn't help me to enable dependency injection service and
and the website crashed,
InvalidOperationException: Unable to resolve service for type 'Application.Interfaces.Repositories.ILessonService' while attempting to activate 'API.Controllers.LessonController'
but when I use href in ... then works normally
<a class="collapse-item" asp-action="Index" asp-controller="Lesson">Reading</a>
<a class="collapse-item" href="/Lesson/Index">Listening</a>
This is whole view:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin 2 - Dashboard</title>
<!-- Custom fonts for this template-->
<link href="~/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link
href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
rel="stylesheet">
<!-- Custom styles for this template-->
<link href="~/css/sb-admin-2.min.css" rel="stylesheet">
</head>
<body id="page-top">
<!-- Page Wrapper -->
<div id="wrapper">
<!-- Sidebar -->
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
<!-- Sidebar - Brand -->
<a class="sidebar-brand d-flex align-items-center justify-content-center" href="/Home/Index">
<div class="sidebar-brand-icon rotate-n-15">
<i class="fas fa-laugh-wink"></i>
</div>
<div class="sidebar-brand-text mx-3">SB Admin <sup>2</sup></div>
</a>
<!-- Divider -->
<hr class="sidebar-divider my-0">
<!-- Nav Item - Dashboard -->
<li class="nav-item active">
<a class="nav-link" href="/Home/Index">
<i class="fas fa-fw fa-tachometer-alt"></i>
<span>Dashboard</span>
</a>
</li>
<!-- Divider -->
<hr class="sidebar-divider">
<!-- Heading -->
<div class="sidebar-heading">
Interface
</div>
<!-- Nav Item - Pages Collapse Menu -->
<li class="nav-item">
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseTwo"
aria-expanded="true" aria-controls="collapseTwo">
<i class="fas fa-fw fa-cog"></i>
<span>Admin</span>
</a>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<h6 class="collapse-header">Người dùng</h6>
<a class="collapse-item" asp-controller="User" asp-action="Index">Quản lý người dùng</a>
<a class="collapse-item" href="cards.html">Cards</a>
</div>
</div>
</li>
<!-- Nav Item - Utilities Collapse Menu -->
<li class="nav-item">
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseUtilities"
aria-expanded="true" aria-controls="collapseUtilities">
<i class="fas fa-fw fa-wrench"></i>
<span>Giáo Viên</span>
</a>
<div id="collapseUtilities" class="collapse" aria-labelledby="headingUtilities"
data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<h6 class="collapse-header">Lesson</h6>
<a class="collapse-item" asp-action="Index" asp-controller="Lesson">Reading</a>
<a class="collapse-item" href="/Lesson/Index">Listening</a>
<a class="collapse-item" href="/Teacher/Speaking">Speaking</a>
<a class="collapse-item" href="/Teacher/Writting">writting</a>
<a class="collapse-item" href="/Teacher/Test">Testing</a>
</div>
</div>
</li>
<!-- Nav Item - Utilities Collapse Menu -->
<!-- Divider -->
<hr class="sidebar-divider">
<!-- Heading -->
<div class="sidebar-heading">
Addons
</div>
<!-- Nav Item - Pages Collapse Menu -->
<li class="nav-item">
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapsePages"
aria-expanded="true" aria-controls="collapsePages">
<i class="fas fa-fw fa-folder"></i>
<span>Pages</span>
</a>
<div id="collapsePages" class="collapse" aria-labelledby="headingPages" data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<h6 class="collapse-header">Login Screens:</h6>
<a class="collapse-item" href="login.html">Login</a>
<a class="collapse-item" href="register.html">Register</a>
<a class="collapse-item" href="forgot-password.html">Forgot Password</a>
<div class="collapse-divider"></div>
<h6 class="collapse-header">Other Pages:</h6>
<a class="collapse-item" href="404.html">404 Page</a>
<a class="collapse-item" href="blank.html">Blank Page</a>
</div>
</div>
</li>
<!-- Nav Item - Charts -->
<li class="nav-item">
<a class="nav-link" href="charts.html">
<i class="fas fa-fw fa-chart-area"></i>
<span>Charts</span>
</a>
</li>
<!-- Nav Item - Tables -->
<li class="nav-item">
<a class="nav-link" href="tables.html">
<i class="fas fa-fw fa-table"></i>
<span>Tables</span>
</a>
</li>
<!-- Divider -->
<hr class="sidebar-divider d-none d-md-block">
<!-- Sidebar Toggler (Sidebar) -->
<div class="text-center d-none d-md-inline">
<button class="rounded-circle border-0" id="sidebarToggle"></button>
</div>
<!-- Sidebar Message -->
<div class="sidebar-card">
<img class="sidebar-card-illustration mb-2" src="~/img/undraw_rocket.svg" alt="">
<p class="text-center mb-2"><strong>SB Admin Pro</strong> is packed with premium features, components, and more!</p>
<a class="btn btn-success btn-sm" href="https://startbootstrap.com/theme/sb-admin-pro">Upgrade to Pro!</a>
</div>
</ul>
<!-- End of Sidebar -->
<!-- Content Wrapper -->
<div id="content-wrapper" class="d-flex flex-column">
<!-- Main Content -->
<div id="content">
<!-- Topbar -->
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
<!-- Sidebar Toggle (Topbar) -->
<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
<i class="fa fa-bars"></i>
</button>
<!-- Topbar Search -->
<form class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
<div class="input-group">
<input type="text" class="form-control bg-light border-0 small" placeholder="Search for..."
aria-label="Search" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-primary" type="button">
<i class="fas fa-search fa-sm"></i>
</button>
</div>
</div>
</form>
<!-- Topbar Navbar -->
<ul class="navbar-nav ml-auto">
<!-- Nav Item - Search Dropdown (Visible Only XS) -->
<li class="nav-item dropdown no-arrow d-sm-none">
<a class="nav-link dropdown-toggle" href="#" id="searchDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-search fa-fw"></i>
</a>
<!-- Dropdown - Messages -->
<div class="dropdown-menu dropdown-menu-right p-3 shadow animated--grow-in"
aria-labelledby="searchDropdown">
<form class="form-inline mr-auto w-100 navbar-search">
<div class="input-group">
<input type="text" class="form-control bg-light border-0 small"
placeholder="Search for..." aria-label="Search"
aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-primary" type="button">
<i class="fas fa-search fa-sm"></i>
</button>
</div>
</div>
</form>
</div>
</li>
<!-- Nav Item - Alerts -->
<li class="nav-item dropdown no-arrow mx-1">
<a class="nav-link dropdown-toggle" href="#" id="alertsDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-bell fa-fw"></i>
<!-- Counter - Alerts -->
<span class="badge badge-danger badge-counter">3+</span>
</a>
<!-- Dropdown - Alerts -->
<div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in"
aria-labelledby="alertsDropdown">
<h6 class="dropdown-header">
Alerts Center
</h6>
<a class="dropdown-item d-flex align-items-center" href="#">
<div class="mr-3">
<div class="icon-circle bg-primary">
<i class="fas fa-file-alt text-white"></i>
</div>
</div>
<div>
<div class="small text-gray-500">December 12, 2019</div>
<span class="font-weight-bold">A new monthly report is ready to download!</span>
</div>
</a>
<a class="dropdown-item d-flex align-items-center" href="#">
<div class="mr-3">
<div class="icon-circle bg-success">
<i class="fas fa-donate text-white"></i>
</div>
</div>
<div>
<div class="small text-gray-500">December 7, 2019</div>
$290.29 has been deposited into your account!
</div>
</a>
<a class="dropdown-item d-flex align-items-center" href="#">
<div class="mr-3">
<div class="icon-circle bg-warning">
<i class="fas fa-exclamation-triangle text-white"></i>
</div>
</div>
<div>
<div class="small text-gray-500">December 2, 2019</div>
Spending Alert: We've noticed unusually high spending for your account.
</div>
</a>
<a class="dropdown-item text-center small text-gray-500" href="#">Show All Alerts</a>
</div>
</li>
<!-- Nav Item - Messages -->
<li class="nav-item dropdown no-arrow mx-1">
<a class="nav-link dropdown-toggle" href="#" id="messagesDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-envelope fa-fw"></i>
<!-- Counter - Messages -->
<span class="badge badge-danger badge-counter">7</span>
</a>
<!-- Dropdown - Messages -->
<div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in"
aria-labelledby="messagesDropdown">
<h6 class="dropdown-header">
Message Center
</h6>
<a class="dropdown-item d-flex align-items-center" href="#">
<div class="dropdown-list-image mr-3">
<img class="rounded-circle" src="~/img/undraw_profile_1.svg"
alt="">
<div class="status-indicator bg-success"></div>
</div>
<div class="font-weight-bold">
<div class="text-truncate">
Hi there! I am wondering if you can help me with a
problem I've been having.
</div>
<div class="small text-gray-500">Emily Fowler · 58m</div>
</div>
</a>
<a class="dropdown-item d-flex align-items-center" href="#">
<div class="dropdown-list-image mr-3">
<img class="rounded-circle" src="~/img/undraw_profile_2.svg"
alt="">
<div class="status-indicator"></div>
</div>
<div>
<div class="text-truncate">
I have the photos that you ordered last month, how
would you like them sent to you?
</div>
<div class="small text-gray-500">Jae Chun · 1d</div>
</div>
</a>
<a class="dropdown-item d-flex align-items-center" href="#">
<div class="dropdown-list-image mr-3">
<img class="rounded-circle" src="~/img/undraw_profile_3.svg"
alt="">
<div class="status-indicator bg-warning"></div>
</div>
<div>
<div class="text-truncate">
Last month's report looks great, I am very happy with
the progress so far, keep up the good work!
</div>
<div class="small text-gray-500">Morgan Alvarez · 2d</div>
</div>
</a>
<a class="dropdown-item d-flex align-items-center" href="#">
<div class="dropdown-list-image mr-3">
<img class="rounded-circle" src="https://source.unsplash.com/Mv9hjnEUHR4/60x60"
alt="">
<div class="status-indicator bg-success"></div>
</div>
<div>
<div class="text-truncate">
Am I a good boy? The reason I ask is because someone
told me that people say this to all dogs, even if they aren't good...
</div>
<div class="small text-gray-500">Chicken the Dog · 2w</div>
</div>
</a>
<a class="dropdown-item text-center small text-gray-500" href="#">Read More Messages</a>
</div>
</li>
<div class="topbar-divider d-none d-sm-block"></div>
<!-- Nav Item - User Information -->
<li class="nav-item dropdown no-arrow">
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="mr-2 d-none d-lg-inline text-gray-600 small">Welcome</span>
<img class="img-profile rounded-circle"
src="~/img/undraw_profile.svg">
</a>
<!-- Dropdown - User Information -->
<div class="dropdown-menu dropdown-menu-right shadow animated--grow-in"
aria-labelledby="userDropdown">
<a class="dropdown-item" href="/Profile/Index">
<i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
#User.Identity.Name
</a>
<a class="dropdown-item" href="#">
<i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>
Settings
</a>
<a class="dropdown-item" href="#">
<i class="fas fa-list fa-sm fa-fw mr-2 text-gray-400"></i>
Activity Log
</a>
<div class="dropdown-divider"></div>
<form asp-controller="User" asp-action="Logout" method="post">
<button type="submit" class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
Logout
</button>
</form>
#* <a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
</a> *#
</div>
</li>
</ul>
</nav>
<!-- End of Topbar -->
<!-- Begin Page Content -->
#RenderBody()
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
<!-- Footer -->
<footer class="sticky-footer bg-white">
<div class="container my-auto">
<div class="copyright text-center my-auto">
<span>Copyright © Your Website 2020</span>
</div>
</div>
</footer>
<!-- End of Footer -->
</div>
<!-- End of Content Wrapper -->
</div>
<!-- End of Page Wrapper -->
<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>
<!-- Logout Modal-->
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
<a class="btn btn-primary" href="login.html">Logout</a>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript-->
<script src="~/vendor/jquery/jquery.min.js"></script>
<script src="~/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="~/vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for all pages-->
<script src="~/js/sb-admin-2.min.js"></script>
<!-- Page level plugins -->
<script src="~/vendor/chart.js/Chart.min.js"></script>
<!-- Page level custom scripts -->
<script src="~/js/demo/chart-area-demo.js"></script>
<script src="~/js/demo/chart-pie-demo.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
#RenderSection("scripts", required: false)
</body>
</html>
Here is the controller:
public class LessonController : ControllerBase
{
private readonly ILessonService _lessonService;
public LessonController(ILessonService lessonService)
{
_lessonService = lessonService;
}
// GET: /<controller>/
[HttpGet]
public async Task<IActionResult> Index([FromQuery] GetLessonsRequest request)
{
var lessons = await _lessonService.GetGuidelinesPaging(request);
return Ok(lessons);
}
}
Startup.cs:
public void ConfigureServices(IServiceCollection services)
{
services.AddDbContext<ToeicOnlineContext>(options =>
options.UseSqlServer(Configuration.GetConnectionString("MvcToeicContext")));
services.AddApplicationLayer();
services.AddAutoMapper(typeof(Startup));
services.AddControllers().AddFluentValidation();
//DI
services.AddIdentity<User, Role>()
.AddEntityFrameworkStores<ToeicOnlineContext>()
.AddDefaultTokenProviders();;
services.AddScoped<IUserClaimsPrincipalFactory<User>, UserClaimsPrincipalFactory<User, Role>>();
services.AddTransient<UserManager<User>, UserManager<User>>();
services.AddTransient<SignInManager<User>, SignInManager<User>>();
services.AddTransient<RoleManager<Role>, RoleManager<Role>>();
services.AddTransient<ILevelRepositoryAsync, LevelRepositoryAsync>();
services.AddTransient<IClassRepositoryAsync, ClassRepositoryAsync>();
services.AddTransient<ILessonService, LessonService>();
services.AddTransient<ICategoryRepositoryAsync, CategoryRepositoryAsync>();
services.AddTransient(typeof(IGenericRepositoryAsync<>), typeof(GenericRepositoryAsync<>));
services.AddTransient<IUserService, UserService>();
services.AddTransient<IRoleService, RoleService>();
services.AddSwaggerExtension(Configuration);
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
app.UseSwagger();
app.UseSwaggerUI(c => c.SwaggerEndpoint("/swagger/v1/swagger.json", "API v1"));
}
app.UseHttpsRedirection();
app.UseAuthentication();
app.UseRouting();
app.UseAuthorization();
app.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
});
}
Update
It works normally with swagger, but when I use another project to call API the error like above occurs.

I found that there is a LessonContrller in your ToeicOnlineAdminApp and a same name controller in the api project, which cause this problem. The anchor with tag helper generates the url as api/lesson that targets the api controller. and the anchor with href="/Lesson/Index" targets that controller in your current project.

Bootstrap tab content won't open after clicking tab link

Code looks fine in my opinion, I basically used the example code from the docs. jQuery is also referenced before bootstrap.js as well. What could be the issue here? When I click on any other tab that's not active, it still only displays the first tabs content.
<section id="how-it-works">
<div class="container">
<div class="wizard">
<div class="wizard-inner">
<div class="connecting-line"></div>
<ul class="nav nav-tabs">
<li class="active">
<a href="#tab1" data-toggle="tab" aria-controls="tab1" role="tab" title="Step 1">
<span class="round-tab">
<i class="glyphicon glyphicon-folder-open"></i>
</span>
</a>
</li>
<li>
<a href="#tab2" data-toggle="tab" aria-controls="tab2" role="tab" title="Step 2">
<span class="round-tab">
<i class="glyphicon glyphicon-pencil"></i>
</span>
</a>
</li>
<li>
<a href="#tab3" data-toggle="tab" aria-controls="tab3" role="tab" title="Step 3">
<span class="round-tab">
<i class="glyphicon glyphicon-picture"></i>
</span>
</a>
</li>
<li>
<a href="#tab4" data-toggle="tab" aria-controls="tab4" role="tab" title="That's It!">
<span class="round-tab">
<i class="glyphicon glyphicon-ok"></i>
</span>
</a>
</li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane active" id="#tab1" role="tabpanel">
<h3>Step 1</h3>
<p>This is step 1</p>
</div>
<div class="tab-pane" id="#tab2" role="tabpanel">
<h3>Step 2</h3>
<p>This is step 2</p>
</div>
<div class="tab-pane" id="#tab3" role="tabpanel">
<h3>Step 3</h3>
<p>This is step 3</p>
</div>
<div class="tab-pane" id="#tab4" role="tabpanel">
<h3>Step 4</h3>
<p>That's It!</p>
</div>
</div>
</div>
</div>
</section>

Try removing the # in the ID of each tab under tab content.
id="#tab4" to id="tab4"
Also, you tagged bootstrap 3 but the code you are using looks like it is from bootstrap 4.
https://v4-alpha.getbootstrap.com/components/navs/

How do I conditionally add a class in aurelia template

I am looking at a way to add a class dynamically to aurelia template. I have to add an active class if the particular li is visible.
Example
<section id="jobsCategoryContainer" class="jobsCategoryContainer">
<h1>{{title}}</h1>
<div *ngFor = "#slide of jobCategorySlides; #i = index" id="job-category-slide_{{i}}" class="job-category-slide" [ngClass]="{active: initialCarouselIndex == i}">
<ul *ngFor = "#item of slide">
<li class="jobDetails" *ngFor="#job of item; #i = index">
<div>
<span id="{{job.name}}" class="jobName">{{ job.name }}</span>
</div>
<div>
<span>{{job.noOfJobs}}</span>
</div>
</li>
</ul>
</div>
<div>
Previous
Next
</div>
</section>
I want to add the active class on below code
<div class="phs-widget-body">
<div class="phs-carousel-inner">
<ul repeat.for = "slide of nearByJobSlides" class="phs-item phs-grid-row" >
<li repeat.for = "item of slide" class="phs-small-6">
<a href="javascript:void(0)">
<div class="phs-job-title">${item.title}</div>
<div class="phs-job-info">
<span class="phs-job-loacation">${item.location}</span>
<span class="phs-job-category">${item.category}</span>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="phs-widget-footer">
<a class="left" href="#phsNearbyJobs" role="button" data-slide="prev">
<i class="fa fa-angle-left"></i> Move to Previous
</a>
<ol class="phs-carousel-indicators">
<li repeat.for = "slide of nearByJobSlides" data-target="#phsNearbyJobs" data-slide-to="${$index}" class="" click.trigger="changeActiveClass()"></li>
</ol>
<a class="right" href="#phsNearbyJobs" role="button" data-slide="next">
Move to Next <i class="fa fa-angle-right"></i>
</a>
</div>
As well how do I pass an event Object on aurelia?

Just use interpolation
<div class="${ applyMyClass ? 'my-class' : '' }">
E.g.
<div class="${ carouselIndex == $index ? 'active' : '' }">
You don't need to do this with a click event, it's the same as ng2 (only less code!)

Selenium - click the second prompt with same ID

I have a complex HTML like the below.There are at least two elements with data-automation-id='promptIcon' attribute. In Selenium IDE //*[#data-automation-id='promptIcon']/ selected the first occurrence (i.e. next to the label Category). Now I would like to click/select the second element with data-automation-id='promptIcon' attribute (next to the label Owner). How best to accomplish this?
<div class="GB-VO1SBAIJ">
<div class="GB-VO1SBNHJ" style="left: 0%;">
<div id="wd-EditPage-1$4296" class="GB-VO1SBOXH GB-VO1SBHXH GB-VO1SBJXH GB-VO1SBJN">
<div class="GB-VO1SBBYH">
<div class="GB-VO1SBJN" id="wd-PageContent-6$8263">
<div class="GB-VO1SBAJH">
<div class="GB-VO1SBIIH">
<div id="wd-Panel-6$8269" data-automation-id="panel" class="GB-VO1SBF1J GB-VO1SBJN">
<div class="gwt-Label GB-VO1SBJ1J GB-VO1SBI1J">
</div>
<div class="GB-VO1SBH1J">
<div class="GB-VO1SBAJH GB-VO1SBG1J">
<ul role="presentation" class="GB-VO1SBNHH GB-VO1SBGIH">
<li role="presentation" class="GB-VO1SBDHH GB-VO1SBJIH">
<div class="GB-VO1SBFHH">
<label data-automation-id="formLabel" id="15$20858--uid318-formLabel">Category<span class="gwt-InlineLabel GB-VO1SBDIH"> Required</span>
</label>
<div aria-hidden="true" class="GB-VO1SBGHH wd-5b94a643-7d98-473f-b3a4-be58aaf8d4f5">Category</div>
</div>
<div class="GB-VO1SBHHH">
<div aria-labelledby="15$20858--uid318-formLabel" aria-invalid="false" tabindex="-2" id="15$20858--uid318" data-automation-id="responsiveMonikerInput" class="GB-VO1SBCFL GB-VO1SBJN GB-VO1SBIEL GB-VO1SBPFL GB-VO1SBNFL">
<div class="GB-VO1SBHFL">
<ul data-automation-id="selectedItemList" role="list" class="GB-VO1SBJUI GB-VO1SBOUI GB-VO1SBGFL" tabindex="-2">
<li class="GB-VO1SBNUI">
<div id="-uid331" role="menuitem" tabindex="-2" class="GB-VO1SBFUI GB-VO1SBMUI">
<div data-automation-id="selectedItem_2200$2" class="GB-VO1SBDVH">
<ul role="presentation" class="GB-VO1SBFUH GB-VO1SBLUH">
<li class="GB-VO1SBCVH">
<i title="Clear Value" class="GB-VO1SBCIF GB-VO1SBJ1I GB-VO1SBB1I GB-VO1SBHUH" data-automation-id="DELETE_charm" role="presentation" data-icon-rtl-id="" data-icon-id="">
</i>
</li>
</ul>
<div title="Common" data-automation-label="Common" data-automation-id="promptOption" class="gwt-Label GB-VO1SBEVH">Common</div>
<ul class="GB-VO1SBFUH">
</ul>
</div>
</div>
</li>
<li class="GB-VO1SBNUI">
<div id="-uid332" role="menuitem" tabindex="-2" class="GB-VO1SBFUI GB-VO1SBMUI">
<div data-automation-id="selectedItem_2200$3" class="GB-VO1SBDVH">
<ul role="presentation" class="GB-VO1SBFUH GB-VO1SBLUH">
<li class="GB-VO1SBCVH">
<i title="Clear Value" class="GB-VO1SBCIF GB-VO1SBJ1I GB-VO1SBB1I GB-VO1SBHUH" data-automation-id="DELETE_charm" role="presentation" data-icon-rtl-id="" data-icon-id="">
</i>
</li>
</ul>
<div title="Absence" data-automation-label="Absence" data-automation-id="promptOption" class="gwt-Label GB-VO1SBEVH">Absence</div>
<ul class="GB-VO1SBFUH">
</ul>
</div>
</div>
</li>
</ul>
</div>
<span tabindex="0" data-automation-id="promptIcon" title="Prompt" class="GB-VO1SBBGL">
<i class="GB-VO1SBCIF GB-VO1SBCGL" data-automation-id="icon" role="presentation" data-icon-rtl-id="" data-icon-id="">
</i>
</span>
<div aria-hidden="true" tabindex="0" style="display: none;" class="GB-VO1SBP3I" role="button" data-automation-morelinkexpanded="false" data-automation-id="wd-MoreLink">
<img alt="" draggable="false" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="gwt-Image GB-VO1SBPII GB-VO1SBB4I">
<span title="More (-3)" class="GB-VO1SBC4I">More (-3)</span>
</div>
</div>
</div>
</li>
<li role="presentation" class="GB-VO1SBDHH">
<div class="GB-VO1SBFHH">
<label data-automation-id="formLabel" id="15$26787--uid319-formLabel">Owner</label>
<div aria-hidden="true" class="GB-VO1SBGHH wd-5b94a643-7d98-473f-b3a4-be58aaf8d4f5">Owner</div>
</div>
<div class="GB-VO1SBHHH">
<div aria-labelledby="15$26787--uid319-formLabel" aria-invalid="false" tabindex="-2" id="15$26787--uid319" data-automation-id="responsiveMonikerInput" class="GB-VO1SBCFL GB-VO1SBJEL GB-VO1SBJN GB-VO1SBIEL">
<div class="GB-VO1SBHFL">
<ul data-automation-id="selectedItemList" role="menu" class="GB-VO1SBJUI GB-VO1SBGFL GB-VO1SBOUI" tabindex="-2">
</ul>
</div>
<span tabindex="0" data-automation-id="promptIcon" title="Prompt" class="GB-VO1SBBGL">
<i class="GB-VO1SBCIF GB-VO1SBCGL" data-automation-id="icon" role="presentation" data-icon-rtl-id="" data-icon-id="">
</i>
</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="GB-VO1SBIYH">
</div>
<footer class="GB-VO1SBCYH">
<div>
<div data-automation-id="toolbarSupportingWidgetsContainer" class="GB-VO1SBOOE GB-VO1SBAOE">
<div class="GB-VO1SBLNE">
<div class="GB-VO1SBMNE">
<div class="GB-VO1SBCOE">
</div>
<div class="GB-VO1SBPOE">
</div>
</div>
</div>
<div>
<div class="gwt-Label GB-VO1SBDNE">
</div>
</div>
</div>
<div class="GB-VO1SBCPE GB-VO1SBEPE">
</div>
</div>
</footer>
</div>
</div>
</div>

If you are using XPath, there is a easy way to do it:
//*[#data-automation-id='promptIcon'][2]
Explaining:
//*[#data-automation-id='promptIcon']
It is your actual xpath, will select any html tag that has a attr named "data-automation-id" with the exactly value "promptIcon".
[2]
The element node that you want to select. if you put [5], XPath will try to select the 5° result in this html, based in what note you're calling it.