How can I remove "X" button from Popup in angularJS? I don't need it because the cancel button that I have implemented has same functional but the "X" button couldn't reset modifies. It will be implemented as default in HTML:
<div class="ngdialog-close"></div>
While opening popup you need to pass one option showClose which will hide close button if its false.(default true)
Code
ngDialog.open({
template: 'templateId',
className: 'ngdialog-theme-default',
showClose: false //<-- while opening dialog make it false
});
You have to read documentation before integrating (using) any module in your project. Here is the complete list of options for ngDialog.
Hide close button
Related
I have a button as follows:
<input type="submit" class="button" value="FooBar" name="FooBar" id="FooBar" disabled="disabled">
I am enabling this button only when certain parameters are met. To test whether it was secure, I pressed F12 (or right click -> Inspect Element) and edited out the text disabled="disabled". Doing this overrides my code and that is scary. How can I prevent someone from changing it in this manner?
I am using php and jquery in this page and using the latter to enable or disable the button. I have checked the jquery click function and it not only executes, but shows the button as not disabled. The alert below reads Disabled: false
$("#FooBar").click(function(){
alert('Disabled: ' + $(this).is('[disabled=disabled]'));
})
So how can I prevent a user from changing the button disabled state and thus overriding my logic?
You can disable the right-click by doing:
document.addEventListener('contextmenu', event => event.preventDefault());
but it is not recommended. Why? It achieves nothing other than the annoying user
OR
Alternatively, a better approach is to recheck your validations in submit action and simply returns if it fails, in this case, if user inspects and changed the state of a button, the button stays idle and will not allow to proceed
$("#FooBar").click(function() {
if (!this.acceptenceCriteria()) {
return;
}
alert('Disabled: ' + $(this).is('[disabled=disabled]'));
})
You can't stop people from using dev tools.
You can try a couple of tricks to disable right clicking (like the one below) which will stop some number of people but ultimately the solution to your problem is to use html and http properly.
$(document).bind("contextmenu",function(e) {
e.preventDefault();
});
I have a focus trap that activates when an angular material dialog is opened. A parent component contains the cdkTrapFocus directive from the a11yModule (https://material.angular.io/cdk/a11y/api#CdkTrapFocus), and it's various children can have a varying number of inputs.
The focus trap works as expected when the dialog is opened, preventing the user from pressing tab or shift-tab to access items behind the dialog. However, when a user clicks on the grayed-out area behind the dialog, then presses shift-tab, they gain access to all items behind the dialog.
The focus trap remains broken until they press shift-tab (or tab) enough times to move the focus back inside the dialog. The correct behavior would be that the focus only ever stays trapped in the dialog, no matter what is clicked on inside or outside the dialog.
For the most part I have examined the link above to see what options there are to ensure focus remains trapped, but It has been difficult to determine what directives would be most useful for this problem. Below is the parent component html template.
<div class="dialog-frame dialog-fade dialog-backgray" [ngClass]="{ 'in': shown }" role="dialog">
<div class="dialog-main" [style.width]="dialogWidth" id="dialog-main" cdkTrapFocus>
<ng-template #element> </ng-template>
</div>
</div>
If anyone reading this has a solution to this, I would appreciate your help.
I ran into the shift-tab issue. The solution for me was to add a keydown listener, which prevents focus if the event path is not in the modal:
#HostListener('document:keydown', ['$event'])
onTab(event) {
if (event.key == 'Tab' && this.modalIsOpen) {
let path = event.composedPath();
let modal = path.find((element) => element.tagName && element.tagName.toLowerCase() == this.modalComponentTagName);
if (path && !modal) {
// Tabbing outside of the modal.
event.preventDefault();
this.focusOnFirstElementInModal();
}
}
}
For me this.modalIsOpen is this.document.body.classList.contains('modal-open'), this.modalComponentTagName is 'app-donate-modal', and this.focusOnFirstElementInModal() focuses on the modal's close button.
I have a custom element that I just want to show when I click a button. Then, when I click that button, I want to do something like...:
<my-element [hidden]="switchHidden()"></my-element>
... so if it's in false, it now will be true, and viceversa. A very typical approach.
But I don't know how I can pass to my function "switchHidden()" the value of the "hidden" attribute. How can I do this, so I can check whether it is true or false?
Thank you!
Don't use hidden attribute, use:
<my-element *ngIf="switchHidden"></my-element>
http://angularjs.blogspot.ba/2016/04/5-rookie-mistakes-to-avoid-with-angular.html
PLUNKER Demo
Just have a variable in your component that is a boolean for when you want to show and hide it.
let showElement: Boolean = true;
Then when you want to toggle it on/off with a button put this in the click.
<button (click)="showElement = !showElement">Toggle</button>
and that will flip the value of showElement every time the user clicks the button. So if showElement is true, when the user clicks the button it will make showElement false and thus hidding your element. Vise versa for when showElement is false, the user clicks the button making it true and thus showing your element.
I'm using bootbox.js along with yii2 framework to change the default confirmation popup on delete actions.
When I hit the "delete" buttons the bootbox popup appear properly but the "ok" button is preselected, so if the user hit the "enter" button the action take place.
Is it possible to change the default selected button from "ok" to "cancel"?
Thank you
There isn't anything baked into the library to do what you want, but something like this should work:
var dialog = bootbox.confirm("Please confirm action", function(result){
/* handle result */
});
dialog.on("shown.bs.modal", function() {
dialog.find('.modal-footer .btn.btn-default').focus();
});
As you can see on this page jQuery mobile renders an "X" at the right of the entered text in an input search box. How can I attach to the click-event of that "X"?
$('.ui-input-clear').live('click', function(e){
alert('click!');
});
Is a good starting point. I use live as the searchbox isn't necessarily in the page on load.
This of course is nonspecific by using the class but if required can be made so.
Update: As of jQuery 1.7 .live is deprecated in favour of .on: http://api.jquery.com/on/
$('.ui-content').on('click', '.ui-input-clear', function(e){
alert('click!');
});
bind click to the whole thing and then determine what was clicked with event.target which holds the originally clicked element as the event bubbles up.
A simple if that checks for some classes should do.
Start from binding click and sniffing what's clicked:
$(theinput).click(function(e){
console.log(e.target);
});
Tested with jQuery 1.9 and jQuery Mobile 1.3:
I Have the input inside a form so, suscribed the event to an element inside it:
<form id="frmBusqueda" action="frmBusqueda">
<input name="txtBusqueda" id="txtBusqueda" placeholder="Nombre de producto"
value="" type="search" data-clear-btn="false" onkeyup="activarFiltro();">
</form>
$('#frmBusqueda').on('click', '.ui-input-clear', function (e) {
alert('click!');
})