jQuery Grid Plugin - jqGridForum

28/02/2011
21:59

sgoyal

New Member

Members

Forum Posts: 2

Member Since:
28/02/2011

Offline

1

Hi All,

I an new to jgGrid and using it for one of my project along with jquery-ui (1.8.10) and jquery (1.4.4), I have 2 tabs on my UI web page (called My Quote, My Shipments), when user click on MyQuote it works fine and display the column as sorting columns on all browsers, but when I click on the MyShipments it's not doing the sorting on any of the column (when I clicks), seems to me somehow click event to fire the URL to relaod data is not firing up in Firefox/Chrome only. It works fine in IE. For your reference the code is given below for all three web pages.

Main Page: board.php (having 2 tabs)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
       <title>My Board</title>
       <link href="../css/common.css" rel="stylesheet" type="text/css" />
       <link href="../css/smoothness/jquery-ui-1.8.10.custom.css" rel="stylesheet" type="text/css" />
       <link href="../css/mygrid.css" rel="stylesheet" type="text/css" />
       <script type="text/javascript" src="../jscripts/jquery-1.4.4.min.js"></script>
       <script type="text/javascript" src="../jscripts/jquery-ui-1.8.10.tab.min.js"></script>
       <script type="text/javascript">
       <!–
       $(document).ready(function() {
           $(function() {
               $("#tabs").tabs({
                   load: function(event, ui) {
                       $('a', ui.panel).click(function() {
                              $(ui.panel).load(this.href);
                              return false;
                       });
                   }
               });
           });
       });
       –>
       </script>
   </head>
   <body>
       <!– Top Banner –>
       <?php include_once("../includes/topbanner.inc.php"); ?>
       <!– Content Panel –>
       <div id="main-container" class="divgradiant">
           <div id="pageheader" style="height: 30px;">Visionboard</div>
           <!– Create Top Navigation Tabs –>
           <div id="tabs">
               <ul>
                   <li><a href="vb-quote.php"><span>My Quotes</span></a></li>
                   <li><a href="vb-shipments.php"><span>My Shipments</span></a></li>
               </ul>
           </div>
       </div>

       <!– Footer –>
       <?php include_once("../includes/footer.inc.php"); ?>
   </body>
</html>

1st Tab Page (MyQuote, working fine in all browsers):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
       <title>My Quotes</title>
       <link href="../css/smoothness/jquery-ui-1.8.10.custom.css" rel="stylesheet" type="text/css" />
       <link href="../css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
       <link href="../css/mygrid.css" rel="stylesheet" type="text/css" />
       <script type="text/javascript" src="../jscripts/jquery-1.4.4.min.js"></script>
       <script type="text/javascript" src="../jscripts/jquery-ui-1.8.10.tab.min.js"></script>
       <script type="text/javascript" src="../jscripts/i18n/grid.locale-en.js" ></script>
       <script type="text/javascript" src="../jscripts/jquery.jqGrid.min.js"></script>
        <script type="text/javascript">
       $(document).ready(function() {
           $(function(){
               $('#list').jqGrid({
                   url:'getdata.php?quote',
                   datatype: 'json',
                   mtype: 'GET',
                   colNames:['Quote Id','Quote Date','From Zip', 'To Zip','Weight (lb.)','Lowest Cost','Expired On'],
                   colModel :[
                       {name:'quote_id', index:'quote_id', width:125, align:'center', sortable:true, search:true, searchoptions: { sopt: ['eq','ne','bw','ew']}},
                       {name:'quote_date', index:'quote_date', width:125, align:'center', sortable:true, search:true, searchoptions: { sopt: ['eq','ne']}},
                       {name:'origin_zip', index:'origin_zip', width:100, align:'center', sortable:true, search:true, searchoptions: { sopt: ['eq','ne','bw','ew']}},
                       {name:'destination_zip', index:'destination_zip', width:110, align:'center', sortable:true, search:true, searchoptions: { sopt: ['eq','ne','bw','ew']}},
                       {name:'total_weight', index:'total_weight', width:80, align:'right', sortable:false, search:false},
                       {name:'minimum_cost', index:'minimum_cost', width:115, align:'right', sortable:true, search:false},
                       {name:'expdate', index:'expdate', width:100, align:'center', sortable:true, search:false}
                   ],
                   pager: '#pager',
                   rowNum:20,
                   rowList:[20,30,40,50],
                   sortname: 'quote_date',
                   sortorder: 'desc',
                   viewrecords: true,
                    height: '100%',
                   onSelectRow: function(id) {   // goto selected my quote web page
                       $('#hid-qid').val(id);
                       $('#vbquote').submit();
                   }
               });
           });
           $('#list').navGrid('#pager', { view:false, del: false, add: false, edit: false },
               {}, // default settings for edit
               {}, // default settings for add
               {}, // delete
               { closeOnEscape: true, multipleSearch: true, closeAfterSearch: true, onClose: function() { $('#list').trigger( 'reloadGrid' ) }}, // search options
               {} // view parameters
           );
       });
       </script>
   </head>
   <body>
       <!– Content Panel –>
       <div style="margin: auto;">
           <table id="list"></table>
           <div id="pager"></div>
       </div>
       <form name="vbquote" id="vbquote" action="../myquote.php" method="POST">
           <input type="hidden" name="hid-qid" id="hid-qid" value="">
       </form>
   </body>
</html>

2nd Tab Page (MyShipments, working fine in IE only):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
       <title>My Shipments</title>
       <link href="../css/smoothness/jquery-ui-1.8.10.custom.css" rel="stylesheet" type="text/css" />
       <link href="../css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
       <link href="../css/mygrid.css" rel="stylesheet" type="text/css" />
       <script type="text/javascript" src="../jscripts/jquery-1.4.4.min.js"></script>
       <script type="text/javascript" src="../jscripts/jquery-ui-1.8.10.tab.min.js"></script>
       <script type="text/javascript" src="../jscripts/i18n/grid.locale-en.js" ></script>
       <script type="text/javascript" src="../jscripts/jquery.jqGrid.min.js"></script>
       <script type="text/javascript">
       $(document).ready(function() {
           $(function(){
               $('#bollist').jqGrid({
                   url:'getdata.php?bol',
                   datatype: 'json',
                   mtype: 'GET',
                   colNames:['BOL #','Date','Shipper','Consignee', 'PRO #','SCAC','Weight', 'Cost', 'Status'],
                   colModel :[
                       {name:'a.bol_no', index:'a.bol_no', width:80, align:'left', sortable:true, search:true, searchoptions: { sopt: ['eq','ne','bw','ew']}},
                       {name:'a.bol_date', index:'a.bol_date', width:80, align:'center', sortable:true, search:true, searchoptions: { sopt: ['eq','ne']}},
                       {name:'sf.name', index:'sf.name', width:140, align:'left', sortable:true, search:true, searchoptions: { sopt: ['eq','ne','bw','ew']}},
                       {name:'st.name', index:'st.name', width:140, align:'left', sortable:true, search:true, searchoptions: { sopt: ['eq','ne','bw','ew']}},
                       {name:'a.pro_no', index:'a.pro_no', width:80, align:'left', sortable:false, search:true, searchoptions: { sopt: ['eq','ne','bw','ew']}},
                       {name:'a.scac_no', index:'a.scac_no', width:50, align:'center', sortable:true, search:true, searchoptions: { sopt: ['eq','ne','bw','ew']}},
                       {name:'a.total_weight', index:'a.total_weight', width:50, align:'right', sortable:false, search:false},
                       {name:'a.billing_amount', index:'a.billing_amount', width:60, align:'right', sortable:true, search:false},
                       {name:'ss.status_desc', index:'ss.status_desc', width:80, align:'right', sortable:true, search:true, searchoptions: { sopt: ['eq','ne','bw','ew']}}
                   ],
                   pager: '#bolpager',
                   rowNum:20,
                   rowList:[20,30,40,50],
                   sortname: 'a.bol_date',
                   sortorder: 'desc',
                   viewrecords: true,
                    height: '100%',
                   onSelectRow: function(id) {   // goto selected my quote web page
                       $('#hid-bolno').val(id);
                       $('#vbshipment').submit();
                   }
               });
           });
           $('#bollist').navGrid('#bolpager', { view:false, del: false, add: false, edit: false },
               {}, // default settings for edit
               {}, // default settings for add
               {}, // delete
               { closeOnEscape: true, multipleSearch: true, closeAfterSearch: true, onClose: function() { $('#bollist').trigger( 'reloadGrid' ) }}, // search options
               {} // view parameters
           );
       });

       </script>
   </head>
   <body>
       <!– Content Panel –>
       <div style="margin: auto;">
           <table id="bollist"></table>
           <div id="bolpager"></div>
       </div>
       <form name="vbshipment" id="vbshipment" action="../ordconfirm.php" method="POST">
           <input type="hidden" name="hid-bolno" id="hid-bolno" value="">
       </form>
   </body>
</html>

Seems on the 2nd tab (MyShipment) when I click on any of the column on the tab, it's not calling my url (getdata.php?bol) but when I do the same on 1st tab (MyQuote), it always called the url (getdata?quote) to reload the database based on clicked column, so seems to me somehow event to reload the page is not attaching to the columns on the 2nd grid only in FF/Chrome. Any help to get this issue resolved will really be appreciated.

Thanks,
SG

03/03/2011
16:29

karez65

New Member

Members

Forum Posts: 2

Member Since:
03/03/2011

Offline

2

Hi!

I have same problem + search in text fields with "contain" not working!

Maybe the two problem has same roots : /

Kind regards:

Karoly

03/03/2011
17:20

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

3

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

03/03/2011
18:56

sgoyal

New Member

Members

Forum Posts: 2

Member Since:
28/02/2011

Offline

4

Finally I got it working by changing the name property value. Actually in the database call SQL query has multiple tables, therefore I am joining them with aliases (a and b), and as we have search box where customer can built their own custom query, therefore we are using the same columns (with alias prefix) to perform the search (to build dyanamic SQL), but somehow when I use the name and id as the name with alias prefix, it didn't work on Firefox/Chrome Smile (but fine in IE), so I changed the name as the actual column name of the table without prefix, and starts working in all of the browsers now. For you reference here is the new code of My Shipments working fine on all of the browsers now, if you notice the only difference in this one and the original posted above (not working) is the name property of the grid. I hope this will help...

2nd Tab Page (MyShipments, working fine in IE/Chrome/Firefox etc.):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
       <title>My Shipments</title>
       <link href="../css/smoothness/jquery-ui-1.8.10.custom.css" rel="stylesheet" type="text/css" />
       <link href="../css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
       <link href="../css/mygrid.css" rel="stylesheet" type="text/css" />
       <script type="text/javascript" src="../jscripts/jquery-1.4.4.min.js"></script>
       <script type="text/javascript" src="../jscripts/jquery-ui-1.8.10.tab.min.js"></script>
       <script type="text/javascript" src="../jscripts/i18n/grid.locale-en.js" ></script>
       <script type="text/javascript" src="../jscripts/jquery.jqGrid.min.js"></script>
       <script type="text/javascript">
       $(document).ready(function() {
           $(function(){
               $('#bollist').jqGrid({
                   url:'getdata.php?bol',
                   datatype: 'json',
                   mtype: 'GET',
                   colNames:['BOL #','Date','Shipper','Consignee', 'PRO #','SCAC','Weight', 'Cost', 'Status'],
                   colModel :[
                       {name:'bol_no', index:'a.bol_no', width:80, align:'left', sortable:true, search:true, searchoptions: { sopt: ['eq','ne','bw','ew']}},
                       {name:'bol_date', index:'a.bol_date', width:80, align:'center', sortable:true, search:true, searchoptions: { sopt: ['eq','ne']}},
                       {name:'sfname', index:'sf.name', width:140, align:'left', sortable:true, search:true, searchoptions: { sopt: ['eq','ne','bw','ew']}},
                       {name:'stname', index:'st.name', width:140, align:'left', sortable:true, search:true, searchoptions: { sopt: ['eq','ne','bw','ew']}},
                       {name:'pro_no', index:'a.pro_no', width:80, align:'left', sortable:false, search:true, searchoptions: { sopt: ['eq','ne','bw','ew']}},
                       {name:'scac_no', index:'a.scac_no', width:50, align:'center', sortable:true, search:true, searchoptions: { sopt: ['eq','ne','bw','ew']}},
                       {name:'total_weight', index:'a.total_weight', width:50, align:'right', sortable:false, search:false},
                       {name:'billing_amount', index:'a.billing_amount', width:60, align:'right', sortable:true, search:false},
                       {name:'status_desc', index:'ss.status_desc', width:80, align:'right', sortable:true, search:true, searchoptions: { sopt: ['eq','ne','bw','ew']}}
                   ],
                   pager: '#bolpager',
                   rowNum:20,
                   rowList:[20,30,40,50],
                   sortname: 'a.bol_date',
                   sortorder: 'desc',
                   viewrecords: true,
                    height: '100%',
                   onSelectRow: function(id) {   // goto selected my quote web page
                       $('#hid-bolno').val(id);
                       $('#vbshipment').submit();
                   }
               });
           });
           $('#bollist').navGrid('#bolpager', { view:false, del: false, add: false, edit: false },
               {}, // default settings for edit
               {}, // default settings for add
               {}, // delete
               { closeOnEscape: true, multipleSearch: true, closeAfterSearch: true, onClose: function() { $('#bollist').trigger( 'reloadGrid' ) }}, // search options
               {} // view parameters
           );
       });

       </script>
   </head>
   <body>
       <!– Content Panel –>
       <div style="margin: auto;">
           <table id="bollist"></table>
           <div id="bolpager"></div>
       </div>
       <form name="vbshipment" id="vbshipment" action="../ordconfirm.php" method="POST">
           <input type="hidden" name="hid-bolno" id="hid-bolno" value="">
       </form>
   </body>
</html>