jquery - jqueryUI：第一次单击时初始化对话框内容

Question

这对于有经验的 jqueryUI 用户来说应该很容易。我想要实现的是：

• 在页面刚刚呈现时有一个按钮（仅此而已）
• 单击此按钮时，将打开一个对话框并使用 AJAX 生成对话框内容

目前我已经拥有了其中的大部分，但使用了两个不同的 jquery UI 按钮。我正在使用 icanhaz，但它应该没有什么区别，因为我让这部分工作正常。这是html部分：

<script id="user" type="text/html">
    <p>
        There are following users:
        <ul>
        {{#users}}
            <input type="checkbox" name="user" value="{{ username }}" />{{ fullname }}
            {{^last}}<br />{{/last}}
        {{/users}}
        </ul>
    </p>
</script>

<a id="user-btn" class="btn">show users</a>

<a id="dialog-btn" class="btn">show dialog</a>

<div id="dialog-message" title="Select users">
</div>

这是javascript部分：

$(document).ready( function() {

    $("#user-btn").click(function() {
        $.ajax({
            type: "GET",
            dataType: "json",
            url: "../php/client/json.php",
            data: {
                type: "users"
            }
        }).done(function( response ) {
            var element = $('#dialog-message');
            element.append(ich.user(response));
        });
    });

    $("#dialog-btn").click(function() {
        $("#dialog-message").dialog().dialog("open");
    });
});

当我单击第一个按钮“显示用户”时，它会生成对话框的内容。当我单击“显示对话框”时，将创建并打开对话框。我只是想清理它-单击时调用ajax（并渲染icanhaz），使用渲染的html创建对话框，打开对话框并显示（只需单击一次）。

Answer 1

$(document).ready( function() {

    $("#user-btn").click(function() {
        if ($('#dialog-message').is('.ui-dialog-content')) {
            // data already loaded and dialog already initialized
            $('#dialog-message').dialog('open');
        } else {
            // request data and initialize dialog
            $.ajax({
                type: "GET",
                dataType: "json",
                url: "../php/client/json.php",
                data: {
                    type: "users"
                }
            }).done(function( response ) {
                $('#dialog-message')
                    .append(ich.user(response)) // load data into element
                    .dialog(); // show as dialog (autoOpen is true by default)
            });
        }
    });
});

$('#dialog-message').is('.ui-dialog-content')只是检查对话框是否已经在元素上初始化的一种方法；可能有更好的方法。