I'm using mobile angular ui to open and close a sidebar. In this sidebar a user can search for persons and add or remove these from an array.
I have this repeat that shows the array of persons when clicking on the <a ...></> it closes the sidebar:
<li ng-repeat="recipient in persons.recipients">
<span class="wrapper">
<span class="imageWrap">
<span class="initials">
{{recipient.firstName.charAt(0)}}{{recipient.lastName.charAt(0)}} </span>
</span>
<i class="fa fa-trash-o" aria-hidden="true"></i>
<span class="details">
<span class="info">
{{recipient.firstName}} {{recipient.lastName}}
<span class="persnr">{{recipient.employeeID}}</span>
</span>
</span>
</span>
</li>
The above html snippet is from a directive that is in the sidebar.
The removeRecipient($index); function looks like this:
$scope.removeRecipient = function(index) {
$scope.persons.recipients.splice(index,1);
}
The function works but closes the sidebar and I can't figure out why it does this. So each time a user removes a recipient it has to swipe the sidebar open again. How do I keep this sidebar open?
References:
mobile angular ui: http://mobileangularui.com/docs/sidebars/
SOLUTION
I solved my problem by adding $event.stopPropagation(); in the ng-click right behind the removeRecipient($index); function.
From doc, there was one line.
You can put ui-turn-off='uiSidebarLeft' or ui-turn-off='uiSidebarLeft'
inside the sidebar to make it close after clicking links inside them.
so may be you can use that or you can use or you can do like below.
e.stopPropagation()
for that you need to pass $event in
<i class="fa fa-trash-o" aria-hidden="true"></i>
so in code, you can write.
$scope.removeRecipient = function(index,e) {
if(e){
e.stopPropagation()
}
$scope.persons.recipients.splice(index,1);
}
I didn't used same tool, but may be this is issue.
Related
Ok, this is my very first question posted to this forum so please be kind.. :)
I'm using ASP.NET MVC 5 and I am trying to do a two step process when an icon is clicked.
Select the correct page
Scroll down to a certain section on that page.
Here is what I got so far:
<a class="sidebar-brand d-flex align-items-center justify-content-start" >
<div class="notification-bell" style="color:red">
<i class="fas fa-fw fa-bell fa-2x" title="Number of Unread Comments" alert-count=#ViewBag.TotalUnreadComments.ToString() onclick='scrollToElement("CommentSection");'></i>
</div>
</a>
And the Javascript
<script type='text/javascript'>
function scrollToElement(id) {
// Set correct page
window.location.replace("/TodoListDashboard");
//Get target
var target = document.getElementById(id).offsetTop;
//Scrolls to that target location
window.scrollTo(0, target);
}
</script>
The funny thing is that either of these actions work by themselves but they won't work together.
Any ideas would be greatly appreciated!!!
Ok, I feel kind of foolish but I figured out an easy fix...
For this problem, I just created a javascript function and added both items together like this:
<script type='text/javascript'>
function scrollToComments() {
window.location.replace("/TodoListDashboard#CommentSection");
}
</script>
Then I just changed my onclick call to:
<i class="fas fa-fw fa-bell fa-2x" title="Number of Unread Comments" alert-count=#ViewBag.TotalUnreadComments.ToString() onclick='scrollToComments();'></i>
I have a code like this :
<div id="logreg" style="display: none;width:100%;max-width:660px; height:450px;" class="logreg">
my content
</div>
and i need use in many links on my site like this :
<a data-fancybox="logreg" data-src="#logreg" href="javascript:;" class="btnReg float-right">
Register
</a>
<a data-fancybox="logreg" data-src="#logreg" href="javascript:;">
<i class="fas fa-user"></i>
</a>
but doesn't work too many links, only one link work :-(
Please help me.
You are creating gallery that contains two items and both items refer to the same content. Therefore simple use different value for data-fancybox element to not create a group and everything will work fine, demo - https://jsfiddle.net/tecnw6x7/
I made a whole li element clickable by making use of anchor tag as such:
<li *ngIf="notification.payload.table">
<a class="d-flex justify-content-between" (click)="updateTableNotificationReadStatus(notification)">
<div class="d-flex flex-column">
<span style="font-size: 1.1rem">
<strong>{{notification.payload.username}}</strong> requested access for table - {{notification.payload.table}}.
<span style="font-size: 0.9rem">{{notification.payload.time}}</span>
</span>
<span *ngIf="notification.payload.note"class="note">
<span class="noteLabel">Note</span>
<span> This is a note attached to it</span>
</span>
</div>
<span>
<fa-icon [icon]="faClose" class="ml-auto" (click)="deleteNotification(notification)"></fa-icon>
</span>
</a>
</li>
When I click on the fa-icon, the notification is getting deleted but I am also getting redirected to another page because of the function in which I doesn't want?
How can I make the close icon clickable without getting redirected while being on the same element?
It seems to me that you need something similar to this question AngularJS ng-click stopPropagation
To stop propagating the event
$event.stopPropagation();
I achieved that using:
deleteNotification(e, notification) {
e.stopPropagation();
}
bit of a variation on a question I've asked before but the issue is this. We want to show a cart dropdown on the click of an 'add to cart' button. The issue is that knockout and jquery don't seem to be playing nice together with the click dispatch because when you click the button, something seems to prevent the drop down from showing. I am sure I am doing something wrong. Here's the code. I've spent way too much time on this and about to throw my computer :). It works if you just do the event on the console (of course).
HTML for the button and cart that needs to be shown
Add to Cart
More Info
<li id="cart-nav" class="nav-menu cart">
<a class="first" href="#">
Cart (<span data-bind="text:cartTotalItems">19</span>)
<div class="caret">
<i class="fa fa-caret-right"></i>
<i class="fa fa-caret-down"></i>
</a>
</li>
JS
self.addProductToCart = function(data, event) {
var $productNotification = $(event.target).prev().children('.product-notification');
ax.Cart.addCartItem({product_id:data.id, name:data.name, description:data.description});
self.openCartMenu();
$productNotification.addClass('rise');
$productNotification.on('animationend',function() {
$(this).removeClass('rise');
});};
self.openCartMenu = function () {
$('#cart-nav').find('a.first').click();};
I am working with bootstrap and I found a really good looking admin template. This template offers the possibility to show specific notifications at the main navigation. If I click on the notification icon, a small popup appears where I can see the notification.
You can see it here:
So I entered the green checkboxes on the left and if a user clicks on a checkbox, the notification is marked as read and dissapears from the notification panel. So far so good my problem is that I solved this solution with PHP and the complete page reloads once I click on the green checkbox. I am now looking for a jQuery solution, so that the page does not need to reload itself once the green checkbox is checked. So if a user clicks on the green checkbox, the notification should disappear without reloading the page.
My current code is:
<?php
<ul class='dropdown-menu dropdown-navbar'>
<li>
<a href='./index.php?func=showsms&id=".$msg["id"][$x]."&sid=$sid' target='_blank' class='clearfix'>
<div class='col-sm-3'>
<span class='msg-time'>
<a class='btn btn-success btn-xs' href='./index.php?func=$func&read_sms=".$msg["id"][$x]."&sid=$sid' role='button'><i class='ace-icon fa fa-check bigger-110 icon-only'></i></a>
</span>
</span>\
</div>
<div class='col-sm-9'>
<a href='#messagebox_".$msg["id"][$x]."' role='button' class='green' data-toggle='modal'>
<span class='msg-body'>
<span class='msg-title'>
<span class='blue'>".$sender["firstname"][0]." ".$sender["lastname"][0].":</span>
$msg["smstitle"][$x]
</span>
<span class='msg-time'>
<i class='ace-icon fa fa-clock-o'></i>
<span>".date("d.m.Y H:i",$msg["time_created"][$x])."</span>
</span>
</a>
</div>
</li>
</ul>
?>
Can someone tell me how I need to change the code so that I have the same solution with jQuery effect? I am not good at coding with jQuery. Would be awesome if someone can help me and tell me what my code should look like.
Thanks,
Chris
What you have written is HTML and not PHP code! I believe there should be a class for changing it to a different colour (read notification). So, what you need to do is:
$(".dropdown-menu dropdown-navbar li a").click(function () {
$(this).closest("li").addClass("read");
// The above code will make the presentation look read.
// Now make it really read:
$.post("notification.php", {id: the_post_id, action: read});
return false;
});
Note: I didn't prevent the default action of following the link, because when you follow the link, it will trigger the read action right?
And I hope in PHP, when you render the HTML, you would do:
<li class="otherClass newClass type <?php if ($isRead) echo "read"; ?>">