jqGrid Test Page

jqGrid Test Page - testing 2 jqGrid tables inside jQuery UI dialog

HTML

<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.core.css">
<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.dialog.css">
<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.theme.css">
<link rel="stylesheet" href="http://www.trirand.com/blog/jqgrid/themes/ui.multiselect.css">
<link rel="stylesheet" href="http://www.trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<script src="http://www.trirand.com/blog/jqgrid/js/ui.multiselect.js"></script>
<script src="http://www.trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="http://www.trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
    <div>
        <h1><b>jqGrid Test Page #2</b></h1>
    </div>
    
    <!-- check for enabled javascript -->
    <script></script>
    <noscript>
      <h3 style="text-align:center;">JavaScript is required in order to use this page.</h3>
    </noscript>
    
    <p>Click the button to start the test:
     <button id="test_button" class="ui-button" title="Test Button 1">
      <span class="strudl-ui-icon24 strudl-ui-icon-info"></span>
      <span>TEST</span>
        </button><br/>
     ... will open a jQuery UI dialog containing 2 jqGrid tables.
    </p>

    <div id="test_dialog" class="extendeddialog" style="display:none;">
      <div>
        <table style="width:100%; margin-bottom:5px;">
          <colgroup><col width="200px" /><col /></colgroup>
          <tr>
            <td>My Combo Box:</td>
            <td><div class="input-container"><select id="test_combo" class="fill"><option>Option 1</option><option>Option 2</option></select></div></td>
          </tr>
        </table>
      </div>

      <div id="test1_gridcontainer">
        <table id="test1_table"></table>
        <div id="test1_pager"></div>
      </div>

      <div>
        <table id="curInfo_table" class="ui-widget ui-widget-content ui-corner-all" style="width:100%; margin-bottom:10px; margin-top:10px;">
          <colgroup><col...

JavaScript

jQuery.jgrid.no_legacy_api = true;


// -------------- GLOBAL VARIABLES ---------------------
var g_debugging = false; //set to true to see log messages

// ### most used utility functions ###
function isDefined(variable) {
  return (variable === null || typeof variable === "undefined") ? false: true;
}

JSON.clone = function (obj) {
  return JSON.parse( JSON.stringify( obj ) );
};

// MAIN LOG FUNCTION (g_debugging must be true for logging!)
function log(msg) {
  if(!g_debugging) {
    return;
  }
  if (isDefined(window.console) && (typeof console.log === 'function')) {
    try {
      console.log.apply(this, arguments);
    }
    catch (err1) {
      console.log(msg);
    }
  }
  else if ($.browser.msie) { // if IE8's developer console is open just try to log there
    try {
      console.log(msg);
    }
    catch (err2) {
      g_debugging = false; // use a better browser
    }
  }
}

/**
 * call a function after a delay
 * @param delay delay for the function call
 * @param fn the function object to call
 * @param fn_this what should the this inside the function point to? (optional)
 * @param args argument array for the call (optional)
 */
function postpone(delay, fn, fn_this, args) {
  log(['postpone START', fn, fn_this]);
  var to = window.setTimeout(function() {
    window.clearTimeout(to);
    var a = args || [];
    var t = fn_this || this;
    try {
      fn.apply(t, a);
    }
    catch (e) {
      log(['exception: ', e.name||'', e.message||'', e]);
    }
    delay = null;
    fn = null;
    fn_this = null;
    args = null;
    log('postpone DONE');
  }, delay);
  return to;
}


// ------------- GLOBAL INITIALIZATION ----------------
$(document).ready(function() {
  if (g_debugging) {
    log("*** DEBUGGING is ENABLED ***");
  }
  initDevelPage();
  log("Document ready! Devel page fully initialized.");
  log("Click the button to start the test");
});


// DEVEL PAGE LOGIC

function initDevelPage() {
  $('#test_button').button({icons: {primary:...