We Keep Coding

The drop-down list close before i click inside

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>

why nextelementsibling return null | dom traversing js

when I click on title ( Title Goes Here) text. I am getting null for nextElementSibling instead of a element...
Edit
you can nest any elements inside an <a> except the following :
<a>
<button>
follow link
<a> and<button> both are invalid..
but I am getting null for a tag.. not for button tag.... I am looking for more clarity and valid source...
if I console log console.log(document.links) .. it's give three HTMLCollection collection...
End Edit
Below Example Code
console.log(document.links)
document.querySelectorAll(".viewAbstractToggleTitle").forEach(function(item) {
item.addEventListener("click", function(e) {
if (e.target.parentElement.classList.contains('viewAbstractToggleTitle')) {
console.log(e.target.parentElement.nextElementSibling.nextElementSibling)
console.log(e.target.parentElement.nextElementSibling.nextElementSibling.nextElementSibling);
console.log(e.target.parentElement.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling);
}
})
})
<li style="border-bottom: 1px solid #d6d6d6;margin-bottom:10px;">
<a href="javascript:void(0)">
<span class="viewAbstractToggleTitle" style="display:inline-block;line-height:1.6 !important">
<span style="font-weight: 600;font-size:16px;">
Title Goes Here
</span>
<span> ( 1-10 page )</span>
</span>
<br>
<div class="authors">
<span><i class="fa fa-user" aria-hidden="true"></i>
Author
</span>
<span><i class="fa fa-user" aria-hidden="true"></i>
Author
</span>
</div>
<button>
button tag
</button>
<a class="inlineBlock" href="" download>
<i class="fa fa-download" aria-hidden="true"></i> Download PDF</a>
<a class="inlineBlock viewAbstractToggle" href="javascript:void(0)"> <i class="fa fa-eye" aria-hidden="true"></i> View Article</a>
<div class="showTabe sTab">
<div class="tabBox">
<div class="tab">
<label class="label" for="tab1_">Abstract</label>
<label class="label" for="tab2_">Graphical of Author </label>
</div>
<div class="box">
<div class="content"><input id="tab1_"> Description
</div>
<div class="content"><input id="tab2_">
<p>image</p>
</div>
</div>
</div>
</div>
<br>
</a>
</li>

Your HTML is invalid. You have disallowed things like nested hyperlinks. This means the HTML parser, which is designed to be forgiving in spite of errors, has to come up with a new interpretation of your element tree. Here's what Firefox at least translates it to:
<li style="border-bottom: 1px solid #d6d6d6;margin-bottom:10px;">
<a href="javascript:void(0)">
<span class="viewAbstractToggleTitle" style="display:inline-block;line-height:1.6 !important">
<span style="font-weight: 600;font-size:16px;">
Title Goes Here
</span>
<span> ( 1-10 page )</span>
</span>
<br>
<div class="authors">
<span><i class="fa fa-user" aria-hidden="true"></i>
Author
</span>
<span><i class="fa fa-user" aria-hidden="true"></i>
Author
</span>
</div>
<span>
span tag
</span>
</a>
<a class="inlineBlock" href="" download="">
<i class="fa fa-download" aria-hidden="true"></i> Download PDF</a>
<a class="inlineBlock viewAbstractToggle" href="javascript:void(0)"> <i class="fa fa-eye" aria-hidden="true"></i> View Article</a>
<div class="showTabe sTab">
<div class="tabBox">
<div class="tab">
<label class="label" for="tab1_">Abstract</label>
<label class="label" for="tab2_">Graphical of Author </label>
</div>
<div class="box">
<div class="content"><input id="tab1_"> Description
</div>
<div class="content"><input id="tab2_">
<p>image</p>
</div>
</div>
</div>
</div>
<br>
</li>
You can get this information for yourself by copying the HTML from your browser's DOM inspector.
As you can see, the other <a/> elements are not siblings of .viewAbstractToggleTitle. This is because the DOM parser had to insert a closing of your first <a/> element since you cannot nest them.

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 can I have the inbox area show once the document is finished loading?

Basically trying to create kind of an inbox for my person portfolio (more of a learning experience, then anything serious, or of use).
Right now when this document loads within an ajax/javascript function, it loads showing ALL emails (instead of just showing the Inbox section by default)
I've tried adding a function in javascript for "on document load" but I believe I may not have the css correct or anything.
My code is below:
<div id="messages" class="container-fluid">
<div class="row">
<div id="breadcrumb" class="col-xs-12">
<a href="#" class="show-sidebar">
<i class="fa fa-bars"></i>
</a>
<ol class="breadcrumb pull-left">
<li>Dashboard</li>
<li>Modules</li>
<li>Messages</li>
</ol>
<div id="social" class="pull-right">
<i class="fa fa-google-plus"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-youtube"></i>
</div>
</div>
</div>
<div class="row" id="test">
<div class="col-xs-12">
<div class="row">
<ul id="messages-menu" class="nav msg-menu">
<li>
<a href="#" class="" id="msg-inbox">
<i class="fa fa-inbox"></i>
<span class="hidden-xs">Inbox (<?php echo $inboxCount; ?>)</span>
</a>
</li>
<li>
<a href="#" class="" id="msg-starred">
<i class="fa fa-star"></i>
<span class="hidden-xs">Unread (<?php echo $unreadCount; ?>)</span>
</a>
</li>
<li>
<a href="#" class="" id="msg-important">
<i class="fa fa-bookmark"></i>
<span class="hidden-xs">Read (<?php echo $readCount; ?>)</span>
</a>
</li>
<li>
<a href="#" class="" id="msg-trash">
<i class="fa fa-trash-o"></i>
<span class="hidden-xs">Trash (<?php echo $trashCount; ?>)</span>
</a>
</li>
</ul>
<div id="messages-list" class="col-xs-10 col-xs-offset-2">
<?php
while ($row = mysqli_fetch_assoc($getEmails)) {
$email_id = $row['email_id'];
$emailStatus = $row['emailStatus'];
$contactName = $row['contactName'];
$contactEmailAddress = $row['contactEmailAddress'];
$messageBody = $row['messageBody'];
$tempEmailDate = $row['emailDate'];
$emailDate = date("d-m-Y", strtotime($tempEmailDate));
$contactName = strtoupper($contactName);
$contactEmailAddress = strtoupper($contactEmailAddress);
if ($row == 1 && ($emailStatus == 1 || $emailStatus == 2)) {
echo "
<div class='row one-list-message msg-inbox-item' id='msg-one'>
<div class='col-xs-1 checkbox'>
<label>
<input type='checkbox'>$contactName
<i class='fa fa-square-o small'></i>
</label>
</div>
<div class='col-xs-9 message-title'>$messageBody</div>
<div class='col-xs-2 message-date'>$emailDate</div>
</div>
";
} else if ($emailStatus == 1 || $emailStatus == 2) {
echo "
<div class='row one-list-message msg-inbox-item'>
<div class='col-xs-1 checkbox'>
<label>
<input type='checkbox'>$contactName
<i class='fa fa-square-o small'></i>
</label>
</div>
<div class='col-xs-9 message-title'>$messageBody</div>
<div class='col-xs-2 message-date'>$emailDate</div>
</div>
";
}
if ($emailStatus == 1) {
// Unread section
echo "
<div class='row one-list-message msg-starred-item'>
<div class='col-xs-1 checkbox'>
<label>
<input type='checkbox'>$contactName
<i class='fa fa-square-o small'></i>
</label>
</div>
<div class='col-xs-9 message-title'>$messageBody</div>
<div class='col-xs-2 message-date'>$emailDate</div>
</div>
";
$updateEmailStatus = mysqli_query($db, "UPDATE emails SET emailStatus='2' WHERE email_id='$email_id'");
} else {
if ($emailStatus == 2) {
// Read section
echo "
<div class='row one-list-message msg-important-item'>
<div class='col-xs-1 checkbox'>
<label>
<input type='checkbox'>$contactName
<i class='fa fa-square-o small'></i>
</label>
</div>
<div class='col-xs-9 message-title'>$messageBody</div>
<div class='col-xs-2 message-date'>$emailDate</div>
</div>
";
} else {
if ($emailStatus == 3) {
// Deleted section
echo "
<div class='row one-list-message msg-trash-item'>
<div class='col-xs-1 checkbox'>
<label>
<input type='checkbox'>$contactName
<i class='fa fa-square-o small'></i>
</label>
</div>
<div class='col-xs-9 message-title'>$messageBody</div>
<div class='col-xs-2 message-date'>$emailDate</div>
</div>
";
}
}
}
}
?>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#msg-inbox').show();
});
// Add listener for redraw menu when windows resized
window.onresize = MessagesMenuWidth;
$(document).ready(function() {
// Add class for correctly view of messages page
$('#content').addClass('full-content');
// Run script for change menu width
MessagesMenuWidth();
$('#content').on('click','[id^=msg-]', function(e){
e.preventDefault();
$('[id^=msg-]').removeClass('active');
$(this).addClass('active');
$('.one-list-message').slideUp('fast');
$('.'+$(this).attr('id')+'-item').slideDown('fast');
});
$('html').animate({scrollTop: 0},'slow');
});
</script>
Can anyone see how I'd do the javascript to have the msg-inbox load when the page loads? instead of loading none and displaying all emails.
Thank you!

When trying to hide and/or show divs, jquery is your best friend. It's simple and looks nice.
Start by wrapping your read & unread messages in a div id of "inbox"
Then give each of your inbox divs an id like "read" & "unread"
Using the code below you can hide/show your individual divs.
Place this between your <head> </head> tags
<script src="JS/jquery/jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function(){
$("#Unread").click(function(){
$("#unread").slideToggle(500, function() {
});
});
$("#Read").click(function(){
$("#read").slideToggle(500, function() {
});
});
$("#Deleted").click(function(){
$("#deleted").slideToggle(500, function() {
});
});
});
</script>
<style>
#unread {
display: none;
}
#read {
display: none;
}
#deleted {
display: none;
}
</style>
Then in the body of your page, you can do something like this
<div id="inbox">
<div id="unread_msgs">
<button id="Unread">Show/Hide Unread</button>
<div id="unread">
<p>These </p>
<p>are</p>
<p>my</p>
<p>unread</p>
<p>messages</p>
</div><!-- end unread -->
</div><!-- end unread_msgs -->
<div id="read_msgs">
<button id="Read">Show/Hide Read</button>
<div id="read">
<p>These </p>
<p>are</p>
<p>my</p>
<p>read</p>
<p>messages</p>
</div><!-- end read -->
</div><!-- end read_msgs -->
</div><!-- end inbox -->
<div id="deleted_msgs">
<button id="Deleted">Show/Hide Deleted</button>
<div id="deleted">
<p>These </p>
<p>are</p>
<p>my</p>
<p>deleted</p>
<p>messages</p>
</div>
</div>
Hope this helps. It should get you going in the right direction.
References
jquery slidetoggle