The drop-down list close before i click inside - javascript

I create a delete function for a notification list, but before it executes the drop-down list close ,and i can't find a solution to this problem.
component.ts:
clearNotification( idx ){
console.log('estas emitiendo esto 1', idx)
this._notificationsService.markNotificationsAsReaded(this.notification).then(res=>{
this._notificationsService.deleteNotific(res)
})
service.ts:
deleteNotific(notif: Notification){
let eliminar= this.notifications.findIndex(i => i.id == notif.id);
if(eliminar > -1){
this.notifications.splice(eliminar , 1 );
this.notificationsList.next(this.notifications);
console.log('Borrando Notificacion 4')
}
return this.notifications;
}
component.html:
<!-- notice -->
<div
class="notification notice"
[ngClass]="{
'notice-warning': notification.notification_type_id!=61,
'notice-danger': notification.notification_type_id==61,
'not_view': !notification.datetime_view,
'view': notification.datetime_view
}"
>
<!-- class="icon" -->
<div class="col-md-1" [ngSwitch]="notification.notification_type_id">
<i *ngSwitchCase="17" class="fas fa-shipping-fast"></i>
<i *ngSwitchCase="20" class="fas fa-hand-paper"></i>
<i *ngSwitchCase="61" class="fas fa-exclamation-circle"></i>
<i *ngSwitchDefault class="fas fa-info"></i>
</div>
<!-- class="details" -->
<div class="col-md-10 estilo-texto-notificaciones" (click)="showPointMap( notification );">
<!-- <div class="message"> -->
{{ notification.short_message }}
<i class="details pull-right"> {{ notification.datetime | tiempoTranscurrido }} </i>
<!-- </div> -->
</div>
<div class="col-md-1" *ngIf="!holdMenu" (click)="clearNotification( notification )" >
<i type="button" class="fas fa-check-double"></i>
</div>
</div>

Related

Vue.js change property

<ul class="col-12">
<div v-for="(todo, n) in todos">
<i class="fas fa-cart-arrow-down mr-1 ml-2"></i>
**<li class="mt-2 todo" #click="myFilter(n)"** :class="todo.isActive ? 'active' : '' ">
<!-- {{ todo.name }} -->
</li>
<li class="button-container bg-light">
**<button** class="ml-1 btn btn-primary rounded-circle btn-sm" #click="toggleHidden(n)" v-
if="todo.isHidden == true" **:disabled='false'**><i class="fas fa-pencil-alt"></i>
</button>
</li>
</div>
</ul>
I have this code and I want that, when you click on li with "myFilter (n)", in the button :disabled it changes from "false" to "true"

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.

Bootstrap Model is closed everytime after click on the cancel icon in AngularJS?

I have to remove the product from the list. My product is removed properly but after I click on the cancel icon, the model closes. I am using AngularJS.
/**
* #Summary: removeSelectedProductFromAlbum function, remove the productKey from the album
* #param: event, index, productObject
* #return: NA
* #Description:
*/
$scope.albumKey = [];
$scope.albumObject = [];
$scope.setAlbumObject = [];
$scope.removeSelectedProductFromAlbum = function(event, index, productObject) {
//GET THE ALBUM OBJECT FROM THE SCOPE
$scope.setAlbumObject = $scope.setAlbumObject;
//PROCESS TO REMOVE productKeyId IN ALBUM.
var productKeyId = productObject.keyId;
if(productKeyId != undefined) {
if($scope.productsKeyIdList != undefined && $scope.productsKeyIdList != null) {
var index = $scope.productsKeyIdList.indexOf(productKeyId);
$scope.productsKeyIdList.splice(index, 1);
updatedProductKeyArray = $scope.productsKeyIdList;
//Calling updateArray inner function for update sharedBuyerKeyIdList after remove the keyId
updateArray();
}
}
}
//CALLING THE updateArray FUNCTION FOR UPDATE THE PRODUCT AFTER DELETING THE DATA
function updateArray () {
var PRODUCT_DB_REF = firebase.database().ref('datastore/productsAlbum');
// Updating product key in album.
PRODUCT_DB_REF.child($scope.setAlbumObject.key).update({
productKey : updatedProductKeyArray
});
CMN.showNotification("top","center","info","Product is Successfully Removed");
//$(event.currentTarget).parents("#hideAfterRemove").hide("slow");
}
<div style="overflow:auto; max-height:300px;" >
<div class="dashboard-prod-wrap decorCardD2"
style="width:342px;" ng-repeat="sellerAlbum in sellerSelAlbumProducts" ng-if="sellerSelAlbumProducts.length > 0">
<i class="fa fa-remove" style="font-size:14px; cursor:pointer;" title="Remove"
ng-click="removeSelectedProductFromAlbum($event, $index, sellerAlbum)">
</i>
<div class="w3-row w3-padding-top ng-cloak">
<span class="pull-left color-d4 text-capitalize no-wrap dash-prod-name w3-small ng-cloak">
<span class="product-name" style='padding-right:3px;'>
{{sellerAlbum.categoriesDto.categoryName}}
</span>
<span class="w3-text-teal ng-cloak">
<b>{{sellerAlbum.sellerProductDesignsDtos[0].designsName}}</b>
</span>
<span class="w3-text-teal ng-cloak" ng-if="sellerAlbum.designNumber != 'undefined'">
-<b>{{sellerAlbum.designNumber}}</b>
</span>
<small class="text-muted w3-left w3-price-tag ng-cloak">
<div class='list-icon-f'>
<i class="fa fa-inr" aria-hidden="true"></i>
</div>
<span ng-if="!sellerAlbum.inOffer">
<i class="fa fa-inr"></i>
{{sellerAlbum.fixedPrice}}
</span>
<span ng-if="sellerAlbum.inOffer">
<i class="fa fa-inr"></i>
<strike class="w3-text-red">{{sellerAlbum.fixedPrice}}</strike>
<span class="w3-text-green">
{{sellerAlbum.offerPrice}}
</span>
</span>
</small>
<small class="text-muted w3-left w3-price-tag ng-cloak" ng-if="sellerAlbum.fixedPrice == 0">
<div class='list-icon-f'>
<i class="fa fa-inr" aria-hidden="true"></i>
</div>
<span ng-if="!sellerAlbum.inOffer">
<i class="fa fa-inr"></i>
{{sellerAlbum.maxPrice}}
</span>
<span ng-if="sellerAlbum.inOffer">
<i class="fa fa-inr"></i>
<strike class="w3-text-red">{{sellerAlbum.maxPrice}}</strike>
<strong class="w3-text-green">
{{sellerAlbum.offerPrice}}
</strong>
</span>
<small class="w3-small"> (<i class="fa fa-inr"></i>{{sellerAlbum.minPrice}}
- <i class="fa fa-inr"></i>{{sellerAlbum.maxPrice}})
</small>
</small>
</span>
<div class="pull-right ng-cloak" style="width:100%;margin-top:10px;">
<div class='owner-img'>
<img src="{{sellerAlbum.sellerDto.userTypeDto.imageURL != 'null' ? sellerAlbum.sellerDto.userTypeDto.imageURL : '/static/assets/img/image_placeholder.jpg'}}"
alt="Avatar" class="w3-right w3-circle w3-margin-left">
</div>
<small class="text-uppercase w3-tiny text-muted text-right ng-cloak">
<b>{{sellerAlbum.sellerDto.personName}}</b>
<span ng-repeat="address in sellerAlbum.sellerDto.userTypeDto.userTypeAddressDtos"
ng-if="address.keyId === sellerAlbum.sellerDto.userTypeDto.defaultAddressKeyId">
- <b>{{address.city}}</b>
</span><br>
</small>
</div>
</div>
<hr class="w3-clear margin0">
<div class="w3-row-padding w3-padding-top" style="margin: 0 -16px">
<!-- START:This will display Large Product Image -->
<div class="dashboard-prod-col-left w3-center">
<div class="text-center w3-padding-8"
ng-init="setImageURLList[sellerAlbum.keyId] = sellerAlbum.sellerProductSetDto[0].setImageURLList">
<div ng-repeat="image in setImageURLList[sellerAlbum.keyId]"
ng-click="sellerAlbum.defaultImageURL = image.imageURL"
onClick="imgShadowArr(this);"
ng-init="sellerAlbum.defaultImageURL = setImageURLList[sellerAlbum.keyId][0].imageURL"
class="dashboard-prod-img-wrap {{sellerAlbum.defaultImageURL == image.imageURL ? 'w3-border-teal-orange' : ''}}">
<img src="{{image.imageURL}}" class="prod-img-xs cursor-pointer">
</div>
<div class="dashboard-prod-img-wrap"
ng-if="productImgsList[sellerAlbum.keyId].length < 1">
<img src="/static/assets/img/product_default.jpg"
class="prod-img-xs">
</div>
</div>
</div>
<!-- END:This will display Large Product Image -->
<div class="dashboard-prod-col-right w3-center hover-div">
<img src="{{sellerAlbum.sellerProductSetDto[0].setImageURLList[0].imageURL != null ? sellerAlbum.sellerProductSetDto[0].setImageURLList[0].imageURL :'/static/assets/img/product_default.jpg'}}"
class="cursor-pointer" style="max-height:200px;border:1px solid black;">
<br>
</div>
</div>
<div class="">
<div class="text-center pull-left ng-cloak list-by-a list-by-color">
<div class='list-icon'>
<i class="fa fa-th-large" aria-hidden="true"></i>
</div>
<ul class='margin0'>
<li class="prodColorWrap" ng-repeat="productSet in sellerAlbum.sellerProductSetDto track by $index"
style="cursor:pointer; background-color:{{productSet.colorCode}}"
ng-click="setImageURLList[productSet.keyId] = sellerAlbum.setImageURLList;
productSet.defaultImageURL = setImageURLList[productSet.keyId][0].imageURL">
</li>
</ul>
</div>
<div class='w3-offer-tag' ng-if="sellerAlbum.inOffer">
<label>
<i class="fa fa-star w3-spin"></i>
Offer
</label>
</div>
</div>
<br>
</div>
function for remove icon , please sir how to fix this issue?

How to check if a specific SPAN class content text

wanna check whether a specific SPAN class context text or not?
The SPAN class I want to check against is "distance" that has the kilometers numbers like (, 27 kilometers).
Tried the below code but still not working
if ($('.trip-summary-info').find('distance').length > 0) {
alert("Working !!!");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="trip-summary-info">
<h3>
<a href="javascript:void(0);" class="back_first">
<span class="chevron-up"><i class="fa fa-chevron-up"></i></span> Booking Summary:
<span class="date-time"></span>07-07-2017 09:05<span class="distance">, 99.84 kilometers</span><span class="duration">, 1 hrs 13 mins</span>
</a>
<span class="custom-btn custom-btn-default edit back_first"><i class="fa fa-pencil"></i></span>
</h3>
<div class="trip_status custom-clearfix">
<span class="location-form-marker"><i class="fa fa-map-marker"></i></span>
<div class="location-form"></div>
<div class="list-address-point" style="display:unset;"></div>
<span class="location-to-marker"><i class="fa fa-map-marker"></i></span>
<div class="location-to"></div>
</div>
<div class="additional_seats_wrapper editable-field">
<strong>Additional Seats: </strong><span id="additional-seats" class="text-muted"></span>
<!-- overlay-icon -->
<div class="overlay-icon">
<a class="btn-icon back_first" href="javascript:void(0);"><i class="fa fa-edit"></i></a>
</div>
<!-- /overlay-icon -->
</div>
</div>
You could try the following:
var $distance = $('.trip-summary-info .distance');
if ($distance.text() === ""){
// There is no text, so handle that
}
else {
// There is text, so you could do something different
}
You are missing the . represent the class in find()
if ($('.trip-summary-info').find('.distance').length > 0) {
console.log($('.trip-summary-info').find('.distance').text())
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="trip-summary-info">
<h3>
<a href="javascript:void(0);" class="back_first">
<span class="chevron-up"><i class="fa fa-chevron-up"></i></span> Booking Summary:
<span class="date-time"></span>07-07-2017 09:05<span class="distance">, 99.84 kilometers</span><span class="duration">, 1 hrs 13 mins</span>
</a>
<span class="custom-btn custom-btn-default edit back_first"><i class="fa fa-pencil"></i></span>
</h3>
<div class="trip_status custom-clearfix">
<span class="location-form-marker"><i class="fa fa-map-marker"></i></span>
<div class="location-form"></div>
<div class="list-address-point" style="display:unset;"></div>
<span class="location-to-marker"><i class="fa fa-map-marker"></i></span>
<div class="location-to"></div>
</div>
<div class="additional_seats_wrapper editable-field">
<strong>Additional Seats: </strong><span id="additional-seats" class="text-muted"></span>
<!-- overlay-icon -->
<div class="overlay-icon">
<a class="btn-icon back_first" href="javascript:void(0);"><i class="fa fa-edit"></i></a>
</div>
<!-- /overlay-icon -->
</div>
</div>
you need to add . before distance to find class.
<div class="trip-summary-info">
<h3>
<a href="javascript:void(0);" class="back_first">
<span class="chevron-up"><i class="fa fa-chevron-up"></i></span>
Booking Summary:
<span class="date-time"></span>07-07-2017 09:05<span class="distance">, 99.84 kilometers</span><span class="duration">, 1 hrs 13 mins</span>
</a>
<span class="custom-btn custom-btn-default edit back_first"><i class="fa fa-pencil"></i></span>
</h3>
<div class="trip_status custom-clearfix">
<span class="location-form-marker"><i class="fa fa-map-marker"></i></span><div class="location-form"></div>
<div class="list-address-point" style="display:unset;"></div>
<span class="location-to-marker"><i class="fa fa-map-marker"></i></span><div class="location-to"></div>
</div>
<div class="additional_seats_wrapper editable-field">
<strong>Additional Seats: </strong><span id="additional-seats" class="text-muted"></span>
<!-- overlay-icon -->
<div class="overlay-icon">
<a class="btn-icon back_first" href="javascript:void(0);"><i class="fa fa-edit"></i></a>
</div>
<!-- /overlay-icon -->
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
if($('.trip-summary-info').find('.distance').length > 0){
alert("Working !!!");
}
</script>
You can access it through this:
if($(".trip-summary-info").find('h3').find('.distance').length > 0){
alert('working!!').
}

Categories