javascript - JQuery UI - Form doesn't open if autoOpen: false -
i using jquery ui , have dialog box want appear when button clicked. when autoopen set true, display page loads , open , close. if set false not open @ all.
the jquery ui code @ bottom of code block
$(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 notes 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 user have on dom 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 crud toolbar .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); }); }); my 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>
you can this:
$( "#opener" ).click(function() { $( "#popup-dialog-crud" ).dialog( "open" ); });
Comments
Post a Comment