Losing click event in angular 2 while using external javascript lib footable - javascript

While using external library footable(for a responsive table) with angular 2, I am losing all event bindings i.e (click).
Tried ngZone, ChangeDetectorRef,ApplicationRef. but no result not able to bind back my all lost angular events.
Below I have written down my code snippet where after calling an API I get a list and using *ngfor i populate my table.
But after Footable.init() am losing binding of method deactivateHospital(). And when I try using click event, deactivateHospital() doesn't work. If I comment footable then my code works fine. Any idea how to bind back my deactivateHospital() back? I know the external javascript library is causing some issue. Do we have any solution for this?
Adding plnkr: http://plnkr.co/edit/Np2ooN2M07pyVrQiM0Tv?p=preview
<tr data-expanded="true" *ngFor="let hospital of hospitalList">
<td class="hospital-name">{{hospital.name}}</td>
<td ><span class="ha-name">{{hospital.admin}}</span><br><span class="ha-id">{{hospital.emailId}}</span>
</td>
<td>{{hospital.hsa_count}}</td>
<td>{{hospital.pcm_count}}</td>
<td>{{hospital.pcv_count}}</td>
<td>{{hospital.surgeons_count}}</td>
<td>{{hospital.prefcards_count}}</td>
<td class="active-status"><span class="active-bubble" ></span>
Active
<span class="dropdown">
<span class="dropdown-toggle mr-l-10" type="button" data-
toggle="dropdown">
<span class="glyphicon glyphicon-chevron-down"></span></span>
<ul class="dropdown-menu">
<li ><a (click)="deactivateHospital(hospital.id)" ><span
class="active-bubble"></span> Inactive </a></li>
</ul>
</span>
</td>
</tr>
//angular code
this.hospitalList = data["hospitals"];
console.log(this.hospitalList);
setTimeout(()=>{
FooTable.init($('.table'),{},()=>{
console.log('hi..');
});
},0);
deactivateHospital(id){
console.log('id',id);
}

I have had the same problem in Angular 4 and 5 with the FooTable. But when I changed the a tag to a button it started working again. I then styled the button to look like a a tag.
<ul class="dropdown-menu"><li ><button class="footablebutton" (click)="deactivateHospital(hospital.id)" ><span class="active-bubble"></span> Inactive </button></li></ul>
CSS
.footablebutton {
background:none!important;
color:#337ab7;
border:none;
padding:0!important;
font: inherit;
cursor: pointer; }
.footablebutton :hover {
color:#23527c; }

Related

Angularjs - Making a button behave like a checkbox

Im trying to make ngstyle give an interface a list view for the users easily and have encountered an issue someone may be able to assist with.
I am trying to use ngstyle and ngmodel to both alter the style and hide icons when a button is clicked, ideally I would like a button that allow you to switch between list and tile view modes.
Here is the checkbox system as it stands (which is clunky and not user friendly, but works).
<p style="color:black; font-size:14px; margin-left:50px;" class="label">List View
<input type="checkbox" ng-model="visible" aria-label="Toggle ngShow" style="margin-left:5px;" ng-click="myStyle={width:'100%', height:'30px', 'text-align':'left', top:'7px', 'font-size':'14px'}">
</p>
<p style="color:black; font-size:14px;" class="label">Tile View
<input type="button" ng-model="unchecked" aria-label="Toggle ngShow" style="margin-left:5px;" ng-click="myStyle={}">
</p>
And here is what ive done to the icons so they hide when checked:
.hideItem {
visibility: hidden;
}
<i ng-class="{'hideItem': visible}" class="icon fa fa-bookmark-o"></i>
What I need is for preferably a single button that is "Change View" which accomplishes the same task Im achieving here but easier.
Any assistance or ideas would be greatly appreciated.
Mant thanks in advance
You could use ng-show directly as it is a directive built into Angular to toggle state between two buttons - the tile view button and the list view button. The one that is displayed can be toggled by an expression
<button type="button" ng-model="unchecked" ng-show="expression" ng-click="changeView()">List View</button>
<button type="button" ng-model="unchecked" ng-show="expression" ng-click="changeView()">Title View</button>
The expression in ng-show if truthy will display the button and if falsy will hide the button. You can use the same expression in each of these button tags and just invert the expression using !
In the Javascript, you would toggle the expression to/from truthy with changeView()
Here is a link to the documentation on ng-show:
https://docs.angularjs.org/api/ng/directive/ngShow
Ended up using ng-class as below:
<ul uib-dropdown-menu role="menu" aria-labelledby="simple-btn-keyboard-nav" class="dropdown-menu">
<li role="menuitem"><a ng-click="tog=1" style="text-transform: initial;" uib-tooltip="New List View" ng-model="tileView">List View</a>
<!--a(ng-click="myStyle={width:'100%', height:'30px', 'text-align':'left', top:'5px', 'font-size':'14px', 'margin-left':'5px',}" style="text-transform: initial;", uib-tooltip="New List View", ng-model="listView") List View-->
</li>
<li role="menuitem"><a ng-click="tog=2" style="text-transform: initial;" uib-tooltip="Original Tiled View" ng-model="tileView">Tile View</a></li>
</ul>
And bound it using the following:
<a uib-tooltip="{{item.Title}}" ng-repeat="item in linkList = (WorkspaceCtrl.workspaceLinkStore.list | filter:{Active:true} | limitTo:WorkspaceCtrl.itemsPerCategory)" ng-href="{{item.Url}}" target="_blank" ng-class="{items:tog==1}" class="item">
<p class="title">{{item.Title}}</p></a>

voting arrows like stack overflow with bootstrap, how do I reduce the size of glyph-icon items and bring them tighter

Hello I'm trying to implement voting system like stack overflow, I've finished the backend//whole functionality but I'm having problem displaying them in UI. right now, the arrows look too far apart and the number isn't quite centered. Also if it's possible I want the color of the arrow to be toggled when clicked/unclicked. I've tried this, but keep getting messed up UI. Can someone please help me with this? thank you in advance.
<td class="vert-align">
<div>
<a href="/post/{{ post.slug }}/vote?is_up=1" class="vote">
<span class="glyphicon glyphicon-triangle-top" style="" aria-hidden="true"></span></a>
<br /> //upper arrow
<span class="number"><h4 id="vote_count_{{ post.slug }}">{{ post.get_vote_count }}</h4></span> <br> //number gets displayed here
<a href="/post/{{ post.slug }}/vote?is_up=0" class="vote">
<span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span></a>
</div> //under arrow
</td>
Also I have one js file for this voting
function vote(node) {
var thread_id = node.attr("href").split('\/')[2];
$.ajax({
url: node.attr("href"),
dataType: "json",
success: function(data) {
$("#vote_count_"+thread_id).html(data.count);
},
error: function(data) {
alert(data.responseJSON.error_message);
}
});
}
$("a.vote").on("click", function() {
vote($(this));
return false;
});
thank you.
To achieve this design with bootstrap (which I can see that you are using) you can simply use this template :
<div class="row">
<div class="col-md-1" style="font-size: 30px; color:#606060; text-align: center;">
<span class="glyphicon glyphicon-triangle-top col-md-12"></span>
<span class="col-md-12">0</span><!-- Number goes here -->
<span class="glyphicon glyphicon-triangle-bottom col-md-12"></span>
</div>
</div>
If you want to toggle the arrow color when clicked use a Javascript method that uses a var (boolean) to determine wether the button is clicked or not, then with the jQuery method .css() you can change the color of the wanted button.
Live example - http://www.bootply.com/6KzWhJefif
I wouls create a CSS class and add it to the '' tag your glyphicons are in. In this class you can set the 'font-size' which will size your iccn. You also should be able to adjust the padding which is what I assume your issue with the incorrect rendering is. If that doesn't help you'll have to use developer tools on your browser and see where you'll need to adjust the padding.
The final thing to do is to set your active, hover and focus on your a tag but using the class. If you've never did this before with CSS it's something like this.
.customClass > a:active, a:hover, a:focus{
color:#fff
}
Hope this helps. If you need more detail let me know but this should be all you need to get it working.

Angular Move up/down through Dropdown List Items with Keyboard from Toggle Dropdown Button

I am working to add keyboard functionality to my Dropdown List, below is the directive template. I am passing in data through isolate scope bound to "ctrl". I am using Angular and Bootstrap. I'm wondering if anybody out there knows a good solution for efficiently allowing a user to move up and down through the list. I think I am getting stuck mostly on having to have the angular "ng-keydown" directive on the button, and then moving from there and being able to focus an item with the up/down keys. And then being able to select a list item with the space bar.
<div class="dropdown select-container" ng-class="{'open' : ctrl.isOpen}">
<div class="form-group" ng-if="ctrl.filterMode === 'off'">
<button class="btn btn-default form-control" type="button" ng-keydown="ctrl.onButtonKeydown($event)" ng-click="ctrl.toggleDropdown($event)" ng-disabled="ctrl.ngDisabled === true">
{{ctrl.selectedRow[ctrl.propertyName] ? ctrl.selectedRow[ctrl.propertyName] : ctrl.selectLabel}}
<div class="pull-right"><i ng-class="{'fa fa-angle-up': ctrl.isOpen, 'fa fa-angle-down': !ctrl.isOpen}"></i></div>
</button>
</div>
<ul class="dropdown-menu list-group" ng-disabled="ctrl.ngDisabled === true">
<li class="list-group-item" ng-repeat="row in ctrl.rows | filter: ctrl.filterText" ng-class="{'active': row === ctrl.selectedRow, 'disabledStandardList': ctrl.ngDisabled}"
ng-click="ctrl.onSelectedLocal(row)">
{{row[ctrl.propertyName]}}
</li>
<li class="list-group-item text-center" ng-show="ctrl.rows.length <= 0 || (ctrl.rows | filter: ctrl.filterText).length <= 0">
{{ctrl.emptyMessage}}
</li>
</ul>
</div>
I'm not able to get any keydown event unless the directive is on the button because the dropdown is hidden until the user clicks on the button to open it. Once the Dropdown list is open I want the user to be able to move up and down and highlight the current row as he or she is moving, as well as be able to select a row. Is it possible to use the css :focus class to add the list as the user moves up and down?
I have a somewhat working JQuery example but I feel like its hacked together and I'm trying to avoid JQuery as much as possible and use Angular/Vanilla Javascript. If you have a solution that uses some jquery though please share! I've seen some other similar examples around but nothing that has helped me. Any help is appreciated. Thanks

ASP.NET MVC5 Bootstrap Popover string with double quotes inside single quotes

I'm using jQuery 2.1.4
I have a popup working on a html element that is rended using MVC5 Razor view helper:
<a href="javascript:void(0);" class="btn" rel="popover" data-placement="left" data-original-title="#benefit.Name" data-html="true" data-content='#Html.Raw(benefit.ShortDescription)'>
#benefit.Name<br />
I've put single quotes around the html in data-content, which means it renders on the page fine.
However, I am using DataTables and am trying to export all the data and strip the html tags out of it.
This is what the view renders:
<a href="javascript:void(0);" class="btn" rel="popover" data-placement="left" data-original-title="Benefits for Practitioners" data-html="true" data-content="Credit Paraplanning is designed to assist the Practitioners clients utilise appropriate finance options: <br />
<ul>
<li><span style="font-size: 13px;">Maximising the range of services the Practitioner is seen to provide access to, </span></li>
<li><span style="font-size: 13px;">Saving time in research and preparing applications</span></li>
</ul>">
Benefits for Practitioners<br>
</a>
So it renders in double-quotes even though I specified single.
Now, when I try to get the html to strip the html tags out I get a jquery error:
"Syntax error, unrecognized expression: Credit Paraplanning is designed to assist the Practitioners clients utilise appropriate finance options: <br ></a>↵<ul>↵<li><span style="font-size: 13px;">Maximising the range of services the Practitioner is seen to provide access to, </span></li>↵<li><span style="font-size: 13px;">Saving time in research and preparing applications</span></li>↵</ul>"
Here is the code:
var datacontent = $(value).data("content");
if (datacontent === null) {
return '';
}
if ($(datacontent).text()) {// Throws error here.
// Get the string without html
}
I can understand that this $(datacontent) then causes the error. But how can I get around that so it works?
How can I get the html tags stripped out?
The way I solved this was by loading the content from a hidden div instead of setting it in the data-content property of the anchor.
<a href="javascript:void(0);" class="btn" rel="popover" data-placement="left" data-original-title="#benefit.Name" data-html="true">
#benefit.Name<br />
</a>
<div class="content" style="display:none;">
#Html.Raw(benefit.ShortDescription)
</div>
Then in the javascript:
$('[rel="popover"]').popover({
html: true,
content: function () {
return $($(this).next('.content')).html();
}
});

Meteor Callback Codrops Menu

I am new to Meteor (and javascript) and trying to figure out how to integrate the Codrops sidebar menu found here: Codrops. I have created a "sidebar" template and all scripts are loading correctly.
I have the following HTML code:
<div class="morph-button morph-button-sidebar morph-button-fixed">
<button type="button"><span class="icon icon-cog">Settings Menu</span></button>
<div class="morph-content">
<div>
<div class="content-style-sidebar">
<span class="icon icon-close">Close the overlay</span>
<h2>Settings</h2>
<ul>
<li><a class="icon icon-camera" href="#">Default filters</a></li>
<li><a class="icon icon-server" href="#">Storage Use</a></li>
<li><a class="icon icon-heart" href="#">Favorites</a></li>
</ul>
</div>
</div>
</div>
</div><!-- morph-button -->
And this javascript code for the Meteor callback:
Template.sidebar.events({
'click .morph-button': function () {
$('.morph-content').transition();
}
});
Template.sidebar.rendered = function () {
$('.morph-content').transition();
};
I am having trouble understanding how this works. I am getting funny results. Help much appreciated!
I was having trouble finding much documentation on the menu you are talking about. So I am going to take a more JS approach to answering this question.
Under events you are attaching transition() to $('.morph-content'), which you have already done when the DOM was rendered. I would assume that the one doesn't belong. You may just need to attach it under rendered, and the included JS may attach everything else it needs to the DOM(i.e. when you add $('.date').datepicker() to an HTML element.

Categories