将错误消息和图标动态绑定到单个jQuery对话框 [英] Dynamically bind error message along with a icon to a single jQuery dialog
本文介绍了将错误消息和图标动态绑定到单个jQuery对话框的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我创建了一个全局jQuery对话框来显示应用程序中的所有错误消息.我可以将错误消息绑定到对话框,但是无法同时显示图标.为简单起见,我提供了一个带有通用Google图片的示例.
I have created a global jQuery dialog to display all error messages in the application. I am able to bind the error message to the dialog, however I am unable to show the icon along with. For sake of simplicity I have provided a sample with a generic google image.
任何潜在客户将不胜感激,或者有更好的方法请提及.预先感谢
Any leads will be appreciated or if there's a better way to do it please do mention. Thanks in advance
function showAlertDialog(message) {
var $dialog = $('#ErrorMessageDialog')
.html(message)
.dialog({
modal: true,
title: 'Data Error!',
width: 400,
buttons: {
Ok: function () {
$(this).dialog('close');
}
}
});
$dialog.dialog('open');
}
$("#btnOk").click(function(){
showAlertDialog('Ok is clicked');
});
$("#btnCancel").click(function(){
showAlertDialog('Cancel is clicked');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<div id="ErrorMessageDialog" style="display:none;">
<table>
<tr>
<td><img src="https://www.google.co.in/logos/doodles/2014/world-cup-2014-1-6584893165273088-res.png"/></td>/*display icon*/
<td></td>/*display error message*/
</tr>
</table>
</div>
<input type="button" id="btnOk" value="OK"/>
<input type="button" id="btnCancel" value="Cancel"/>
推荐答案
您必须选择要更新的特定表单元格.考虑使用类选择器.
You must select the specific table cell you want to update. Consider using Class selector.
示例
$(function() {
function showAlertDialog(ttl, msg) {
var $dialog = $('#ErrorMessageDialog')
.dialog({
modal: true,
title: ttl,
width: 400,
buttons: {
Ok: function() {
$(this).dialog('close').dialog("destroy");
}
}
});
$('.message', $dialog).html(msg);
$dialog.dialog('open');
}
$("#btnOk").click(function() {
showAlertDialog('Alert!', 'Ok is clicked');
});
$("#btnCancel").click(function() {
showAlertDialog('Alert!', 'Cancel is clicked');
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<input type="button" id="btnOk" value="OK" />
<input type="button" id="btnCancel" value="Cancel" />
<div id="ErrorMessageDialog" style="display:none;">
<table>
<tr>
<td class="icon"><img src="https://www.google.co.in/logos/doodles/2014/world-cup-2014-1-6584893165273088-res.png" /></td>
<td class="message"></td>
</tr>
</table>
</div>
希望有帮助.
这篇关于将错误消息和图标动态绑定到单个jQuery对话框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文