I am using ngDialog dialog box for my mean.js application with the following call :
ngDialog.open({
template: 'modules/users/views/userDetails/dialog.client.view.html',
scope: $scope,
closeByDocument :false
});
Now, the dialog is opening fine and all the elements in it are also visible.
But I am not able to perform any any action on them.i.e., click a button or type in a text field. It feels like the whole dialog box is out of focus.
What is it that I am doing wrong here?
Note : Angular Animate might be disabled in my application by the following code :
$timeout(function () {
return $animate.enabled(false, angular.element(".carousel"));
});
But, the above code is in another controller.
Could this be the reason for the failure?
I solved the problem by changing the css a bit:
.ngdialog-overlay {
z-index: -1;
}
Related
I have a mat-checkbox, and when I click it I show a mat-dialog component, and if the user clicks "confirm" I want the checkbox to become checked, if they press cancel, I want it to remain unchecked, how do I do this?
Here is the method that the checkbox calls when clicked:
onShowDialog(): void {
const dialogRef = this.dialog.open(ConfirmActionDialogComponent, {
width: '250px',
data: { title: 'Enable publish?'}
});
dialogRef.afterClosed().subscribe(result => {
if (result) {
return true;
}
});
}
<mat-checkbox *ngIf="settingsChanged" (change)='onShowDialog($event)' formControlName="automaticallyPublish">Checkbox name</mat-checkbox>
Hi I would suggest using Primeng. They have a checkbox preset (I don't know what else to call it), that you can use for free. Here is the link:
https://www.primefaces.org/primeng/showcase/#/checkbox
They have sample code/projects that shows you how to use it.
Please note that you do have to install primeng, and here is a link to help you with that:
https://www.primefaces.org/primeng/showcase/#/setup
Hope that this works for you!
I have a <textarea> within a template driven form of an Angular 7 project.
When editing an object, the form is prefilled with the current values. I want to automatically resize the <textarea> when the content has changed via the [(ngModel)]="property" binding by modifying the element-style.
area.style.overflow = 'hidden';
area.style.height = '0';
area.style.height = area.scrollHeight + 'px';
The code generally is working, but I cannot find a suitable event to trigger it.
Subscribing to the change event of the <textarea> is only working on keyboard input. Using (ngModelChange)="adjustTextAreaSize($event)" has the same behavior.
I tried to execute my resizing code at the end of the ngOnInit() function, but the actual html-control seems to not have any content yet at this point.
Does anyone have an idea which event could do the trick here?
Seemed a rather easy task in the beginning, but I'm breaking my had over this for over an hour now... can not be such a difficult task, can it?
Yes there is a very simple solution for this.
Wrap your textarea inside a form and try the code below:-
HTML
<form #form="ngForm">
<textarea>....</textarea>
</form>
TS
#ViewChild('form') ngForm: NgForm;
ngOnInit() {
this.subscription = this.ngForm.form.valueChanges.subscribe(resp =>
{
console.log(resp); // You get your event here
}
)
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
trigger a change event on a textarea when setting the value via ngModel Binding
This will cause infinite triggering if you do so.
If you don't want to monitor the input model change in a more reactive way, a quicker solution (but a bit hacky) will be simply wrap your code inside setTimeout in ngOnInit() or ngAfterViewInit() where you mentioned it was not working.
setTimeout(() => {
updateSize();
});
In my controller I'm using this to open my Kendo UI Core window:
$scope.winQuestion.setOptions($scope.DlgOptions);
$scope.winQuestion.open();
This is the code in my html:
div kendo-window="winQuestion" k-title="'Question 1'" k-position="{ top: 60, left: 100 }"
k-width="730" k-height="300" k-visible="false"
k-content="{ url: 'questions.html' }"
k-on-open="winQuestion = true" k-on-close="winQuestion = false" style="background-color:#ffffff;"></div>
Now inside that questions.html I have a button that I try to trigger this in the same controller thats inside of another function where I process a cancel click:
$scope.winQuestion.close();
This call which in my search for answers on StackOverflow is supposed to work just returns:
TypeError: $scope.winQuestion.close is not a function
I suspect that its a scope issue but not sure why because I get into the
$scope.closeWindow = function(){
$scope.winQuestion.close();
};
Sorry I don't have a plunker for this but couldn't get kendo core ui to work there, only locally.
I have not tested it but from what it looks like you are overriding the variable of the window, with true/false in the k-on-open and k-on-close events.
When you open the window with $scope.winQuestion.open(); the on-open event will set $scope.winQuestion = true;.
So all subsequent method calls on $scope.winQuestion are no longer made on the reference of that window, but instead on a boolean value (which does not implement an open() function)
I'm having modal pop-up with some validation, when I click on button it opens that modal with two text boxes and when I type there value I've some validation that put some text in case the entry is not valid, now when I close the modal and open it again I see the errors.
I want to refresh the modal after close or in every time that I open it, any idea what is wrong here?
I've tried the following and its not working ...I can see the alert but the modal is not refreshed.
function close() {
alert("test");
//$("#MYModal").removeData('bs.modal').empty();
//$(document.body).removeClass('modal-open');
$("#MYModal").removeData();
}
Threre was suggestion to use the following
$(document).on('hidden.bs.modal', function (e) {
$(e.target).removeData('bs.modal').html('');
});
But the problem is that after I close the modal its not opend...
The removeData method removes data attached to elements. What you want to do is just find the inputs inside the modal and set the value of the to empty strings.
$(document).on('hidden.bs.modal', function () {
$(this).find('input').val('');
});
DEMO
reset form data when popup open
$('#myModal').on('shown.bs.modal', function (e) {
$('#form_id')[0].reset();
})
I'm updating an html5 datalist dynamically, as the user types, with the following script:
$('#place').on('keyup', function() {
$.post('content/php/autocomp.php', { field: 'plaats', val: $('#place').val() }).done(function(response) {
$('#autocomp-places').html(response);
});
});
Which works fine except that the datalist often doesn't show right away. When I inspect the element the html is there but the datalist is not shown as soon as it's updated. How can I force it to show?
For the record: it works... I just wish it would always show the new suggestion right away.
Please use success instead of done method of ajax and try again.
$('#place').on('keyup', function () {
$.post('content/php/autocomp.php', {
field: 'plaats',
val: $('#place').val()
}).success(function (response) {
$('#autocomp-places').html(response);
});
});
I think I just have found a decent workaround for this!
Here is my pseudo-code:
As I type, I make async httprequests to get data.
When data is returned, i clear and re-populate the datalist.
If the current input field is still focused, manually call .focus() on the input element (this seems to force the data-list popup behavior to occur).
First, I would try to use one of already available solutions such as the jQuery UI autocomplete. It will shorten your development time and make the code free of typical bugs (not to mention getting the benefits from someone else work in the future).
If you really want to create your own version, I would make sure the list is cleared and repopulated with the following code:
$('#place').on('keyup', function() {
var posting = $.post('content/php/autocomp.php', { field: 'plaats', val: $('#place').val() });
posting.done(function(data) {
$('#autocomp-places').empty().append(data);
});
});