どのようにjQueryダイアログのテキストフィールドに動的HTMLを追加しますか？

Question

私は、これ（私は一見シンプルであると思われるもの）に対する答えを探しています。 jqueryダイアログを動的に作成したいのですが、ダイアログのテキスト/本文にhrefが含まれていて、ダイアログで動的に作成する必要があります。次のようなものがあります。

var newDiv = $(document.createElement('div')); 
    var j = 1; 

    newDiv.dialog({ 
    resizable: false, 
    height:240, 
    modal: true, 
    text: '<a href="html://test.com">test link' + j + ' within a dialog body</a>', 
    title: "MyDialog", 
    buttons: { 
     "Add Related": function() { 
      $(this).dialog("close"); 
      window.location = "addRelated.php?id="+id;     
     }, 
     Cancel: function() { 
      $(this).dialog("close"); 
     } 
    } 
}); 

テキストパラメータはテキストのみを使用しているようです。誰かが私を助けることができますか？ありがとう。

Answer 1

のdivを作成する方法と、それにテキストを追加するには、次のとおりです。

var j = 1; 
var newDiv = $('<div/>').append('<a href="html://test.com">test link' + j + ' within a dialog body</a>'); 

のjQuery UIのダイアログが（参照：option-buttons）をのみ、ボタンのラベルを定義するためのテキストプロパティがあります。

は、だから私の抜粋です：

$(function() { 
 
    var j = 1; 
 
    var newDiv = $('<div/>').append('<a href="html://test.com">test link' + j + ' within a dialog body</a>'); 
 

 
    newDiv.dialog({ 
 
    resizable: false, 
 
    height:240, 
 
    modal: true, 
 
    title: "MyDialog", 
 
    buttons: { 
 
     "Add Related": function() { 
 
     $(this).dialog("close"); 
 
     window.location = "addRelated.php?id="+id; 
 
     }, 
 
     Cancel: function() { 
 
     $(this).dialog("close"); 
 
     } 
 
    } 
 
    }); 
 
});

<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

これを達成するための別の方法がopen eventに基づいています。

$(function() { 
 
    var newDiv = $('<div/>'); 
 
    var j = 1; 
 

 
    newDiv.dialog({ 
 
    resizable: false, 
 
    height:240, 
 
    modal: true, 
 
    title: "MyDialog", 
 
    buttons: { 
 
     "Add Related": function() { 
 
     $(this).dialog("close"); 
 
     window.location = "addRelated.php?id="+id; 
 
     }, 
 
     Cancel: function() { 
 
     $(this).dialog("close"); 
 
     } 
 
    }, 
 
    open: function(event, ui) { 
 
     $(this).append('<a href="html://test.com">test link' + j + ' within a dialog body</a>'); 
 
    } 
 
    }); 
 
});

<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

Answer 2

あなたはjQuery.uiでのjQueryを使用していると仮定すると、あなたはdivの中で、すべてのHTMLを作成することができます。

var newDiv = $('<div><a href="html://test.com">test link' + j + ' within a dialog body</a></div>'); 
newDiv.dialog(...); 

をこのように、文書化されていないテキストプロパティを使用する必要性を否定します。