In my Angular 5 app I'm using ng-bootstrap but it's not appearing. I'm just trying to open it up the normal way from typescript:
private modalRef: NgbModalRef;
constructor(private modalService: NgbModal) {}
openModal(content) {
this.modalRef = this.modalService.open(content);
}
With a super simple HTML test.
<ng-template #content let-c="close" let-d="dismiss">
Hi mom!
</ng-template>
<button class="btn btn-lg btn-primary"
(click)="openModal(content)">Add AR</button>
I see that my openModal is in fact being called, but the dialog doesn't appear. No errors are being put into the console either.
Try:
<ng-template #content let-c="close" let-d="dismiss">
Hi mom!
<button class="btn btn-lg btn-primary"
(click)="openModal(content)">Add AR</button>
</ng-template>
Related
Let's consider the following page in a client side blazor app:
#page "/test"
<div id="modalDialog" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<EditForm Model="#model" OnSubmit="#SubmitHandler">
<div class="form-group d-flex justify-content-between">
<label class="col-form-label col-3" for="editDT">Time</label>
<InputText bind-Value="#model" id="editDT" Class="form-control" />
</div>
<button type="submit" class="btn btn-primary" #*data-dismiss="modal"*#>Submit</button>
</EditForm>
</div>
</div>
</div>
</div>
<button data-toggle="modal" data-target="#modalDialog" class="btn btn-primary">Open</button>
#functions {
private string model { get; set; } = "Model";
private void SubmitHandler()
{
Console.WriteLine("Submit");
}
}
When I click the Open button, the modal appears as expected. Then clicking on the Submit button in the modal, "Submit" gets printed in the browser console, again as expected.
But I need also to close the modal when I click Submit so I uncomment the data-dismiss attibute.
Now, the modal closes as expected, but the Submit handler is not called anymore (browser console remains empty).
1) Is this the expected behaviour?
2) If yes, is there a way to close the modal in the Submit handler without javascript interop?
3) If not, is there another way to both close the modal and have the Submit handler called when clicking on the Submit button, again without js interop?
Your biggest issue is using bootstrap as is. BS uses it’s own JS to manipulate the DOM, this won’t work with Blazor as Blazor needs to control the DOM. Same as Angular, React or Vue. If something else modifies the DOM then odd things can happen, as you’re finding.
I would suggest swapping to one of the Blazor-fied bootstrap libraries such as BlazorStrap. Or if you’re just after a modal I’ve written one called Blazored.Modal
To make the form submit inside the bootstrap modal do the following:
Give your form an id
<EditForm id="my-form-ref">
Then add attribute form to the submit button with the value of the form id
<button type="submit" class="btn btn-danger" form="my-form-ref">Submit Form</button>
I guess that dismiss="modal" is viable only if you use <button type="button"></button>, but this would not enable "submission of the form". To really solve this issue, I'd suggest you use the <form> tag
and <button type="button"> tag instead.
But a better solution is to follow what Chris Sainty suggested in his answer.
I may add that it doesn't seem to me a good practice to embed the Bootstrap dialog box in Blazor, when such object can easily implemented in Blazor...
Hence, I would suggest that you yourself create a dialog-box component, a templated one, perhaps based on the Bootstrap dialog box...After all, I guess that like all of us, you are in the learning phase of Blazor. So it can be a good exercise.
Hope this helps...
All good suggestions. However, for the sake of completeness, I found a way to achieve what I wanted, even if it is a not very elegant workaround:
#page "/test"
#using System.ComponentModel.DataAnnotations;
<div id="modalDialog" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<EditForm EditContext="#EC">
<DataAnnotationsValidator />
<ValidationSummary />
<div class="form-group d-flex justify-content-between">
<label class="col-form-label col-3" for="editDT">Time</label>
<InputText bind-Value="#model.Name" id="editDT" Class="form-control" />
</div>
#if (EC.Validate())
{
<button type="button" onclick="#SubmitHandler" class="btn btn-primary" data-dismiss="modal">Submit</button>
}
else
{
<button type="button" onclick="#SubmitHandler" class="btn btn-primary">Submit</button>
}
</EditForm>
</div>
</div>
</div>
</div>
<button data-toggle="modal" data-target="#modalDialog" class="btn btn-primary">Open</button>
#functions {
public class ModelClass
{
[Required]
public string Name { get; set; }
}
private ModelClass model { get; set; } = new ModelClass { Name = "My Name" };
private EditContext EC { get; set; }
private void SubmitHandler()
{
Console.WriteLine("Submit");
}
protected override void OnInit()
{
EC = new EditContext(model);
base.OnInit();
}
}
I have two buttons with inputs, like this:
<div class="input-group col-5 align-self-center">
<input id="endeDate" class="form-control" placeholder="dd.mm.yyyy" name="endeDate"
[minDate]="minDate" [markDisabled]="disableWeekend" [class.is-invalid]="checkValidity('dateEnd')"
ngbDatepicker #endeDate="ngbDatepicker" formControlName="dateEnd" (focus)="endeDate.toggle()">
<div class="input-group-append">
<button class="btn btn-primary calendar" (click)="endeDate.toggle()" type="button">
<fa-icon icon="calendar-alt"></fa-icon>
</button>
</div>
</div>
<div class="input-group col-5 align-self-center">
<input id="startDate" class="form-control" placeholder="dd.mm.yyyy" name="startDate"
[minDate]="minDate" [markDisabled]="disableWeekend" [class.is-invalid]="checkValidity('dateStart')"
ngbDatepicker #startDate="ngbDatepicker" formControlName="dateStart" (focus)="startDate.toggle()">
<div class="input-group-append">
<button class="btn btn-primary calendar" (click)="startDate.toggle()" type="button">
<fa-icon icon="calendar-alt"></fa-icon>
</button>
</div>
</div>
I need to write unit tests. Unit test has to check datepicker.
it('check Validation field Ende', () => {
let datepicker = fixture.debugElement.nativeElement.querySelector('button').endeDate.toggle();
expect(document.querySelector('.dropdown-menu.show')).toBeNull();
datepicker.click();
expect(document.querySelector('.dropdown-menu.show')).not.toBeNull();
});
But in first and second it opened the same first button.
I tried also this:
let datepicker =
fixture.debugElement.query(By.css('input[id=endeDate]'));
datepicker.nativeElement.click();
but it doesn't work.
Have somebody another Idea
Typically - with Angular being more of the UI component - I will not recommend doing this as a "unit test" from inside Angular. This is more of an end-to-end test you are performing, so why not make use of something like Selenium?
Also - you are selecting the element by CSS - highly recommend you do it by ID instead.
Hi I'm trying to click on this button that stays disabled until you fill in other fields. I am working with firefox. My script fills out those fields and the button is now clickable with my mouse. But when I try to click that element through selenium I get an error
WebDriverException: Message: Element is not clickable at point (281.8333282470703, 14.149993896484375). Other element would receive the click: <li ng-class="{active: $state.includes('urlAdm')}" id="adm-menu"></li>
Here is the html for the button.
<div class="col-xs-offset-2 col-xs-5">
<button type="submit" class="btn btn-primary ng-binding" ng-disabled="!userForm.$valid || user.deleted_at" disabled="disabled">
<i class="fa fa-check-square-o fa-fw"></i>
Create
</button>
<!-- ngIf: isAddUser() --><button ng-if="isAddUser()" type="button" class="btn btn-default ng-scope" ng-click="resetForm()">
<i class="fa fa-eraser fa-fw"></i>
Clear
</button><!-- end ngIf: isAddUser() -->
<!-- ngIf: !user.deleted_at && user.id !== currentUser.id && user.id -->
<!-- ngIf: user.deleted_at -->
</div>
I've tried regularly clicking on the button and doing it through actions but neither work.
Here is the code
element = driver.find_element_by_xpath("//*[#id='user-editor-1']/form/div[5]/div/button[1]")
ActionChains(driver).move_to_element(element).click().perform()
Any help would be greatly appreciated. Thanks!
You should try to click using execute_script() as below :-
element = driver.find_element_by_xpath("//button[contains(.,'Create')]")
driver.execute_script("arguments[0].click();",element)
Hope it helps....:)
I have a bootstrap button group in my Ember 2.2 app that looks like this:
<div class='btn-group' role='group' aria-label='...'>
<button type="button" class="btn btn-primary btn-xsm active={{aIsActive}}" >A</button>
<button type="button" class="btn btn-primary btn-xsm active={{bIsActive}}" >B</button>
<button type="button" class="btn btn-primary btn-xsm active={{cIsActive}}" >C</button>
</div>
'aIsActive', 'bIsActive', and 'cIsActive' are defined in the associated controller, and only one will be 'true' at a given time. The syntax shown above doesn't work. What's the proper way of doing this?
Here you go: if-helper
<button class="btn {{if aIsActive 'active'}}" >A</button>
btw, if you are creating navigation you should do it with link-to helper. It will add active class automatically when route is active.
I am creating an app in django and I have the next problem: I want to add a glyphicon into the next button:
<input class="btn btn-primary" type=button name="name" onClick="location.href='/location/'" value='I am a button'>
Concretely, I want the glyphicon to be with the text 'I am a button'. How can I do it?
Thank you!!!
instead of using input type button, you should try using button element
so something like this
<button type="button" class="btn btn-primary" onClick="location.href='/location/'">
<span class="glyphicon glyphicon-music"></span> I am a button
</button>
add the class as the icon class. For example class="glyphicon glyphicon-off for power button. Moreover remove the value of the button.