如何解决弹出后,Alertify警报就会消失
我构建了一个快速应用程序,最后,我为该应用程序中的删除按钮之一添加了警报。但是,警报甚至在我单击“确定”之前就消失了。
这是我的删除表格
<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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。