JQuery UI: как открыть диалог

Question

Я проверил пример jQuery UI, который открывает диалоговое окно, странно, что сообщение должно быть написано в HTML и прочитано с помощью селектора jQuery:

http://jqueryui.com/demos/dialog/

 <script>
 $(function() {
  $( "#dialog" ).dialog();
 });
 </script>



<div class="demo">

<div id="dialog" title="Basic dialog">
 <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

То, что я хочу сделать, довольно просто, я хочу, чтобы в диалоговом окне отображалась строка, определенная как переменная js, например:

var cmd_str = "abcdefg";
$(cmd_str).dialog();

Но, похоже, это плохо работает.

Answer 1

Это не может быть просто любая строка, это должен быть HTML.

var cmd_str = "<div>abcdefg</div>";
$(cmd_str).dialog();

или более чистая версия:

var cmd_str = "abcdefg";
$(cmd_str).wrap("<div></div>").dialog();

Дальнейшее объяснение:

$("abcdefg") будет соответствовать элементу <abcdefg />, поскольку $("a") будет соответствовать элементу <a />.

Чтобы уничтожить:

Проще всего было бы сохранить объект jquery, используемый для диалога, в переменную, подобную этой.

var cmd_str = "abcdefg";
var $message = $(cmd_str).wrap("<div></div>").dialog();

function destroyMessage(){
    $message.dialog("destroy");
}

Answer 2

У вас должен быть div или какой-то другой элемент, сделайте его скрытым, тогда диалог сделает его видимым в соответствии с функциями диалогов .show и .hide. Используйте функции .text или .val (в зависимости от элемента сообщения) для установки вашего сообщения.

<div id="dialogMsg" style="hidden"></div>
$("#dialogMsg").text("Your message").dialog().show();
// ... or it can be closed if settings are set when doing .dialog(...)
$("#dialogMsg").hide();

Answer 3

когда вы вызываете $(cmd_str) jQuery ищет тег с именем abcdefg ... вы должны поместить всю разметку в $(), затем внедрить ее в DOM и затем вызвать .dialog().Вот так, наверное.

$("<div id=\"dialog\" title=\"Basic dialog\">"+
    "<p>This is the default dialog which is useful for displaying information."+
    "The dialog window can be moved, resized and closed with the 'x' icon.</p>"+
    "</div>").appendTo("body").dialog();