I have created a Button in Bootstrap and assigning an attribute to it. Upon clicking the button, I wish to get the attribute value in the function. However, when I pass $element.currentTarget to function, I a getting undefined value in the function. Please let me know what is wrong with my approach. Below is the code
<div >
<a class="btn btn-info btn-circle text-uppercase" href="#" id="reply" ng-click="addReply($element.currentTarget)" data-id = "{{ comment.comment }}"><span class="glyphicon glyphicon-share-alt"></span> Reply</a>
<a class="btn btn-warning btn-circle text-uppercase" data-toggle="collapse" href="#replyOne" aria-expanded="true"><span class="glyphicon glyphicon-comment"></span> 2 comments</a>
</div>
$scope.addReply = function(item) {
var id = angular.element(item).data('id');
alert(id);
};
you should be using angular directives instead.
myApp.directive('btnAttrClick', function() {
return {
link: function(scope, element, attr) {
element.on('click', function() {
alert(attr.dataId);
})
}
}
})
and your button:
<button btn-attr-click data-id="{{ comment.comment }}">Reply</button>
I didn't test the code, but you get the gist - directives is what makes angular awesome - learn 'em, love 'em
Try this instead
$scope.addReply = function doStuff(item){
var id = item.attributes['data-id'].value;
alert(id);
}
Related
I have a bootstrap popover for my django website that opens when a button is clicked. Inside this popover is another button. I am currently doing this by putting HTML in the 'data-content' of the popover, seen below:
<a tabindex="0" id="{{prod.title}}" value="{{prod.id}}" type="button"
class="btn btn-secondary btn-light mt-3 mb-0"
data-toggle="popover"data-trigger="focus" data-html="true" data-content="
<div class='btn-group-vertical'>
<a type='button' data-show-value='{{prod.id}}' id='{{prod.id}}'
class='btn btn-secondary btn-pop wish'>Add to Wishlist</a>
</div>"
>More Options</a>
I need to get the 'data-show-value' in jQuery, and I am currently using the following which triggers when this button is clicked:
$(document).on('click', '.wish', function () {
var thisButton = $(this)[0]
console.log(thisButton);
var prodID = $(this).data("show-value");
}
However, all this does is return 'undefined'.
I used console.log(thisButton) to see what the button code is displaying as, and it is this:
<a id=10 class='btn btn-secondary btn-pop wish'>Add to Wishlist</a>
This explains why the 'data-show-value' is returning as undefined, as the attribute itself is not rendering on the web page.
Why is this?
.wish is a class and there may be a lot of elements that has this class you need to specify an id instead:
$(document).on('click', '.wish', function () {
var thisId = $(this).attr('id');
console.log(thisId); //check if this is the id of the element you want to trigger
var prodID = $('#'+thisId).data("show-value");
}
I'm trying to rewrite some javascript code from an inline button onclick call to an regular javascript function.
I used the this reference in my code to remove a table column, which worked perfectly fine. Since I need to use the line of code on a few places I want it to be in a regular javascript function.
What I had:
<button type="button" tabindex="-1" class="btn btn-secondary btn-tblrmv" onclick="if(!$(this).closest('tr').hasClass('notDeletable')){ $(this).closest('tr').remove(); }">
<i class="mdi mdi-minus"></i>
</button>
as for the javasript function itself:
function removeTableRow(){
if(!$(this).closest('tr').hasClass('notDeletable')){
$(this).closest('tr').remove();
}
}
Could someone please explain, why this isn't working as intended?
This do not work because this is not referring to the current element. Try with:
HTML:
<button type="button" tabindex="-1" class="btn btn-secondary btn-tblrmv" onclick="removeTableRow(this)">
<i class="mdi mdi-minus"></i>
</button>
JS:
function removeTableRow (row) {
if (!$(row).closest('tr').hasClass('notDeletable')) {
$(row).closest('tr').remove();
}
}
I am a novice.I have a line of code like this that was written for me.
<a class="pull-right btn btn-primary" ng-click="addWidget()"><i class="glyphicon glyphicon-plus"></i> Add Widget</a>
Which works perfectly (it adds the widget which is a box element to the page). The function is defined in the controller DashboarCtrl like this
$scope.addWidget = function() {
$scope.dashboard.widgets.push({
name: "New Widget",
sizeX: 1,
sizeY: 1
});
};
How do invoke that same function in the console? I have tried
angular.element('#DashboardCtrl').scope().addWidget();
Lets just say that your add Widget link has an id (add_widget). Then you can find the element by id and click it.
<a id="add_widget" class="pull-right btn btn-primary" ng-click="addWidget()">
<i class="glyphicon glyphicon-plus"></i> Add Widget
</a>
angular.element('#add_widget').click();
I'm using this https://github.com/amitava82/angular-multiselect multiselect dropdown for my project.
In my html:
<am-multiselect class="sv-manage-multiselect-dropdown"
ng-model="nameList.name"
options="name as name.key for name in nameList"
multiple="true"
</am-multiselect>
This dropdown has a "checkall" and "uncheckall" button in the dropdown, which I WANT to remove, while keeping the functionality of the multi-select.
This is the html in the directive the guy uses:
src/multiselect.tmpl.html
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" ng-click="toggleSelect()" ng-disabled="disabled" ng-class="{'error': !valid()}">
{{header}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<input class="form-control input-sm" type="text" ng-model="searchText.label" ng-keydown="keydown($event)" autofocus="autofocus" placeholder="Filter" />
</li>
<li ng-show="multiple" role="presentation" class="">
<button class="btn btn-link btn-xs" ng-click="checkAll()" type="button"><i class="glyphicon glyphicon-ok"></i> Check all</button>
<button class="btn btn-link btn-xs" ng-click="uncheckAll()" type="button"><i class="glyphicon glyphicon-remove"></i> Uncheck all</button>
</li>
<li ng-repeat="i in items | filter:searchText" ng-class="{'selected': $index === selectedIndex}">
<a ng-click="select(i); focus()">
<i class='glyphicon' ng-class="{'glyphicon-ok': i.checked, 'empty': !i.checked}"></i> {{i.label}}</a>
</li>
</ul>
</div>
I wan't to just remove/override the checkall and uncheckall buttons WITHOUT editing this library's directive. I can override the CSS in my personal file.css, but how do I override the HTML template he uses. Thanks
I see 3 ways you could do it:
Add your own template to replace this one like this (reference):
<script type="text/ng-template" id="multiselect.tmpl.html">
html template without buttons here
</script>
The potential issue with this is that you would be overriding this template everywhere it's used. But maybe you are using this in a bunch of places and that makes sense.
Add a decorator to the directive that removes the part of the template you don't want during the compile phase and allows the rest of the directive to perform as usual:
decorator('amMultiselectPopupDirective' ['$delegate', function($delegate) {
var directive = $delegate[0];
var compile = directive.compile;
directive.compile = function(tElement, tAttrs) {
var link = compile.apply(this, arguments);
if (tAttrs.disableCheckAll) {
tElement.find('li[ng-show="multiple"]').remove();
// this code could be different, but the gist is that it would remove or hide the stuff you don't want
}
return function() {
link.apply(this, arguments);
};
};
return $delegate;
}]);
The potential issue here is that you would be changing the template for this directive everywhere the directive is used. That's why in my example I made the template change conditional based on some attribute you could define, like disableCheckAll.
Use template-url attribute that is already defined for this directive and create your own template that doesn't have these buttons:
<script type="text/ng-template" id="yourowntemplate.html">
html template without buttons here
</script>
<am-multiselect ...
template-url="yourowntemplate.html">
</am-multiselect>
I would say 3 is probably the best way to do it. But 1 could work better if you wanted to override the default, and then you wouldn't have to pass in the template-url everytime you use the am-multiselect directive.
Edit: Here is a working example for 3: http://plnkr.co/edit/m0lZSHUJ8MHslqCNPnCc?p=info
Overlap his directive with your own div with class: "no-btns"
Add this css:
.no-btns .dropdown-menu li:nth-child(2) {display:none;}
Example:
<style>
.no-btns .dropdown-menu li:nth-child(2) {
display:none;
}
</style>
<div class="no-btns">
<am-multiselect class="sv-manage-multiselect-dropdown"
ng-model="nameList.name"
options="name as name.key for name in nameList"
multiple="true"
</am-multiselect>
</div>
<button id="search-district" type="button" class="btn btn-sm btn-success" data-toggle="popover" data-placement="bottom" title="<a href='#' class='pull-right popover-close' onclick='$("#search-district").popover("hide");'>×</a>" data-html="true" data-content="
<a id='id_district_100' href='#' onclick='ChangeDistrictSelection("100");'>District123</a>
"><span class="glyphicon glyphicon-plus"></span> Dsitricts <span id="district_bracket" style="display:none;">[<span id="count_districts_">0</span>]</span></button>
and JavaScript function
function ChangeDistrictSelection(id)
{
$('#id_district_'+id).addClass("selected");
}
When I'm clicked to District123, my JavaScript add Class "active"... But, after that when action popover on show, popover reset my class :(
What ever your selected css is you have to mark it with !important in order to override existing one.
Example
.selected {
background-color:gray !important;
}
Your question is not clear much. Please explain it we can help you so.
And also please not this also.
You are passing '100' to the function using onclick and then you are trying to get the element by id. But is already is equal to the id.
WHY??
You are doing wrong here. See your codes.
<a id='id_district_100' href='#' onclick='ChangeDistrictSelection("100");'>District123</a>
and you function also have a look
function ChangeDistrictSelection(id) {
//id will be 100 as your code.
//again you are trying to get the element by id. see your html <a id="id_district_100">
//It's already equal to $('#id_district_'+100) - why do you passing that 100 and trying to get element by id??
$('#id_district_'+id).addClass("selected");
}
If you want to add the class to that element you can use this.
function ChangeDistrictSelection(id){
//alert(id);
$(id).addClass('selected');
}
In html pass like that
<a id='id_district_100' href="#" onclick='ChangeDistrictSelection(id)'>District123</a>
ok... v2
html:
<button id="search-district" type="button" class="btn btn-sm btn-success" data-toggle="popover" data-placement="bottom" title="<a href='#' class='pull-right popover-close' onclick='$("#search-district").popover("hide");'>×</a>" data-html="true" data-content=" <a id='id_district_100' href='#' onclick='ChangeDistrictSelectionCss("100");'>District123</a> ... ">
js:
function ChangeDistrictSelectionCSS(id){
$('#id_district_'+id).css("color","red");
}
It's work, but when clicked button (id="search-district") again, css color is not red