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" ); }); 

fiddle demo


Comments

Popular posts from this blog

.htaccess - First slash is removed after domain when entering a webpage in the browser -

Automatically create pages in phpfox -

c# - Farseer ContactListener is not working -