API tools faq
paste
Advertisement
Guest User

jqGrid page with loadComplete etc being called without error

a guest
May 26th, 2011
226
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 52.95 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->
  3. <!--[if IE 7 ]> <html class="no-js ie7" lang="en"> <![endif]-->
  4. <!--[if IE 8 ]> <html class="no-js ie8" lang="en"> <![endif]-->
  5. <!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
  6. <head>
  7. <script type="text/javascript">
  8. var ie6 = false;
  9. </script>
  10. <!--[if lt IE 7]>
  11. <script type="text/javascript">
  12. ie6 = true;
  13. </script>
  14. <![endif]-->
  15. <meta charset="utf-8">
  16. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  17.  
  18. <meta name="description" content="">
  19. <meta name="author" content="">
  20.  
  21. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  22. <link rel="shortcut icon" href="/favicon.ico">
  23. <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  24.  
  25. <!--<link rel="stylesheet" href="css/style.css?v=2">-->
  26. <script src="js/libs/modernizr-1.7.min.js"></script>
  27.  
  28. <title>COMS 2.0 Prototype</title>
  29. <!-- Stylesheet References -->
  30. <link href="/favicon.ico" rel="shortcut icon">
  31. <link href="css/coms-base.css" rel="stylesheet">
  32. <link rel="stylesheet" type="text/css" href="css/superfish.css" media="screen">
  33. <link type="text/css" href="css/custom-theme/jquery-ui-1.8.12.custom.css" rel="stylesheet" />
  34. <link type="text/css" href="css/grid-blue-orange/jquery-ui-1.8.12.custom.css" rel="stylesheet" />
  35. <link rel="stylesheet" href="css/BreadCrumb.css" type="text/css">
  36. <link type="text/css" rel="stylesheet" href="css/ui.jqgrid.css" />
  37. <link type="text/css" rel="stylesheet" href="css/custom-tabs.css" />
  38. <link type="text/css" rel="stylesheet" href="js/plugins/ui.multiselect.css" />
  39. <!-- fusion charts -->
  40. <script type="text/javascript" src="FusionCharts/FusionCharts.js"></script>
  41. <script type="text/javascript" src="FusionCharts/FusionChartsExportComponent.js"></script>
  42. <!-- jquery framework & plugins -->
  43. <script src="js/jquery-1.6.1.min.js"></script>
  44. <script src="js/jquery.tools.min.js"></script>
  45. <script type="text/javascript" src="js/superfish.js"></script>
  46. <script type="text/javascript" src="js/jquery.hoverIntent.minified.js"></script>
  47. <!--
  48. <script type="text/javascript" src="js/combobox.js"></script>
  49. -->
  50. <script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
  51. <script src="js/jquery.jBreadCrumb.1.1.js" type="text/javascript"></script>
  52. <script type="text/javascript" src="js/jquery-ui-1.8.12.custom.min.js"></script>
  53. <!-- JQGrid References & Plugins -->
  54. <script src="js/i18n/grid.locale-en.js"></script>
  55. <script src="js/plugins/ui.multiselect.js"></script>
  56. <script src="js/jquery.jqGrid.src.js"></script>
  57. <script src="js/plugins/grid.addons.js"></script>
  58. <script src="js/plugins/grid.postext.js"></script>
  59. <script src="js/plugins/grid.setcolumns.js"></script>
  60. <script src="js/plugins/jquery.contextmenu.js"></script>
  61. <!--
  62. <script src="js/plugins/jquery.searchFilter.js"></script>
  63. -->
  64. <script src="js/plugins/jquery.tablednd.js"></script>
  65. <!-- csv or json references -->
  66. <script type="text/javascript" src="js/search_data.js"></script>
  67. <script type="text/javascript">
  68. function customize_tooltips()
  69. {
  70. jQuery('#my-communications').find('.tooltip-div').html(
  71. '<h2>Communications</h2><p>See updates, alerts, and notifications.</p><p><a href="#">Learn more...</a></p>');
  72. jQuery('#my-workqueue').find('.tooltip-div').html(
  73. '<h2>Workqueue</h2><p>Here you can work on items that require your attention.</p><p><a href="#">Learn more...</a></p>');
  74. jQuery('#recent-portfolio-trends').find('.tooltip-div').html(
  75. '<h2>Portfolio</h2><p>Keep on top of trends and emerging patterns.</p><p><a href="#">Learn more...</a></p>');
  76. jQuery('#messages-icon').html(
  77. '<span class="has-tooltip"><a href="#"><img alt="Messages" src="images/icon-message.png" /></a> <span class="unread">1</span> </span><div class="icon-tooltip"><h2>Messages</h2><p>Read your messages.</p><p><a href="#">Learn more...</a></p></div>');
  78. jQuery('#notifications-icon').html(
  79. '<span class="has-tooltip"><a href="#"><img alt="Notifications" src="images/icon-notification.png" /></a> <span class="unread">3</span> </span><div class="icon-tooltip"><h2>Notification</h2><p>Notifications for your account.</p><p><a href="#">Learn more...</a></p></div>');
  80. jQuery('#shopping-cart-icon').html(
  81. '<span class="has-tooltip"><a href="#"><img src="images/icon-cart.png" /></a></span> <div class="icon-tooltip"><h2>Payments</h2><p>Make payments.</p><p><a href="#">Learn more...</a></p></div>');
  82. jQuery('#help-icon').html(
  83. '<span class="has-tooltip"><a href="#"><img src="images/icon-help.png" /></a></span> <div class="icon-tooltip"><h2>Help</h2><p>Get help using COMS.</p><p><a href="#">Learn more...</a></p></div>');
  84. }
  85. function trap_arrows(id)
  86. {
  87. jQuery('input[type="text"]').keydown(function(event)
  88. {
  89. var ids = jQuery('#table').jqGrid('getDataIDs');
  90. var index = -1;
  91. for(var i = 0; i < ids.length; ++i)
  92. {
  93. if (ids[i] == id)
  94. {
  95. index = i;
  96. }
  97. }
  98. if (event.keyCode == 38)
  99. {
  100. if (index > 0)
  101. {
  102. jQuery('input type=["text"]').unbind('keydown');
  103. jQuery('#table').jqGrid('setSelection', '' + ids[index - 1]);
  104. trap_arrows(ids[index]);
  105. }
  106. jQuery('input:text[name="Reference ID"]').focus();
  107. event.keyCode = 0;
  108. }
  109. else if (event.keyCode == 40)
  110. {
  111. if (index < ids.length - 1)
  112. {
  113. jQuery('input type=["text"]').unbind('keydown');
  114. jQuery('#table').jqGrid('setSelection', '' + ids[index + 1]);
  115. trap_arrows(ids[index]);
  116. }
  117. jQuery('input:text[name="Reference ID"]').focus();
  118. event.keyCode = 0;
  119. }
  120. });
  121. return false;
  122. }
  123.  
  124.  
  125. $(function() {
  126.  
  127. $(".help-bubble-settings .on").click(function()
  128. {
  129. $(".help-bubble-settings .on").hide();
  130. $(".help-bubble-settings .off").show();
  131. $("span.has-tooltip-container").replaceWith("<span class='has-tooltip-container'><span class='ui-icon ui-icon-lightbulb has-tooltip'></span></span>");
  132. $("div.icon-tooltip-container").replaceWith("<div class='icon-tooltip-container'></div>");
  133. $("#messages-icon").html("<a href='#'><img alt='Messages' src='images/icon-message.png'></a> <span class='unread'>1</span><div class='icon-tooltip'></div>");
  134. $("#notifications-icon").html("<a href='#'><img alt='Notifications' src='/images/icon-notification.png'></a> <span class='unread'>3</span><div class='icon-tooltip'></div>");
  135. $("#shopping-cart-icon").html("<a href='#'><img alt='Payments' src='/images/icon-cart.png'></a><div class='icon-tooltip'></div>");
  136. $("#help-icon").html("<a href='#'><img alt='Help' src='/images/icon-help.png'><div class='icon-tooltip'></div>");
  137. customize_tooltips();
  138. });
  139. $(".help-bubble-settings .off").click(function()
  140. {
  141. $(".help-bubble-settings .on").show();
  142. $(".help-bubble-settings .off").hide();
  143. $("span.has-tooltip-container").replaceWith("<span class='has-tooltip-container'><span class='ui-icon ui-icon-lightbulb has-tooltip'></span><div class='tooltip-div'></div></span>");
  144. customize_tooltips();
  145. jQuery('.has-tooltip').tooltip({position: "top center", offset: [5, 40], effect: 'slide'});
  146. });
  147. $(".acct-settings .on").click(function()
  148. {
  149. $(".acct-settings .on").hide();
  150. $(".acct-settings .off").show();
  151. });
  152. $(".acct-settings .off").click(function()
  153. {
  154. $(".acct-settings .on").show();
  155. $(".acct-settings .off").hide();
  156. });
  157.  
  158. $( ".column" ).sortable({
  159. connectWith: ".column"
  160. });
  161. $( ".portlet" ).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
  162. .find( ".portlet-header" )
  163. .addClass( "ui-widget-header ui-corner-all" )
  164. .prepend( "<span class='ui-icon ui-icon-gear'></span>")
  165. .prepend("<span class='has-tooltip-container'><span class='ui-icon ui-icon-lightbulb has-tooltip'></span><div class='tooltip-div'><h1>Did You Know?</h1><p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...<br/><a href='#'>learn more</a></p></div></span>")
  166. .prepend( "<span class='ui-icon ui-icon-minusthick'></span>")
  167. .end()
  168. .find( ".portlet-content" );
  169. customize_tooltips();
  170. $( ".portlet-header .ui-icon-minusthick" ).click(function() {
  171. $( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );
  172. $( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle('fast', 'easeInOutQuint', '' );
  173. });
  174. $( ".column" ).disableSelection();
  175. $( ".column" ).sortable({ handle: '.portlet-header' });
  176. });
  177. $(function() {
  178. //form button
  179. $( "button" ).button();
  180. //autocomplete code
  181. var dstID = [
  182. // Deleted
  183. ];
  184. $( "#autoDistID" ).autocomplete({source: dstID});
  185. $( "#autoDistID2" ).autocomplete({source: dstID});
  186. var dlrID = [
  187. // Deleted
  188. ];
  189. $( "#autoDlrID" ).autocomplete({source: dlrID});
  190. $( "#autoDlrID2" ).autocomplete({source: dlrID});
  191. //Autocomplete End
  192. });
  193. // initialise plugins superfish, breadcrumbing, accordion, combobox
  194. jQuery(document).ready(function(){
  195. jQuery("a[rel],div[rel]").overlay({mask: {color: '#202566', loadSpeed: 200,opacity: 0.5}});
  196. jQuery('ul.sf-menu').superfish({animation:{opacity:'show',height:'show'}});
  197. jQuery('#extCrumb').jBreadCrumb();
  198. jQuery("#accordion").accordion( {fillSpace: true, autoHeight: false});
  199. jQuery('#work-center').tabs();
  200. jQuery('#btn-search').button();
  201. jQuery('#btn-search').click(function()
  202. {
  203. document.search.submit();
  204. });
  205. jQuery('.has-tooltip').tooltip({position: "top center", offset: [5, 40], effect: 'slide'});
  206. jQuery('.portlet-config').css('display', 'none');
  207. jQuery ("#edit-form").css ('display', 'none');
  208. jQuery ("button").button();
  209. jQuery('.ui-icon-gear').click(function(eventObject)
  210. {
  211. var real_target = eventObject.currentTarget;
  212. if (jQuery(real_target).parents('.portlet').find('.portlet-content').is(':visible'))
  213. {
  214. jQuery(real_target).parents('.portlet').find('.portlet-content').hide('fast');
  215. jQuery(real_target).parents('.portlet').find('.portlet-config').show('fast');
  216. }
  217. else
  218. {
  219. jQuery(real_target).parents('.portlet').find('.portlet-content').show('fast');
  220. jQuery(real_target).parents('.portlet').find('.portlet-config').hide('fast');
  221. }
  222. });
  223.  
  224. //initialize modal dialog
  225. $.fx.speeds._default = 400;
  226. $(function() {
  227. $( "#dialog" ).dialog({
  228. autoOpen: false,
  229. show: "slide",
  230. modal: true,
  231. width: 460,
  232. zIndex: 3999
  233. });
  234.  
  235. /*
  236. $( "#opener" ).click(function() {
  237. $( "#dialog" ).dialog( "open" );
  238. return false;
  239. });
  240. */
  241. });
  242.  
  243.  
  244.  
  245. });
  246. //combobox code
  247. function edit_label()
  248. {
  249. jQuery('.edit-label').hide();
  250. jQuery('#edit-form').slideDown('slow');
  251. var offset = jQuery('tr.ui-state-highlight').offset();
  252. offset.top += 31;
  253. offset.left += 15;
  254. jQuery('#edit-form').offset(offset);
  255. }
  256. </script>
  257. <style type="text/css">
  258. .column { width: 100%; padding-bottom: 20px; }
  259. .portlet { margin: 10px 2px;}
  260. .portlet-header { margin:0; padding: 4px; cursor:move; border: 0; border-bottom: 1px solid #cccccc; border-radius: 0; }
  261. .portlet-header .ui-icon { float: right; cursor: pointer; }
  262. .portlet-content { padding: 0px; font-size: 0.9em; color: #444; }
  263. .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }
  264. .ui-sortable-placeholder * { visibility: hidden; }
  265. .ui-button { margin-left: -1px; }
  266. .ui-button-icon-only .ui-button-text { padding: 0.2em; }
  267. .ui-autocomplete-input { width: 150px; margin: 0; padding: 0.2em 0.2em 0.2em .5em; border: #cccccc 1px solid; max-height: 200px; overflow-y: auto; overflow-x:hidden; }
  268.  
  269. </style>
  270.  
  271. </head>
  272. <body>
  273. <div id="container">
  274. <header>
  275. <hrgroup class="clearfix">
  276. <h1>
  277. <a title="GE Capital">
  278. <img alt="GE Capital" src="images/constant/logo-ge-capital.gif" />
  279. </a>
  280. <!-- GE Logo -->
  281. </h1>
  282. <h2>
  283. <!-- Header Right -->
  284. <img alt="GE Capital" src="images/constant/logo-coms.gif" />
  285. </h2>
  286. </hrgroup>
  287. </header>
  288. <nav id="main-nav">
  289. <ul class="sf-menu">
  290. <li id="home"><a href="home.html"><img alt="HOME" src="images/nav-home.png" /></a></li>
  291. <li id="approvals"> <a href="#"><img alt="APPROVALS" src="images/nav-approvals.png" /></a>
  292. <ul>
  293. <li><a href="approvals_distributors.html">approvals summary</a></li>
  294. <li><a href="#">approvals work queue</a></li>
  295. <li><a href="#">new request</a></li>
  296. </ul>
  297. </li>
  298. <li id="billing"><a href="#"><img alt="BILLING" src="images/nav-billing.png" /></a>
  299. <ul>
  300. <li><a href="#">statements</a></li>
  301. <li><a href="#">current charges</a></li>
  302. <li><a href="#">my cart</a></li>
  303. <li><a href="#">checkout</a></li>
  304. </ul>
  305. </li>
  306. <li id="portfolio"><a href="#"><img alt="PORTFOLIO" src="images/nav-portfolio.png" /></a>
  307. <ul>
  308. <li><a href="#">invoice manager</a></li>
  309. <li><a href="#">inventory locator</a></li>
  310. <li><a href="#">transfer activity</a></li>
  311. <li><a href="#">dealer payment activity</a></li>
  312. </ul>
  313. </li>
  314. <li id="reporting"><a href="#"><img alt="REPORTING" src="images/nav-reporting.png" /></a>
  315. <ul>
  316. <li><a href="#">my performance</a></li>
  317. <li><a href="#">dealer performance</a></li>
  318. <li><a href="#">tactical reports</a></li>
  319. <li><a href="#">charting & dashboards</a></li>
  320. <li><a href="#">industry news & playbooks</a></li>
  321. </ul>
  322. </li>
  323. <li id="admin"><a href="#"><img alt="ADMIN" src="images/nav-admin.png" /></a></li>
  324. </ul>
  325. <ul class="icon-nav">
  326. <li id="messages-icon"><span class="has-tooltip"><a href="#"><img alt="Messages" src="images/icon-message.png" /></a>
  327. <span class="unread">1</span>
  328. </span><div class="icon-tooltip"><h2>Messages</h2><p>Read your messages.</p><p><a href="#">Learn more...</a></p></div>
  329. </li>
  330. <li id="notifications-icon"><span class="has-tooltip"><a href="#"><img alt="Notifications" src="images/icon-notification.png" /></a>
  331. <span class="unread">3</span>
  332. </span><div class="icon-tooltip"><h2>Notification</h2><p>Notifications for your account.</p><p><a href="#">Learn more...</a></p></div>
  333. </li>
  334. <li id="shopping-cart-icon"><span class="has-tooltip"><a href="#"><img alt="payments" src="images/icon-cart.png" /></a></span>
  335. <div class="icon-tooltip"><h2>Payments</h2><p>Make payments.</p><p><a href="#">Learn more...</a></p></div></li>
  336. <li id="help-icon"><span class="has-tooltip"><a href="#"><img alt="help" src="images/icon-help.png" /></a></span>
  337. <div class="icon-tooltip"><h2>Help</h2><p>Get help using COMS.</p><p><a href="#">Learn
  338. more...</a></p></div></li>
  339. </ul>
  340. </nav>
  341. <div id="contents" class="clearfix">
  342. <aside id="personal">
  343. <section id="profile-info" class="clearfix">
  344. <img alt="Profile" src="images/constant/icon-profile.gif">
  345. <p>Welcome back, John</p>
  346. <ul class="clearfix">
  347. <li>
  348. <a href="profile.html">edit profile</a>
  349. </li>
  350. <li>|</li>
  351. <li>
  352. <a href="index.html">logout</a>
  353. </li>
  354. </ul>
  355. </section>
  356. <section id="search-form" class="ui-widget">
  357. <h3 class="ui-widget-header ui-corner-top ui-state-active">
  358. <span class="ui-icon ui-icon-search"></span>
  359. <span id="title">Search &amp; Locate</span>
  360. </h3>
  361. <div class="ui-widget-content ui-corner-bottom">
  362. <form method="get" name="search" id="search" action="approvals_transactions.html" >
  363. <!--
  364. <select name="search_type" id="search_type">
  365. <option value="None">&mdash;Select type of search&mdash;</option>
  366. <option>Distributor</option>
  367. <option>Dealer</option>
  368. <option>Transaction</option>
  369. </select>
  370. -->
  371. <div class="simple_overlay" id="distributor_search">
  372. <p>Distributor:<br />
  373. <input type="text" name="autoDistID2" id="autoDistID2"></p>
  374. <p><button type="submit">Search</button></p>
  375. </div>
  376. <div class="simple_overlay" id="dealer_search">
  377. <p>Dealer:<br />
  378. <input type="text" name="autoDlrID2" id="autoDlrID2"></p>
  379. <p><button type="submit">Search</button></p>
  380. </div>
  381. <div class="simple_overlay" id="transaction_search">
  382. <p>Transaction:<br />
  383. <input type="text" name="transaction"></p>
  384. <p><button type="submit">Search</button></p>
  385. </div>
  386. <script type="text/javascript">
  387. jQuery(function()
  388. {
  389. jQuery("#search_type").change(function()
  390. {
  391. if (jQuery("#search_type").val() == "Distributor")
  392. {
  393. jQuery("#distributor_search").overlay({load: true});
  394. }
  395. else if (jQuery("#search_type").val() == "Dealer")
  396. {
  397. jQuery("#dealer_search").overlay({load: true});
  398. }
  399. else if (jQuery("#search_type").val() == "Transaction")
  400. {
  401. jQuery("#transaction_search").overlay({load: true});
  402. }
  403. });
  404. });
  405. </script>
  406.  
  407. <fieldset>
  408. <input type="hidden" name="search" value="true">
  409. <label>Section:</label>
  410. <select class="ui-widget-content ui-corner-all">
  411. <option>Approvals</option>
  412. <option>Payments</option>
  413. <option>Inventory</option>
  414. </select>
  415.  
  416. <label>Distributor Account</label>
  417. <input id="autoDistID" placeholder="Enter Name/Number" class="ui-corner-all"/>
  418.  
  419. <label>Dealer Account</label>
  420. <input id="autoDlrID" placeholder="Enter Name/Number" class="ui-corner-all" />
  421.  
  422. <label>Transaction #:</label>
  423. <input type="text" class="ui-widget-content ui-corner-all" />
  424. <button id="btn-search">Search</button>
  425. </fieldset>
  426. </form>
  427. </div>
  428. </section>
  429. <section id="navigation">
  430. <div id="accordion" style="min-height: 340px;">
  431. <h3 title="View updates and notifications for your account."><a href="#">My Communications</a></h3>
  432. <div>
  433. <ul class="leftNav">
  434. <li><span class="info"></span><a href="#">Your
  435. statement is now available</a> 5/4/2011</li>
  436. <li><span class="finance"></span><a href="#">You
  437. have payments due in 10 days</a> 5/3/2011</li>
  438. <li><span class="contacts"></span><a href="#">Your
  439. approval requests summary</a> 5/3/2011</li>
  440. </ul>
  441. </div>
  442. <h3 title="Take care of common tasks and add your personal touch to COMS."><a href="#">I Want to...</a></h3>
  443. <div>
  444. <ul class="leftNav">
  445. <li class="approval"><a href="#">Add a New
  446. Approval</a></li>
  447. <li class="bills"><a href="#">Pay My Bills</a></li>
  448. <li class="tools"><a href="#">View My Work Queue</a></li>
  449. <li class="bills"><a href="#">Locate Inventory/Products</a></li>
  450. <li class="setting"><a href="#">Personalize My COMS Experience</a></li>
  451. </ul>
  452. </div>
  453. <h3 title="View a list of bookmarks you've saved."><a href="#">My Bookmarks</a></h3>
  454. <div>
  455. <ul class="leftNav">
  456. <li class="bookmark"><a href="approvals_transactions.html">Appliance Republic</a></li>
  457. <li class="bookmark"><a href="#">Science Federal</a></li>
  458. <li class="bookmark"><a href="#">Sizzle Karizme Co</a></li>
  459. <li class="bookmark"><a href="#">Stable Custom Inc</a></li>
  460. <li class="bookmark"><a href="#">Summers Kayo Ltd</a></li>
  461. </ul>
  462. </div>
  463. <h3 title="Look at overall reports about your performance and health."><a href="#">Related Reports & Insights</a></h3>
  464. <div>
  465. <ul class="leftNav">
  466. <li class="chart"><a href="#">My Performance Summary</a></li>
  467. <li class="chart"><a href="#">Dealer Performance Summary</a></li>
  468. <li class="analytics-chart"><a href="#" id="opener" rel="#analytics-online">Outstandings Dashboard</a></li>
  469. <li class="analytics-chart"><a href="#">Liquidations Dashboard</a></li>
  470. <li class="analytics-chart"><a href="#">Credit Capacity Dashboard</a></li>
  471. </ul>
  472. </div>
  473. </div>
  474. </section>
  475. <section id="ge-applications">
  476. <img alt="Analytics Online" src="images/ad-analytics-online.png" />
  477. <img alt="Power Analytics" src="images/ad-power-analytics.png" />
  478. <img alt="Access GE" src="images/ad-access-ge.png" />
  479. </section>
  480. </aside>
  481.  
  482. <div id="analytics-online" class="simple_overlay">
  483. <div id="analytics-os" style="margin-right: auto; margin-left: auto;" >New Fusion Chart Goes Here!</div>
  484. <script type="text/javascript">
  485. FusionCharts._fallbackJSChartWhenNoFlash();
  486. var myChart = new FusionCharts( "FusionCharts/MSColumn2D.swf", "column", "650", "350", "0", "1" );
  487. myChart.setXMLUrl("FusionCharts/analytics-online-outstandings.xml");
  488. myChart.render("analytics-os");
  489. </script>
  490. <div class="modal-actions">
  491. <div style="text-align: center; margin-left: auto; margin-right: auto;">
  492. <button>Export Images</button>
  493. <button>Copy Data</button>
  494. <button>View PDF</button>
  495. </div>
  496. <p>Oustandings Trends: <br />
  497. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis, nisl id feugiat tincidunt, leo enim commodo nulla, vel cursus
  498. </p>
  499. <img alt="Powered by..." src="images/ad-poweredby-ao.png" />
  500. </div>
  501. </div>
  502.  
  503. <div id="main-full">
  504. <div class="section-title">
  505. <h2><img alt="Section Header Home" src="images/section-header-home.png" /></h2>
  506. <span class="acct-settings"><span class="on"><img
  507. alt="Checked checkbox" src="images/checkbox-checked.gif"> Alternate ID</span><span
  508. class="off"><img alt="Unchecked checkbox" src="images/checkbox-unchecked.gif">
  509. Alternate ID</span></span>
  510. <span class="help-bubble-settings"><span class="on"><img
  511. alt="Checked checkbox" src="/images/checkbox-checked.gif">Tooltip Help</span><span
  512. class="off"><img alt="Unchecked checkbox" src="/images/checkbox-unchecked.gif">Tooltip
  513. Help</span></span>
  514. </div>
  515. <div class="panels">
  516. <!-- Start Draggable Panels Here -->
  517. <div class="column">
  518. <!-- Alerts Portlet -->
  519. <div class="portlet" id="my-communications">
  520. <div class="portlet-header ui-corner-top" title="View important updates and alerts pertaining to your account.">My Communications</div>
  521. <div class="portlet-content">
  522. <div class="notifications-module">
  523. <ul>
  524. <li>
  525. <span class="info"></span>
  526. <a href="#">Your Statement is now Available</a>
  527. <span>5/4/2011</span>
  528. </li>
  529. <li>
  530. <span class="finance"></span>
  531. <a href="#">You Have Payments Due in 10 Days</a>
  532. <span>5/3/2011</span>
  533. </li>
  534. <li>
  535. <span class="contacts"></span>
  536. <a href="#">Your Approval Request Activity Summary</a>
  537. <span>5/3/2011</span>
  538. </li>
  539. </ul>
  540. </div>
  541. </div>
  542. <div class="portlet-config">
  543. <div style="text-align: center">
  544. <form class="ui-widget-content ui-corner-all" method="get">
  545. <label>Show In My Communications Center....</label>
  546. <div style="height:1px; margin: 5px 0; padding: 0; border-bottom: #cccccc 1px dashed; width:95%; clear: both;"></div>
  547. <fieldset>
  548. <legend>Messages</legend>
  549. <label><input type="checkbox">System Maintenance</label>
  550. <label><input type="checkbox">Did You Know Features</label>
  551. <label><input type="checkbox">Release Notes</label>
  552.  
  553. </fieldset>
  554. <fieldset>
  555. <legend>Notifications</legend>
  556. <label><input type="checkbox">Statement Available</label>
  557. <label><input type="checkbox">Charges Due</label>
  558. <label><input type="checkbox">Payment Confirmation</label>
  559. <label><input type="checkbox">Transfer Activity</label>
  560. </fieldset>
  561. <div style="height:1px; margin: 5px 0; padding: 0; border-bottom: #cccccc 1px dashed; width:95%; clear: both;"></div>
  562. <button>Cancel</button><button id="com-config">I'm Done!</button>
  563. </form>
  564. </div>
  565. </div>
  566. </div>
  567. <!-- Work Queue Portlet -->
  568. <div class="portlet" id="my-workqueue">
  569. <div class="portlet-header" title="View the details of held and rejected transactions you want to act on.">My Work Queue</div>
  570. <div class="portlet-content">
  571. <!--- Start Tab Structure -->
  572. <div id="work-center" class="css-panes">
  573. <ul>
  574. <li><a href="#tabs-1">Approvals</a></li>
  575. <li><a href="#tabs-2">Payments</a></li>
  576. <li><a href="#tabs-3">Inventory Transfer</a></li>
  577. </ul>
  578.  
  579. <div id="tabs-1"><!-- Tab Display One -->
  580. <!-- Start Data Grid Code -->
  581. <div id="grid">
  582. <table id="table"></table>
  583. <div id="paging"></div>
  584. </div>
  585. <script type="text/javascript">
  586. jQuery(function()
  587. {
  588. var last_selected;
  589. var grid = jQuery('#table').jqGrid({
  590. url: 'workqueue',
  591. datatype: 'json',
  592. colNames: ['Approved Date', 'Approval Request Date', 'Status', 'CUR', 'Dealer', 'Distributor', 'Expiry Days', 'Approval ID', 'Reference ID', 'Ship Auth/PO Number', 'Requested Amount', 'Remaining Amount', 'Comments', 'Requestor', 'Status Change'],
  593. colModel: [
  594. {name: 'Approved Date', index: 'approved_date', width: 50, hidden: true, hidedlg: true},
  595. {name: 'Approval Request Date', index: 'approval_request_date', width: 50},
  596. {name: 'Status', width: 50, index: 'approval_status', align: 'center'},
  597. {name: 'CUR', width: 40, index: 'currency'},
  598. {name: 'Dealer', width: 150, index: 'dealer'},
  599. {name: 'Distributor', width: 150, index: 'distributor', hidedlg: true},
  600. {name: 'Expiry Days', index: 'expiry_days', width:80, hidden: true},
  601. {name: 'Approval ID', width: 80, index: 'approval_id', hidden:true},
  602. {name: 'Reference ID', width: 80, index: 'reference_id', editable: true},
  603. {name: 'Ship Auth/PO Number', width: 50, index: 'shipping_authorization_po_number', editable: true, classes: 'ui-corner-all'},
  604. {name: 'Approved Amt', width: 50, index: 'approved_amount', editable: true, formatter: 'currency', align: 'right', hidedlg: true},
  605. {name: 'Remaining Amt', width: 50, index: 'remaining_amount', formatter: 'currency', align: 'right', hidden:true, hidedlg: true},
  606. {name: 'Comments', index: 'comments', hidden: true, hidedlg: true, editable: true, edittype: 'textarea'},
  607. {name: 'Requestor', width: 73, index: 'requestor'},
  608. {name: 'Status Change', index: 'status_change', hidden:true, hidedlg: true}
  609. ],
  610. pager: '#paging',
  611. sortname: 'id',
  612. sortorder: 'desc',
  613. sortable: true,
  614. autowidth: true,
  615. height: "auto",
  616. altRows: true,
  617. altclass: 'altrow',
  618. rowList: [10,25,50],
  619. rowNum: 10,
  620. forcefit: true,
  621. shrinkToFit: true,
  622.  
  623. gridComplete: function (){
  624. var rowid; //Row of hover event
  625.  
  626. $(".jqgrow").mouseover(function(e){
  627. rowid = $(e.target).parents("tr:first").attr('id');
  628. jQuery('#table').jqGrid('setCell', rowid, 'Status', '', 'active-cell');
  629.  
  630. });//end .mouseover function
  631.  
  632. $(".jqgrow").mouseout(function(e){
  633. $(".active-cell").removeClass("active-cell");
  634.  
  635. }); //end mouseout functionality
  636.  
  637.  
  638. jQuery('[aria-describedby="table_Status"]').each(function(index, item)
  639. {
  640. if (jQuery(item).html().toLowerCase() == 'approved')
  641. {
  642. jQuery(item).addClass('greencell');
  643. }
  644. else if (jQuery(item).html().toLowerCase() == 'held')
  645. {
  646. jQuery(item).addClass('yellowcell');
  647. }
  648. else if (jQuery(item).html().toLowerCase() == 'rejected')
  649. {
  650. jQuery(item).addClass('redcell');
  651. }
  652. });
  653.  
  654.  
  655. }, //end gridComplete event
  656.  
  657. /*Inline row editor */
  658. onSelectRow: function(id){
  659. if(id && id!==last_selected){
  660. //restore last selected cell
  661. $(".highlight-cell").removeClass("highlight-cell");
  662. jQuery('#table').jqGrid('restoreRow',last_selected);
  663.  
  664. //format newly selected cells
  665.  
  666. jQuery('#table').jqGrid('editRow',id,true);
  667. jQuery('#table').jqGrid('setCell', id, 'Status', '', 'highlight-cell');
  668. last_selected=id;
  669. jQuery('#requested_amount').val(jQuery('tr.ui-state-highlight td[aria-describedby="table_Approved Amt"] input').val());
  670. jQuery('#reference_id').val(jQuery('tr.ui-state-highlight td[aria-describedby="table_Reference ID"] input').val());
  671. /*
  672. alert(jQuery('tr.ui-state-highlight td[aria-describedby="Ship Auth/PO Number"] input').val());
  673. */
  674. jQuery('#shipping_authorization_po_number').val(jQuery('input[name="Ship Auth/PO Number"]').val());
  675. /*
  676. jQuery('#shipping_authorization_po_number').val(jQuery('tr.ui-state-highlight td[aria-describedby="Ship Auth/PO Number"] input').val());
  677. */
  678. jQuery('.edit-label').show();
  679. var offset = jQuery('tr.ui-state-highlight').offset();
  680. offset.top += 32;
  681. offset.left += 300;
  682. jQuery('.edit-label').offset(offset);
  683. }
  684. trap_arrows(id);
  685. }
  686. }).navGrid('#paging', {search: true, edit:true, del: true});;
  687. jQuery("#table").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});
  688. jQuery('#table').jqGrid('navGrid', '#paging', {edit:true, del:true});
  689. jQuery("#table").jqGrid('navButtonAdd', "#paging", {caption: "", buttonicon: "ui-icon-gear",title: "Choose Columns",
  690. onClickButton: function() {grid.jqGrid('columnChooser');}
  691. });// End Custom Button Function
  692.  
  693. // gridcomplete: function () { } //End Grid Complete function
  694. grid.jqGrid("setGridWidth", 724);
  695. });
  696.  
  697. </script>
  698. <div class="post-grid"></div>
  699. </div><!-- End Tab One -->
  700. <div id="tabs-2"><!-- Tab Display Two -->
  701. <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
  702. </div>
  703. <div id="tabs-3"><!-- Tab Display three -->
  704. <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
  705. <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
  706. </div>
  707.  
  708. </div><!-- End Work-Center Tabs -->
  709. </div> <!-- End Portlet-Content Class -->
  710. </div><!-- End Work Queue Portlet -->
  711.  
  712.  
  713. <div class="edit-label" onClick="edit_label();"></div>
  714. <div id="edit-form" class="edit-detail ui-corner-bottom">
  715. <table>
  716. <tbody>
  717. <tr>
  718. <td>Requested Amount:</td>
  719. <td>Reference ID:</td>
  720. <td>Ship Auth / PO Number:</td>
  721. </tr>
  722. <tr>
  723. <td><input class="ui-widget-content ui-corner-all" name="shipping_authorization_po_number" id="shipping_authorization_po_number" type="text"></td>
  724. <td><input class="ui-widget-content ui-corner-all" name="requested_amount" id="requested_amount" type="text"></td>
  725. <td><input class="ui-widget-content ui-corner-all" name="reference_id" id="reference_id" type="text"></td>
  726. </tr>
  727. </tbody>
  728. </table>
  729. <div class="spacer"></div>
  730. <div id="edit-comments" class="gradient-white-bg">
  731. <textarea maxlength="230" class="ui-widget-content ui-corner-all" placeholder="Type here to add your comments..."></textarea><br />
  732. <ul class="comments">
  733. <li>3/12/2011 9:00 AM CST<br /> <strong>Distributor User:</strong> Manual Approval Needed</li>
  734. <li>3/12/2011 9:00 AM CST<br /> <strong>Account Manager</strong> Additional Info Needed</li>
  735. <li>3/12/2011 9:00 AM CST:<br /> <strong>System Notice</strong> Request Created, Requires Manual Approval</li>
  736. </ul>
  737. </div>
  738. <div class="spacer"></div>
  739. <div class="buttons">
  740. <button class="ui-button" onClick="jQuery('#edit-form').slideUp('slow'); jQuery('.edit-label').show(); return false;">Cancel</button>
  741. <button class="ui-button" name="update_row_edit" id="update_row_edit" onClick="jQuery('#edit-form').slideUp('slow'); jQuery('.edit-label').show(); return false;">Update</button>
  742. </div>
  743. </div>
  744.  
  745. <!-- Performance Portlet -->
  746. <div class="portlet" id="recent-portfolio-trends">
  747. <div title="View graphs and charts of your portfolio." class="portlet-header">Recent Portfolio Trends</div>
  748. <div class="portlet-content">
  749. <!-- Trends -->
  750. <span id="Trends-OS">FusionCharts will load here!</span>
  751. <span id="Trends-Vol">FusionCharts will load here!</span>
  752. <div id="fcexpDiv"></div>
  753. <script type="text/javascript">
  754. var myChart = new FusionCharts( "FusionCharts/MSColumn2D.swf", "column", "350", "220", "0", "1" );
  755. myChart.setXMLUrl("FusionCharts/trends-outstandings.xml");
  756. myChart.render("Trends-OS");
  757.  
  758. var myExportComponent = new FusionChartsExportObject("fcExporter1", "FusionCharts/FCExporter.swf");
  759. </script>
  760.  
  761. <script type="text/javascript">
  762. var myChart = new FusionCharts( "FusionCharts/MSCombi2D.swf", "column", "350", "220", "0", "1" );
  763. myChart.setXMLUrl("FusionCharts/trends-volume.xml");
  764. myChart.render("Trends-Vol");
  765.  
  766. var myExportComponent = new FusionChartsExportObject("fcExporter1", "FusionCharts/FCExporter.swf");
  767. </script>
  768.  
  769. <!-- End Chart Rendering -->
  770. </div>
  771. </div>
  772.  
  773. <!-- End Draggable Panel Area -->
  774. <div>
  775. <div style="width: 24%; float: left;">
  776. <h2>Sister Sites</h2>
  777. <p><a href="#">Access GE</a></p>
  778. <p><a href="#">Power Analytics</a></p>
  779. </div>
  780. <div style="width: 24%; float: left;">
  781. <h2>Contact Us:</h2>
  782. <p>Approvals Hotline:<br />
  783. 1-800-XXX-XXXX</p>
  784. <p>Funding Hotline:<br />
  785. 1-800-XXX-XXXX</p>
  786. <p>Billing &amp; Payables Hotline:<br />
  787. 1-800-XXX-XXXX</p>
  788. <p>Inventory Reports Hotline:<br />
  789. 1-800-XXX-XXXX</p>
  790. </div>
  791. <div style="width: 24%; float: left;">
  792. <p><a href="#">Terms &amp; Conditions</a></p>
  793. <p><a href="#">Accessibility</a></p>
  794. <p><a href="#">Privacy</a></p>
  795. </div>
  796. <div>
  797. <p>&copy; GE Capital Americas 2011</p>
  798. </div>
  799. </div>
  800.  
  801.  
  802.  
  803.  
  804.  
  805. </div>
  806. </div>
  807. </div>
  808. <!-- [if lt IE 7 ]>
  809.  
  810. <script src="js/libs/dd_belatedpng.js"></script>
  811. <script>DD_belatedPNG.fix("img, .png_bg");</script>
  812. <![endif] -->
  813. <!--[if lt IE 7 ]>
  814. <script>
  815. jQuery('img[src$=".png"]').each(function(index,element) {
  816. element.src = element.src.replace('.png','.gif');
  817. });
  818. jQuery('.unread').css('position', 'relative').css('z-index', 999999');
  819. </script>
  820. <![endif] -->
  821. <div id="dialog" title="Basic dialog">
  822. <p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
  823. </div>
  824. </div>
  825. </div>
  826. <!-- <span class="edit-label"><a href="javascript:edit_label()"><img src="/images/edit-label.png" border="0"></a></span> -->
  827.  
  828. <!--
  829. <img class="edit-label" src="/images/edit-label.png">
  830. -->
  831. <script>
  832. /*
  833. jQuery.ready(function()
  834. {
  835. jQuery(".edit-label").click(function()
  836. {
  837. alert("Edit here 2.");
  838. });
  839. });
  840. */
  841. </script>
  842. <script>
  843. // increase the default animation speed to exaggerate the effect
  844.  
  845. </script>
  846. <!--[if lt IE 7 ]>
  847. <script>
  848. jQuery('img[src$=".png"]').each(function(index,element) {
  849. element.src = element.src.replace('.png','.gif');
  850. });
  851. </script>
  852. <![endif] -->
  853. </body>
  854. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!