Jquery对话框中显示的Javascript函数

Question

我想要一个具有javascript函数的Jquery对话框，其中显示了成分列表（这些成分来自数据库，这就是为什么我在js函数中使用它的原因）。 我将其作为按钮：

<div id="dialog">
    //WANT showKeyIngredients() to show up in here, the dialog box
</div>
<div id="confirm-dialog">
    <a href='#' class="buttonstyle2" onclick="showKeyIngredients();">
        Browse
    </a>
</div>

这是我的jQuery：

$(function () 
{
    $("#dialog").dialog({
        autoOpen: false,
        bgiframe: true,
        autoOpen: false,
        resizable: false,
        minHeight: 250,
        width: 700,
        height: 250,
        modal: true
    });

    $("#confirm-dialog").click(function () 
    {
        $("#dialog").dialog("open");

    });
});

我很抱歉，这可能很混乱，因为我是jQuery的新手，并且完全只是复制和粘贴东西。 我什至不确定这是否可行。 我到处都在研究，却没有发现任何东西。 我只需要显示在对话框中的showKeyIngredient（）函数即可。 html中的onclick根本不会出现在对话框中。

http://jqueryui.com/dialog/

我喜欢这里的对话框，但希望我的showKeyIngredients（）函数显示在其中。 并有一个按钮弹出此对话框。

Answer 1

答案很粗略，已经准备好了，但是您正在寻找这种东西吗？ ：

$("#dialog").dialog();
$("#dialog").html('<div> Some element with showKeyIngredients returned stuff </di>')

更多充实的内容： http : //jsfiddle.net/npj3xbk8/

您可以将.html（）文本替换为从showKeyIngredients返回的内容。 （为了简单起见，我也删除了所有对话框设置，尽管可以将它们重新添加）

Answer 2

您想要在对话框的主体中显示的任何内容，只需将其放入段落（ <p></p> ）标记中即可。

尝试这个：

<div id="confirm-dialog">
  <p>
    <a href='#' class="buttonstyle2" onclick="showKeyIngredients();">
        Browse
    </a>
  </p>
</div>

要么

<div id="dialog">
  <p>
    <a href='#' class="buttonstyle2" onclick="showKeyIngredients();">
        Browse
    </a>
  </p>
</div>

我还在许多地方的网站上使用了此对话框。 而且您无需执行任何其他操作。

工作小提琴 。