将错误消息与图标动态绑定到单个 jQuery 对话框

Posted 2023-05-08

【中文标题】将错误消息与图标动态绑定到单个 jQuery 对话框

【英文标题】：Dynamically bind error message along with a icon to a single jQuery dialog

【发布时间】：2019-05-04 21:18:01

【问题描述】：

我创建了一个全局 jQuery 对话框来显示应用程序中的所有错误消息。我能够将错误消息绑定到对话框，但是我无法同时显示该图标。为简单起见，我提供了一个带有通用 Google 图片的示例。

任何线索将不胜感激，或者如果有更好的方法，请提及。提前致谢

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"/>

【参考方案1】：

您必须选择要更新的特定表格单元格。考虑使用类选择器。

示例

$(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>

希望对您有所帮助。

【讨论】：

太棒了！！这有帮助

【参考方案2】：

那是因为您将#ErrorMessageDialog 的内容替换为仅消息。关联消息时，您应该针对所需的td 元素而不是整个#ErrorMessageDialog。示例代码如下：

function showAlertDialog(message) 
            var $dialog = $('#ErrorMessageDialog .target')
                   .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/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 class="target"></td>/*display error message*/
            </tr>
        </table>
    </div>

<input type="button" id="btnOk" value="OK"/>
<input type="button" id="btnCancel" value="Cancel"/>

在这里，我的目标是 .target 类，我已将其赋予要关联消息的目标 td 元素。

【讨论】：

我仍然没有看到图标。

【参考方案3】：

function showAlertDialog(message) 
var img='<img src="https://www.google.co.in/logos/doodles/2014/world-cup-2014-1-6584893165273088-res.png"/>';
            var $dialog = $('#ErrorMessageDialog')
                   .html(message+img)
                   .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');
        );

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<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>
                <td></td>
            </tr>
        </table>
    </div>

<input type="button" id="btnOk" value="OK"/>
<input type="button" id="btnCancel" value="Cancel"/>

将图像与对话消息一起附加。

【讨论】：

如果您附加图像，您将丢失“ErrorMessageDialog” id 元素下可能具有的任何格式，在示例中，OP 有一个将丢失的表。

对话框插件(jqueryUI) 将删除子元素

我可以看到图标，但是我丢失了表格格式