We Keep Coding

How to set sidebar menu active when clicked in vue.js?

I want to set sidebar menu active when clicked. Now only the first menu is selected as active. If other menus are selected, the first menu still remains as active menu. How to implement this ?
My code:
<div id="mobile_sidebar_display">
<div
class="logo_section d-flex justify-content-center align-items-center"
>
<a v-on:click="closeSideDrawer" :href="base + '/'">
<img src="../../assets/images/logo_2.svg" class="w-100" />
</a>
</div>
<div style="height: 10px"></div>
<a
v-on:click="closeSideDrawer"
class="sidebar_link active"
:href="base + '/'"
><i class="fas fa-home"></i> <span class="ml-2">Home</span></a
>
<a v-on:click="closeSideDrawer" class="sidebar_link" href="#"
><i class="far fa-user"></i> <span class="ml-2">Courses</span></a
>
<router-link class="sidebar_link" to="/QuizGrid"
><i class="fas fa-puzzle-piece"></i>
<span v-on:click="closeSideDrawer" class="ml-2"
>Puzzles</span
></router-link
>
</div>

Search UL generated by MySQL & PHP

I've implemented a search bar that loops into an UL (myUL) and display the results (h5). This works fine for static data but once I implement the PHP call to fetch MySQL, the search won't work and display the results anymore. On the console I see that it's not able to find the query results.
console log
Here's the piece of the code I've implemented the Search Input and ran the query:
<div class="page">
<div class="page-content">
<!-- Panel -->
<div class="panel">
<div class="panel-body">
<form class="page-search-form" role="search">
<div class="input-search input-search-dark">
<i class="input-search-icon md-search" aria-hidden="true"></i>
<input type="text" class="form-control" id="myInput" name="search" onkeyup="myFunction()" placeholder="Search Users">
<button type="button" class="input-search-close icon md-close" aria-label="Close"></button>
</div>
</form>
<div class="nav-tabs-horizontal nav-tabs-animate" data-plugin="tabs">
<div class="dropdown page-user-sortlist">
Order By: <a class="dropdown-toggle inline-block" data-toggle="dropdown"
href="#" aria-expanded="false">Last Active</a>
<div class="dropdown-menu animation-scale-up animation-top-right animation-duration-250"
role="menu">
<a class="active dropdown-item" href="javascript:void(0)">Last Active</a>
<a class="dropdown-item" href="javascript:void(0)">Username</a>
<a class="dropdown-item" href="javascript:void(0)">Location</a>
<a class="dropdown-item" href="javascript:void(0)">Register Date</a>
</div>
</div>
<!-- KIEL ALL CONTACTS -->
<ul class="nav nav-tabs nav-tabs-line" role="tablist">
</ul>
<div class="tab-content">
<div class="tab-pane animation-fade active" id="all_contacts" role="tabpanel">
<ul class="list-group" id="myUL">
<?php
$result = mysqli_query($conn,"SELECT * FROM customer");
while($row = mysqli_fetch_array($result))
{
?>
<li class="list-group-item">
<div class="media">
<div class="pr-0 pr-sm-20 align-self-center">
<div class="avatar avatar-online">
<img src="../../../global/portraits/1.jpg" alt="...">
<i class="avatar avatar-busy"></i>
</div>
</div>
<div class="media-body align-self-center">
<h5 class="mt-0 mb-5 name">
<?php echo $row["customerName"]; ?>
<small>Ultimo Acesso: <?php echo $row["customerLastLogin"]; ?></small>
</h5>
<p>
<i class="icon icon-color md-pin" aria-hidden="true"></i> Street 4425 Golf Course Rd
</p>
<div>
<a class="text-action" href="javascript:void(0)">
<i class="icon icon-color md-email" aria-hidden="true" title="<?php echo $row["customerEmail"]; ?>"></i>
</a>
<a class="text-action" href="javascript:void(0)">
<i class="icon icon-color md-smartphone" aria-hidden="true" title="<?php echo $row["customerPhone"]; ?>"></i>
</a>
<a class="text-action" href="javascript:void(0)">
<i class="fas fa-box-open md-smartphone" aria-hidden="true" title="<?php echo $row["customerId"]; ?>"></i>
</a>
</div>
</div>
<div class="pl-0 pl-sm-20 mt-15 mt-sm-0 align-self-center">
<button type="button" class="btn btn-icon btn-primary waves-effect waves-classic" data-toggle="modal" data-target="#updateUser<?php echo $row['customerId']?>">
<i class="fas fa-pencil-alt md-notifications" aria-hidden="true"></i>
</button>
<button type="button" class="btn btn-icon btn-danger waves-effect waves-classic">
<i class="fas fa-trash-alt md-notifications" aria-hidden="true"></i>
</button>
</div>
</div>
</li>
<script>
function myFunction() {
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
console.log(li);
// debugger;
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("h5")[0];
txtValue = a.textContent || a.innerText;
// debugger;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
</script>
</ul>
<?php
}
// close connection database
mysqli_close($conn);
?>
Any idea?
Thanks.

How use sorting in ngx-datatable / ngx-datatable-column in Angular?

I'm trying to use ngx-datatable's sort feature to perform the action like this link: https://swimlane.github.io/ngx-datatable/
However, it does not work.
I've tried without luck to use properties like:
sortable="true"
[sortType]="'multi'"
[sorts]="[{prop: 'id_pessoa', dir: 'asc'}]"
Below is the code and version of ngx-datatable:
"#swimlane/ngx-datatable": "^15.0.2"
<section class="basic-elements">
<!-- Breadcrumbs -->
<nav>
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a routerLink="/">Home</a>
</li>
<li class="breadcrumb-item active">
Pessoas
</li>
</ol>
</nav>
<div id="mb-4" class="row mb-4">
<div class="col-md">
<h1 class="h2">Pessoas</h1>
</div>
<div class="col-md">
<button routerLink="novo" type="button" class="btn btn-raised btn-raised btn-success btn-no-margin float-right btn-heigh2">
+ Nova Pessoa
</button>
</div>
</div>
<div id="mb-4" class="row mb-4">
<div class="col-md-11">
<input type="text" class="form-control" id="email" >
</div>
<div class="col-md-1">
<button [disabled]="submittingForm " type="submit" class="btn btn-raised btn-raised btn-no-margin btn-primary float-right btn-heigh button-margin-top">
Buscar
</button>
</div>
</div>
<div class="row text-left">
<div class="col-md-12">
<div class="card">
<div class="card-content">
<ngx-datatable
class="bootstrap"
[rows]="rows"
[columns]="columns"
[columnMode]="'force'"
[headerHeight]="10"
[footerHeight]="35"
[rowHeight]="35"
[externalPaging]="true"
[externalSorting]="true"
[scrollbarH]="true"
[count]="page.count"
[offset]="page.offset"
[limit]="page.limit"
[sortType]="'multi'"
[sorts]="[{prop: 'id_pessoa', dir: 'asc'}]"
(page)="pageCallback($event)">
<ngx-datatable-column name="Ações" sortable="true" prop="id_pessoa" width=140>
<ng-template let-row="data" let-value="value" ngx-datatable-cell-template>
<a class="btn btn-outline-primary mr-1" [routerLink]="[value,'editar']" href="javascript:void(0)">
<i class="fa fa-edit" title="Editar"></i>
</a>
<a class="btn btn-outline-primary mr-1" [routerLink]="[value,'subst']" href="javascript:void(0)">
<i class="fa fa-exchange" title="Substituir"></i>
</a>
<a class="btn btn-outline-primary mr-1" (click)="deletePessoa(value)" href="javascript:void(0)">
<i class="fa fa-trash" title="Remover"></i>
</a>
</ng-template>
</ngx-datatable-column>
<!--<ngx-datatable-column name="Pré-cad." prop="pre_cadastro" width=75>
<ng-template ngx-datatable-cell-template let-value="value">
<span *ngIf="value">
<i class="fa fa-check fa-2x"></i>
</span>
<span *ngIf="!value">
-
</span>
</ng-template>
</ngx-datatable-column>-->
<ngx-datatable-column *ngFor="let col of columns" [sortable]="true" [name]="col.name" [prop]="col.prop" [width]="col.width" [headerClass]="col.headerClass" [cellClass]="col.cellClass">
</ngx-datatable-column>
<ngx-datatable-column name="Inativo" prop="inativo" width=70>
<ng-template ngx-datatable-cell-template let-value="value">
<span *ngIf="value">
<i class="fa fa-check fa-2x"></i>
</span>
<span *ngIf="!value">
-
</span>
</ng-template>
</ngx-datatable-column>
</ngx-datatable>
</div>
</div>
</div>
</div>

there's an output for sort called sort you can use it and make your callback function
(sort)="onSort($event)"

It looks like you have [externalSorting]="true".
Try changing this to false or removing externalSorting (It defaults to false).

knockout sortable update function afer moving item to different position

I have knockout sortable bookmark page where it is possible to group your bookmarks and change the position. I have all my functions working but i can't seem to get the "afterMove" to work. This is my view:
<div class="col-lg-12">
<div class="bookmarkIconsBox">
<div data-bind="droppable: newGroup, connectClass : 'lists'" class="lists col-lg-6 bookmarkIcons bookmarkActionsBackground"><i class="fa fa-5x fa-plus"></i>Nieuwe groep aanmaken</div>
<div data-bind="droppable: deleteItem, connectClass : 'lists'" class="lists col-lg-6 bookmarkIcons bookmarkActionsBackground"><i class="fa fa-5x fa-trash"></i>Bookmark verwijderen</div>
</div>
<div class="bookmarkBoxTitle" data-bind="visible: $root.visible()">
<input class="title" data-bind="textInput: $root.groupname()" />
<span data-bind="click: function() { $root.setVisible(), $root.changeGroupName($root.groupname())}"><i class="fa fa-2x fa-save"></i></span>
<span data-bind="click: $root.setVisible, visible: $root.visible()"><i class="fa fa-2x fa-close"></i></span>
</div>
<div class="bookmarkBoxTitle" data-bind="visible: $root.visibleBookmarkName()">
<input class="title" data-bind="textInput: $root.bookmarkname()" />
<span data-bind="click: function() { $root.setVisibleBookmarkName(), $root.changeName($root.bookmarkname())}"><i class="fa fa-2x fa-save"></i></span>
<span data-bind="click: $root.setVisibleBookmarkName, visible: $root.visibleBookmarkName()"><i class="fa fa-2x fa-close"></i></span>
</div>
</div>
<div data-bind="foreach: allBookmarks.bookmarkGroups" class="col-lg-12">
<div class="bookmarkBoxTitle">
<h3 class="title" data-bind="text: Description" />
<span data-bind="click: function(){$root.edit(Description)}" class="editName"><i class="fa fa-2x fa-edit"></i></span>
</div>
<div data-bind="sortable: { template: 'itemTmpl', data: bookmarks, connectClass : 'lists', afterMove: $root.update($parent.allBookmarks.bookmarkGroups)}" id="sortable" class="lists bookmarkBackground">
</div>
</div>
<script id="itemTmpl" type="text/html">
<div class="card col-lg-4">
<div>
<span class="moveItem"><i class="fa fa-2x fa-arrows"></i></span>
<span data-bind="click: function(){$root.editBookmarkName(Description)}" class="editName"><i class="fa fa-2x fa-edit" data-bind="visible: !$root.visibleBookmarkName()"></i></span>
</div>
<div class="card-block">
<div class="bookmarkBoxTitle">
<h4 class="card-title" data-bind="text: Description " />
<h4 class="card-title" data-bind="text: $index" />
</div>
<ul class="card-text">
<li data-bind="text: workspace"></li>
<li data-bind="text: role"></li>
</ul>
<a class="btn btn-primary" data-bind="attr : {'href': '/#page/' + link }">Ga naar</a>
</div>
</div>
When i move an item in in a group or to a different group i want it to execute the $root.update() but i can't seem to get it to work.

append image url dynamically to owl carousel 2

I have used owl carousel 2 for product slider. Products are added from the admin panel which needs to be displayed in front-end including images. I am able to add images and call them in the front but it doesn't fit in the owl carousel which creates a messy look on the site. If I directly put it in an image source it works, but calling from Javascript doesn't work.
All I need is that the product info and image should fit within and also owl carousel 2 should be supportive.
I am using jquery 2.1.4 and bootstrap 3.
HTML:
<div class="col-sm-12">
<div class="block block-tabs">
<div class="block-head">
<div class="block-title">
<div class="block-title-text text-lg">best selling</div>
</div>
<ul class="nav-tab">
<li class="active"><a data-toggle="tab" href="#tab-1">All</a></li>
<li ><a data-toggle="tab" href="#tab-2">Personalised</a></li>
<li><a data-toggle="tab" href="#tab-2">Photo Books</a></li>
<li><a data-toggle="tab" href="#tab-1">Calanders</a></li>
<li><a data-toggle="tab" href="#tab-2">LED Lights</a></li>
</ul>
</div>
<div class="block-inner">
<div class="tab-container">
<div id="tab-1" class="tab-panel fade in active">
<ul id="tab1" class="products kt-owl-carousel" data-margin="20" data-loop="true" data-nav="true" data-responsive='{"0":{"items":1},"600":{"items":3},"1000":{"items":5}}'>
</ul>
</div>
<div id="tab-2" class="tab-panel fade">
<ul class="products kt-owl-carousel" data-margin="20" data-loop="true" data-nav="true" data-responsive='{"0":{"items":1},"600":{"items":3},"1000":{"items":5}}'>
<li class="product">
<div class="product-container">
<div class="product-left">
<div class="product-thumb">
<a class="product-img" href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/0/03/Mountain_Bluebird.jpg" alt="Product"></a>
<a title="Quick View" href="#" class="btn-quick-view">Quick View</a>
</div>
</div>
<div class="product-right">
<div class="product-name">
Cotton Lycra Leggings
</div>
<div class="price-box">
<span class="product-price">139.98</span>
<span class="product-price-old">169.00</span>
</div>
<div class="product-star">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
</div>
<div class="product-button">
<a class="btn-add-wishlist" title="Add to Wishlist" href="#">Add Wishlist</a>
<a class="btn-add-comparre" title="Add to Compare" href="#">Add Compare</a>
<a class="button-radius btn-add-cart" title="Add to Cart" href="#">Cart<span class="icon"></span></a>
</div>
</div>
</div>
</li>
<li class="product">
<div class="product-container">
<div class="product-left">
<div class="product-thumb">
<a class="product-img" href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/0/03/Mountain_Bluebird.jpg" alt="Product"></a>
<a title="Quick View" href="#" class="btn-quick-view">Quick View</a>
</div>
</div>
<div class="product-right">
<div class="product-name">
Cotton Lycra Leggings
</div>
<div class="price-box">
<span class="product-price">139.98</span>
<span class="product-price-old">169.00</span>
</div>
<div class="product-star">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
</div>
<div class="product-button">
<a class="btn-add-wishlist" title="Add to Wishlist" href="#">Add Wishlist</a>
<a class="btn-add-comparre" title="Add to Compare" href="#">Add Compare</a>
<a class="button-radius btn-add-cart" title="Add to Cart" href="#">Cart<span class="icon"></span></a>
</div>
</div>
</div>
</li>
<li class="product">
<div class="product-container">
<div class="product-left">
<div class="product-thumb">
<a class="product-img" href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/0/03/Mountain_Bluebird.jpg" alt="Product"></a>
<a title="Quick View" href="#" class="btn-quick-view">Quick View</a>
</div>
</div>
<div class="product-right">
<div class="product-name">
Cotton Lycra Leggings
</div>
<div class="price-box">
<span class="product-price">139.98</span>
<span class="product-price-old">169.00</span>
</div>
<div class="product-star">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
</div>
<div class="product-button">
<a class="btn-add-wishlist" title="Add to Wishlist" href="#">Add Wishlist</a>
<a class="btn-add-comparre" title="Add to Compare" href="#">Add Compare</a>
<a class="button-radius btn-add-cart" title="Add to Cart" href="#">Cart<span class="icon"></span></a>
</div>
</div>
</div>
</li>
<li class="product">
<div class="product-container">
<div class="product-left">
<div class="product-thumb">
<a class="product-img" href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/0/03/Mountain_Bluebird.jpg" alt="Product"></a>
<a title="Quick View" href="#" class="btn-quick-view">Quick View</a>
</div>
</div>
<div class="product-right">
<div class="product-name">
Cotton Lycra Leggings
</div>
<div class="price-box">
<span class="product-price">139.98</span>
<span class="product-price-old">169.00</span>
</div>
<div class="product-star">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
</div>
<div class="product-button">
<a class="btn-add-wishlist" title="Add to Wishlist" href="#">Add Wishlist</a>
<a class="btn-add-comparre" title="Add to Compare" href="#">Add Compare</a>
<a class="button-radius btn-add-cart" title="Add to Cart" href="#">Cart<span class="icon"></span></a>
</div>
</div>
</div>
</li>
<li class="product">
<div class="product-container">
<div class="product-left">
<div class="product-thumb">
<a class="product-img" href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/0/03/Mountain_Bluebird.jpg" alt="Product"></a>
<a title="Quick View" href="#" class="btn-quick-view">Quick View</a>
</div>
</div>
<div class="product-right">
<div class="product-name">
Cotton Lycra Leggings
</div>
<div class="price-box">
<span class="product-price">139.98</span>
<span class="product-price-old">169.00</span>
</div>
<div class="product-star">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
</div>
<div class="product-button">
<a class="btn-add-wishlist" title="Add to Wishlist" href="#">Add Wishlist</a>
<a class="btn-add-comparre" title="Add to Compare" href="#">Add Compare</a>
<a class="button-radius btn-add-cart" title="Add to Cart" href="#">Cart<span class="icon"></span></a>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Javascript:
$(function () {
init_carousel();
var url = '../Home/FrontProduct';
var data1 = {};
$.post(url, data1, function (data) {
OnSuccess(data);
});
function OnSuccess(data) {
var xmlDoc = $.parseXML(data);
var xml = $(xmlDoc);
var All = xml.find("All");
var AllrowCount = Math.ceil(All.length);
var content_g = '';
for (var p = 0; p < AllrowCount; p++) {
var Allrow = $(All[p]);
var content = '';
content = '<div class="item">' +
' <div class="product-container">' +
' <div class="product-left">' +
' <div class="product-thumb">' +
' <a class="product-img" href="#"><img src="http://ashish81.honestteam.com/products/pro_img/' + Allrow.find("ProductImages").text() + '"></a>' +
'<a title="Quick View" href="#" class="btn-quick-view">Quick View</a>' +
'</div>' +
' </div>' +
'<div class="product-right">' +
' <div class="product-name">' +
' Cotton Lycra Leggings' +
' </div>' +
' <div class="price-box">' +
' <span class="product-price">139.98</span>' +
' <span class="product-price-old">169.00</span>' +
' </div>' +
'<div class="product-star">' +
'<i class="fa fa-star"></i>' +
'<i class="fa fa-star"></i>' +
'<i class="fa fa-star"></i>' +
'<i class="fa fa-star"></i>' +
'<i class="fa fa-star-half-o"></i>' +
'</div>' +
'<div class="product-button">' +
'<a class="btn-add-wishlist" title="Add to Wishlist" href="#">Add Wishlist</a>' +
'<a class="btn-add-comparre" title="Add to Compare" href="#">Add Compare</a>' +
'<a class="button-radius btn-add-cart" title="Add to Cart" href="#">Cart<span class="icon"></span></a>' +
' </div>' +
' </div>' +
'</div>' +
'</div>';
content_g = content_g + content;
}
var owl = $('.kt-owl-carousel');
owl.prepare().trigger('add.owl.carousel', content_g);
}
});
/* Functions */
function init_carousel() {
$('.kt-owl-carousel').each(function () {
var config = $(this).data();
//config.navText = ['<i class="fa fa-angle-left"></i>','<i class="fa fa-angle-right"></i>'];
var animateOut = $(this).data('animateout');
var animateIn = $(this).data('animatein');
if (typeof animateOut != 'undefined') {
config.animateOut = animateOut;
}
if (typeof animateIn != 'undefined') {
config.animateIn = animateIn;
}
var owl = $(this);
owl.owlCarousel(config);
$(this).find('.owl-item').removeClass('last-item');
$(this).find('.owl-item.active').last().addClass('last-item');
var t = $(this);
owl.on('changed.owl.carousel', function (event) {
var item = event.item.index;
t.find('.owl-item').removeClass('last-item');
setTimeout(function () {
t.find('.owl-item.active').last().addClass('last-item');
}, 100);
});
});
};
Here is the jfiddle

The problem is that you call the init function of owlcarousel before you have the content. So, to solve this you have to initialize the plugin just after the ajax call return.
Something like this:
function ajaxLike() {
$('body').append('<div class="owl-carousel"> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> </div>');
// just after the html appears in the DOM you can initialize the owl plugin
ajaxCallback();
}
// add the html with script, just like you do after the ajax's call return
ajaxLike();
function ajaxCallback() {
$('.owl-carousel').owlCarousel({
margin:10
});
}
.owl-item {
width:100px;
height:100px;
line-height:100px;
text-align:center;
background:red;
}
<link rel="stylesheet" href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.theme.default.min.css">
<script src="http://www.owlcarousel.owlgraphic.com/assets/vendors/jquery.min.js"></script>
<script src="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/owl.carousel.js"></script>
http://jsbin.com/jetane