Javascript 在jQueryUI对话框中显示和格式化数组元素_Javascript_Jquery_Jquery Ui_Jquery Ui Dialog

Javascript 在jQueryUI对话框中显示和格式化数组元素

javascript jquery jquery-ui

Javascript 在jQueryUI对话框中显示和格式化数组元素,javascript,jquery,jquery-ui,jquery-ui-dialog,Javascript,Jquery,Jquery Ui,Jquery Ui Dialog,在我的应用程序中，有一个通过选中复选框来选择文档的选项。然后，如果用户单击submit按钮，他将得到一个确认框，其中显示他选择删除的所有文档。我将所有选定的文档存储在一个数组中。现在，我想以一种格式良好的方式表示文档列表。像 Warning: Below mentioned documents will be deleted, review them and click OK to proceed. 1. Document 1 2. Document 2 3. Document 3 n

在我的应用程序中，有一个通过选中复选框来选择文档的选项。然后，如果用户单击submit按钮，他将得到一个确认框，其中显示他选择删除的所有文档。我将所有选定的文档存储在一个数组中。现在，我想以一种格式良好的方式表示文档列表。像

Warning: Below mentioned documents will be deleted, review them and click OK to proceed.

 1. Document 1
 2. Document 2
 3. Document 3
 n. Document n

所以我的确认框应该如上所示。因为这不能用默认的确认框来完成，所以我使用了jQueryUI对话框，但也无法格式化它。有人能帮我整理一下表格吗？是否有其他选项可用于在确认框中显示列表

看

我知道这是一个古老的话题，但它在手头的问题上很受欢迎，结果很简单，今天发生在我身上

我正在用.text而不是.html将格式化文本字符串添加到对话框div中错误的方式：

$( "#dialog-message-div" ).text(str);

这导致它转义了所有的HTML字符…删除了格式，但更糟糕的是显示了非技术性的用户技术性的东西…HTML

正确的方式：只需将.text更改为.html，它的工作方式就像一个符咒

$( "#dialog-message-div" ).html(str);

摘自下载时附带的jQueryUI example index.html

<html lang="us">
<head>
   <meta charset="utf-8">
   <title>jQuery UI Example Page</title>
   <link href="css/redmond/jquery-ui-1.10.3.custom.css" rel="stylesheet">
   <script src="js/jquery-1.9.1.js"></script>
   <script src="js/jquery-ui-1.10.3.custom.js"></script>
   <script>
   $(function() {      
      $( "#dialog" ).dialog({
         autoOpen: false,
         width: 400,
         resizable: false,
         buttons: [
            {
               text: "Ok",
               click: function() {
                  $( this ).dialog( "close" );
               }
            },
            {
               text: "Cancel",
               click: function() {
                  $( this ).dialog( "close" );
               }
            }
         ]
      });
      // Link to open the dialog
      $( "#dialog-link" ).click(function( event ) {
         $( "#dialog" ).dialog( "open" );
         var str = "<p>Lorem ipsum dolor sit amet, <b>consectetur adipisicing elit</b>, sed do eiusmod <i>tempor</i><br /><br /><br />incididunt ut labore et dolore magna aliqua. <br />Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>";
         event.preventDefault();
         //wrong way
         //$( "#dialog" ).text(str);

         $( "#dialog" ).html(str);
      });
   });
      </script>
</head>
<body>
<button id="dialog-link">Dialog Button</button>
<div id="dialog" title="Dialog Title">
</div>

</body>
</html>

$( "#dialog-message-div" ).html(str);

<html lang="us">
<head>
   <meta charset="utf-8">
   <title>jQuery UI Example Page</title>
   <link href="css/redmond/jquery-ui-1.10.3.custom.css" rel="stylesheet">
   <script src="js/jquery-1.9.1.js"></script>
   <script src="js/jquery-ui-1.10.3.custom.js"></script>
   <script>
   $(function() {      
      $( "#dialog" ).dialog({
         autoOpen: false,
         width: 400,
         resizable: false,
         buttons: [
            {
               text: "Ok",
               click: function() {
                  $( this ).dialog( "close" );
               }
            },
            {
               text: "Cancel",
               click: function() {
                  $( this ).dialog( "close" );
               }
            }
         ]
      });
      // Link to open the dialog
      $( "#dialog-link" ).click(function( event ) {
         $( "#dialog" ).dialog( "open" );
         var str = "<p>Lorem ipsum dolor sit amet, <b>consectetur adipisicing elit</b>, sed do eiusmod <i>tempor</i><br /><br /><br />incididunt ut labore et dolore magna aliqua. <br />Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>";
         event.preventDefault();
         //wrong way
         //$( "#dialog" ).text(str);

         $( "#dialog" ).html(str);
      });
   });
      </script>
</head>
<body>
<button id="dialog-link">Dialog Button</button>
<div id="dialog" title="Dialog Title">
</div>

</body>
</html>