[英]onclick of button show toastr only once and group the error messages in toastr
i am using toastr jquery plugin.我正在使用 toastr jquery 插件。 below is the link下面是链接
https://github.com/scottoffen/jquery.toaster https://github.com/scottoffen/jquery.toaster
i am facing 2 issues here我在这里面临两个问题
Currently Multiple notifications displayed on click of button (please refer attached image)目前点击按钮会显示多个通知(请参阅附图)
Expected: it should show one notification each time of click, if notification exist do not show another one.预期:每次点击应该显示一个通知,如果存在通知,则不显示另一个。
Expected: Group Name and password together as a single notification预期:将名称和密码组合在一起作为单个通知
Code代码
$(".actions").on("click", ".startWorkflowD", function() {
//Disable Start workflow button
$('.startWorkflowD').attr('disabled', 'disabled');
var userDisplayName = $("#HEADER_USER_MENU_POPUP_text").text().toLowerCase();
var actualUserDisplayName = $("#name").val().toLowerCase();
if (userDisplayName != actualUserDisplayName) {
$.toaster({
priority: 'warning',
title: 'Authentication Failed',
message: '<br/>' + 'Please enter valid Name (First name and Last name), to start the workflow.'
});
//Enable start workflow button
$('.startWorkflowD').removeAttr("disabled");
return;
}
var password = $("#Password");
if (password.val().length == 0) {
// password is empty
$.toaster({
priority: 'warning',
title: 'Authentication Failed',
message: '<br/>' + 'Please enter valid Password, to start the workflow.'
});
//Enable start workflow button
$('.startWorkflowD').removeAttr("disabled");
}
});
Any help is appreciated任何帮助表示赞赏
i tried below stackoverflow answer, my toastr does not have **"preventDuplicates": true,**
in options我在 stackoverflow 答案下尝试过,我的 toastr 在选项中没有**"preventDuplicates": true,**
It may help some one.它可能对某些人有所帮助。 Here is a sample demo I did.这是我做的一个示例演示。
Options are there with Icons选项有图标
<input type="text" name="name" id="name" placeholder="Name" />
<br>
<input type="password" name="Password" id="Password" placeholder="Password" />
<br>
<input type="button" class="actions" value="Login" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet"
type="text/css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script>
toastr.options = {
"closeButton": true,
"debug": false,
"newestOnTop": false,
"progressBar": true,
"positionClass": "toast-top-right",
"preventDuplicates": true,
"onclick": null,
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
}
$(".actions").on("click", function () {
var name = $("#name").val();
var pwd = $("#Password").val();
var errmsg = "";
if (name == "") {
errmsg = "Please enter valid Name (First name and Last name)";
}
if (pwd == "") {
errmsg += " Please enter valid Password";
}
if (errmsg != "")
toastr.error(errmsg + ' to start the workflow.');
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.