JQuery UI - 如果 autoOpen: false 则表单不会打开

Question

我正在使用 JQuery UI，并且我希望在单击按钮时显示一个对话框。当 autoOpen 设置为 true 时，它​​会在页面加载后立即显示，并且会打开和关闭。如果设置为 false 则根本不会打开。

JQuery UI 代码在这个代码块的底部

 $(document).ready(function () {

        retrieveNotes().done(function (data) {
            $.each(data.d, function (i, item) {
                DataArray[i] = [];
                DataArray[i][0] = item.NotesID.trim();
                DataArray[i][1] = item.NotesTitle.trim();
                DataArray[i][2] = item.NotesText.trim();
                DataArray[i][3] = item.ProfileName.trim();
                DataArray[i][4] = item.IsShared;
                DataArray[i][5] = item.NameOfUser.trim();
            });

            // GRID LOGIC HERE
            var tbl = $("#notes_table");
            var obj = $.paramquery.tableToArray(tbl);

            var newObj = {
                width: 720, height: 300, sortIndx: 0,
                editable: false,
                flexHeight: false,
                title: "Here are your notes for this profile</b>",
                freezeCols: 1, resizable: false, selectionModel: { type: 'row' }, editModel: { clicksToEdit: 2 },
                selectionModel: { mode: 'single' }
            };


            // MUST DECLARE CORRECT NUMBER OF COL PROPERTIES OTHERWISE NULL REFERENCE
            obj.colModel = [
                { title: "Note ID", width: 50, dataType: "string" },
                { title: "Note Title", width: 255, dataType: "string" },
                { title: "Note Text", width: 255, dataType: "string" },
                { title: "Name of Profile", width: 200, dataType: "string" },
                { title: "Is Shared Profile", width: 10, dataType: "boolean" },
                { title: "Note created by:", width: 255, dataType: "string" },
            ];

            newObj.dataModel = { data: DataArray, paging: "local", rPP: 15, rPPOptions: [10, 15, 20, 50, 100] };
            newObj.colModel = obj.colModel;

            //Hide GUID column from user but have it on DOM for edit/delete commands

            newObj.colModel[0].hidden = true;
            newObj.colModel[1].width = 255;
            newObj.colModel[2].hidden = true;
            newObj.colModel[3].width = 200;
            newObj.colModel[4].width = 10;
            newObj.colModel[5].width = 255;

            //append or prepend the CRUD toolbar to .pq-grid-top or .pq-grid-bottom
            $("#divGrid").on("pqgridrender", function (evt, obj) {
                var $toolbar = $("<div class='pq-grid-toolbar pq-grid-toolbar-crud'></div>").appendTo($(".pq-grid-top", this));

                $("<span>Add</span>").appendTo($toolbar).button({ icons: { primary: "ui-icon-circle-plus" } }).click(function (evt) {
                    addRow();
                });
                $("<span>Edit</span>").appendTo($toolbar).button({ icons: { primary: "ui-icon-pencil" } }).click(function (evt) {
                    editRow();
                });
                $("<span>Delete</span>").appendTo($toolbar).button({ icons: { primary: "ui-icon-circle-minus" } }).click(function () {
                    deleteRow();
                });
                $toolbar.disableSelection();
            });

            $grid = $("#divGrid").pqGrid(newObj);


            //create popup dialog.
            $("#popup-dialog-crud").dialog({
                width: 400, modal: true,
                open: function () { $(".ui-dialog").position({ of: "#divGrid" }); },
                autoOpen: false
            });

            //buildGrid(DataArray);
        });
    });

我的 HTML

  <div id="popup-dialog-crud" style="width: auto; min-height: 47px; height: auto;" class="ui-dialog-content ui-widget-content" scrolltop="0" scrollleft="0">
                <form id="crud-form">
                    <table align="center">
                        <tbody>
                            <tr>
                                <td class="label">Company Name:</td>
                                <td>
                                    <input type="text" name="company"></td>
                            </tr>
                            <tr>
                                <td class="label">Symbol:</td>
                                <td>
                                    <input type="text" name="symbol"></td>
                            </tr>
                            <tr>
                                <td class="label">Price:</td>
                                <td>
                                    <input type="text" name="price"></td>
                            </tr>
                            <tr>
                                <td class="label">Change:</td>
                                <td>
                                    <input type="text" name="change"></td>
                            </tr>
                            <tr>
                                <td class="label">%Change:</td>
                                <td>
                                    <input type="text" name="pchange"></td>
                            </tr>
                            <tr>
                                <td class="label">Volume:</td>
                                <td>
                                    <input type="text" name="volume"></td>
                            </tr>
                        </tbody>
                    </table>
                </form>
            </div>

Answer 1

你可以这样做：

$( "#opener" ).click(function() {
  $( "#popup-dialog-crud" ).dialog( "open" );
});

FIDDLE DEMO