I have a button:
<button ng-click="deleteCompany(company.id)"
class="btn btn-danger"
onClick="return window.confirm('This will permernently delete the entity\n
Are you sure you want to delete this post?'); ">
<span class="glyphicon glyphicon-trash"></span>
</button>
I also have an angular function:
$scope.deleteCompany = function(id){
console.log(id);
}
When i click cancel in the confirm the console outputs:
1
When i click ok in the confirm the console outputs:
1
I want the angular code to execute when the "Ok" is pressed but not when the "Cancel" is pressed.
JSFiddle example: http://jsfiddle.net/4304ewu5/
Throw your confirm inside the $scope.deleteCompany() function:
function MyCtrl($scope) {
$scope.deleteCompany = function(id) {
if (confirm('This will permernently delete the entity\nAre you sure you want to delete this post?')) {
$scope.name = id;
// delete the stuff.
}
}
}
And remove it from the inline HTML:
<div ng-controller="MyCtrl">
<button ng-click="deleteCompany('1')" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
<button ng-click="deleteCompany('2')" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
Hello, {{name}}!
</div>
Fiddle: http://jsfiddle.net/0Laztrfk/
Why don't you put the confirm within your deleteCompany method?
$scope.deleteCompany = function(id) {
if (!confirm("Delete company?"))
return;
console.log(id);
}
Related
These two are the buttons that appear several times and don't work:
<button name='btnEditar' class='btn btn-outline-success me-4' data-bs-toggle='modal' data-bs-target='#staticBackdrop'><i class='bi bi-pencil-square'></i></button>
<button name='btnEliminar' class='btn btn-outline-danger ms-4' data-bs-toggle='modal' data-bs-target='#staticBackdrop'><i class='bi bi-trash3'></i></button>
This one works fine (only one button):
<button id="btnAgregar" type="button" class="btn btn-success px-4" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
Agregar
</button>
This is the JS code:
jQuery('#btnAgregar').on('click', function () {
document.getElementById("staticBackdropLabel").innerHTML = "Agregar obra social";
});
jQuery("button[name='btnEditar']").on('click', function () {
document.getElementById("staticBackdropLabel").innerHTML = "Editar obra social";
});
jQuery("button[name='btnEliminar']").on('click', function () {
document.getElementById("staticBackdropLabel").innerHTML = "Eliminar obra social";
});
IDK why, but if I add this, the code works fine:
alert(document.getElementsByName("btnEditar"));
It's like if the alert function makes the click event works.
I solved it adding the onclick action like this:
<button class='btn btn-outline-success me-4' onclick='modalEdit()' data-bs-toggle='modal' data-bs-target='#staticBackdrop'><i class='bi bi-pencil-square'></i></button>
JS code:
function modalEdit() {
$("#staticBackdropLabel").text("Editar obra social");
}
good morning:
<html>
<button type="button" class="btn btn-primary">Notifications <span class="badge badge-light">4</span>
</button>
<button type="button" class="btn btn-primary">Profile <span class="badge badge-light">9</span>
<span class="sr-only">unread messages</span>
</button>
</html>
now how I implement these ?
for example like facebook when i click the notification appear a little submenu
anyone can help me ?
thanks
You can get the notifications from the database in your controller, put them in a variable, and pass it to a view.
In the view itself you can do something like this:
// $notificationsCount is the variable with number of notifications you passed to the
view in your controller
<button type="button" class="btn btn-primary">Notifications
<span class="badge badge-light"><?php echo $notificationsCount ?></span>
</button>
If you don't want to refresh the page, you could use ajax or some kind of event.
Example:
$('#someElement').on('click', function () {
//change value of the notification btn
});
I have a button that is being used to toggle a class on a div to open and close a side menu.
<div id="body-holder" [ngClass]="{'show-nav':isActive}">
<div class="site-wrap">
<button class="toggle-nav" (click)="flipper()">
<i class="fa fa-bars" aria-hidden="true" ></i>
</button>
</div>
</div>
In my component.ts file i have the following code.
isActive: boolean = true;
flipper()
{
this.isActive = !this.isActive;
}
however instead of toggling the class when I click the button the page gets reloaded instead and redirects me to my application homepage.
You have to add preventDefault to your click event in this way:
flipper(event: any)
{
event.preventDefault();
this.isActive = !this.isActive;
}
and in your html code:
<button class="toggle-nav" type="button" (click)="flipper($event)">
<i class="fa fa-bars" aria-hidden="true" ></i>
</button>
Set button type attribute to type="button":
<button type="button" class="toggle-nav" (click)="flipper()">
<i class="fa fa-bars" aria-hidden="true" ></i>
</button>
Setting the button type to type="button" might also solve the problem
<button type="button"
It seems your button is inside a form and causes a submit.
Button inside division or form most of the times have default behavior of loading the page. For that reason, It's better to set type attribute of button as "buton".
<button type="button" class="toggle-nav" onclick="flipper()"> <i class="fa fa-bars" aria-hidden="true" ></i></button>
I think there is mistake in function. You missed to mention "funtion" keyword before you define the function. I tried a sample fiddle: here
<script>
isActive: boolean = true;
function flipper()
{
alert("a");
}
</script>
Am developing an application in angular js and using ui.router.
I would like to hide certain buttons based on a given state.
I have implementend the click event which navigates to the selected state, and i would like when a button has been clicked and is active to be hidden and reappear when the state is not active
I have tried
HTML FOR THE BUTTONS
<button type="button" ng-click="viewNew()" class="btn btn-sm btn-success">
<i class="glyphicon glyphicon-plus">
</i> New calls
</button>
<button type="checkbox" ng-click="viewAssigned()" class="btn btn-sm btn-success">
<i class="glyphicon glyphicon-plus">
</i> Assigned calls
</button>
On the controller
$scope.viewAssigned = function () {
$state.go("dash.call.assigned");
}
$scope.viewNew = function () {
$state.go("dash.call.new");
}
How can i alter my controller code to hide and show these buttons using ng-show
You'll need to add information about the state to the controller, through something like $scope.state = $state.current.name
From there, you can use that in an ng-show or ng-if.
You can do this,
<button type="checkbox" ng-click="viewAssigned()" ng-hide="$state.includes('dash.call.assigned')" class="btn btn-sm btn-success">
<i class="glyphicon glyphicon-plus"></i> Assigned calls
</button>
you should have added $state in $rootScope, for this to work.
Inject $state, $rootScope and place this in your app's run block.
$rootScope.$state = $state;
You can use a $scope variable to track the state change.look at the below code
$scope.viewAssigned = function () {
$scope.viewnew = true;
$state.go("dash.call.assigned");
}
$scope.viewNew = function () {
$scope.viewnew = false;
$state.go("dash.call.new");
}
And your HTML code should be like this,
<button type="button" ng-click="viewNew()" class="btn btn-sm btn-success" ng-hide="viewnew">
<i class="glyphicon glyphicon-plus">
</i> New calls
</button>
<button type="checkbox" ng-click="viewAssigned()" class="btn btn-sm btn-success" ng-hide="!viewnew">
<i class="glyphicon glyphicon-plus">
</i> Assigned calls
</button>
You can see when the $state is changing and hide that buttons. On your run() you can use a function similar to this:
myApp.run(function ($rootScope, $state) {
$rootScope.viewnew= false;
$rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
if (toState.name === 'myState') {//toState variable see the state you're going
$rootScope.viewnew = false;
} else {
$rootScope.viewnew = true;
}
});
});
then add this to your buttons:
<button type="button" ng-click="viewNew()" ng-hide="viewnew" class="btn btn-sm btn-success">
<i class="glyphicon glyphicon-plus">
</i> New calls
</button>
<button type="checkbox" ng-click="viewAssigned()" ng-hide="!viewnew" class="btn btn-sm btn-success">
<i class="glyphicon glyphicon-plus">
</i> Assigned calls
</button>
so when your $state change it would hide or show it.
Sup, I have problem with getting data-* value using jQuery.
My HTML code is:
<button type="button"
class="btn btn-danger"
id="{{ currency.id }}"
data-curname="{{ currency.name }}"
data-toggle="modal"
data-target="#deleteConfirm"
onclick="deleteCurConf(this.id)">
<span class="glyphicon glyphicon-remove"></span>
Delete
</button>
jQuery is:
function deleteCurConf(id) {
var curName = $('#' + id).data('curname');
console.log(curName);
}
But console log returns undefined. And the most interesting thing that this code was working yesterday but today it's broken.
Any idea?
Btw, I'm using Bootstrap3 and Twig
Two little changes needed:
1) just pass this instead of this.id while calling function:
<button type="button"
class="btn btn-danger"
id="{{ currency.id }}"
data-curname="{{ currency.name }}"
data-toggle="modal"
data-target="#deleteConfirm"
onclick="deleteCurConf(this)">
<span class="glyphicon glyphicon-remove"></span>
Delete
</button>
2) in function:
function deleteCurConf(id) {
var curName = $(id).data('curname'); // use $(id)
console.log(curName);
}
Cleaner way to do in jQuery would be:
<button type="button"
class="btn btn-danger handleClick" // Added extra class
id="{{ currency.id }}"
data-curname="{{ currency.name }}"
data-toggle="modal"
data-target="#deleteConfirm"
<span class="glyphicon glyphicon-remove"></span>
Delete
</button>
jQuery
$("document").on("click",".handleClick",function(evnt){
var curName = $(evnt.target).data('curname'); // use $(id)
console.log(curName);
})