问题描述
我构建了一个快速应用程序,最后,我为该应用程序中的删除按钮之一添加了警报。但是,警报甚至在我单击“确定”之前就消失了。
这是我的删除表格
<form
action="/grades/<%=grade._id%>?_method=DELETE"
method="POST"
class="delete-form"
>
<input
type="submit"
class="btn btn-danger mt-3"
value="Delete Class"
id="delBotton"
/>
</form>
这是我的main.js
文件:
const delBtn = document.getElementById('delBotton');
delBtn.addEventListener('click',() =>
alertify.alert('This is an alert dialog.',function () {
alertify.message('OK');
})
);
最后,这是我的删除路线:
router.delete('/:id',middleware.checkGradeOwnership,(req,res) => {
Grade.findByIdAndRemove(req.params.id,(err) => {
try {
res.redirect('/grades');
} catch (err) {
res.redirect('/grades');
console.log(err);
}
});
});
如何解决此问题?
解决方法
由于您输入的内容为const data =['A','B','C'];
describe('Client.App.ProfileComponent',() => {
let component: ProfileComponent;
let fixture: ComponentFixture<ProfileComponent>;
let profileService: jasmine.SpyObj<ProfileService>;
beforeEach(async(() => {
// create a spied service and use it inside providers array
profileService = jasmine.createSpyObj('ProfileService',['login','getData']);
TestBed.configureTestingModule({
imports: [HttpClientTestingModule,ReactiveFormsModule,RouterTestingModule],declarations: [ProfileComponent],providers: [ { provide: ProfileService,useValue: profileService ],schemas: [NO_ERRORS_SCHEMA]
}).compileComponents();
// provide fake implementation to service methods
profileService.login.and.returnValue(Promise.resolve('success'));
profileService.getData.and.returnValue(of(data)); // of is rxjs operators- import
fixture = TestBed.createComponent(ProfileComponent);
component = fixture.componentInstance;
fixture.detectChanges();
}));
it('shall create the component',() => {
expect(component).toBeDefined();
});
});
,因此默认情况下将提交表单。为了防止这种默认行为,您可以在点击处理程序中调用type="submit"
,或者更适当地将输入设置为e.preventDefault()
,因为您不打算使用此按钮提交表单。接下来,库 type="button"
似乎有一个onok
事件,您可以使用该事件检查用户是否已确认,然后可以使用该事件手动调用表单的Submit函数 用户按下OK后,请参见下面的可运行代码片段以获取工作示例:
alertify
const delForm = document.getElementById('delForm');
const delBtn = document.getElementById('delBotton');
delBtn.addEventListener('click',() => {
alertify.alert('This is an alert dialog.',() => {
alertify.message('OK');
}).set({ 'invokeOnCloseOff': true,'onok': () => delForm.submit()})
});
注意::最初,我忘记将<!-- CSS -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/alertify.min.css" />
<!-- Default theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/themes/default.min.css" />
<!-- JavaScript -->
<script src="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/alertify.min.js"></script>
<form action="/grades/<%=grade._id%>?_method=DELETE" method="POST" class="delete-form" id="delForm">
<input type="button" class="btn btn-danger mt-3" value="Delete Class" id="delBotton" />
</form>
设置为invokeOnCloseOff
,但这似乎导致true
事件触发,无论用户是否按下确定按钮。如果您要区分单击“确定”按钮和以其他某种方式消除警报模式,则onok
应设置为true。了解更多here