0

これは、経験豊富な jqueryUI ユーザーにとっては簡単です。私が達成したいことは次のとおりです。

  • ページがレンダリングされたばかりのときにボタンを 1 つ持つ (それ以上は何もない)
  • このボタンをクリックすると、ダイアログが開き、AJAX を使用してダイアログ コンテンツが生成されます。

現時点では、それらのほとんどを取得していますが、2 つの異なる 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を使用してダイアログを作成し、ダイアログを開いて表示します（すべて1回のクリックで）。

4

1 に答える 1

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')ダイアログが要素で既に初期化されているかどうかを確認する 1 つの方法にすぎません。もっと良い方法があるかもしれません。

于 2013-03-28T00:22:35.093 に答える