Динамически связывать сообщение об ошибке вместе со значком в одном диалоговом окне jQuery

Question

Я создал глобальное диалоговое окно 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"/>

Answer 1

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

добавить изображение вместе с диалоговым сообщением.

Answer 2

Вы должны выбрать конкретную ячейку таблицы, которую хотите обновить.Рассмотрите возможность выбора класса.

Пример

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

Надеюсь, это поможет.

Answer 3

Это потому, что вы заменяете содержимое #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, с которым вы хотите связатьсообщение.