jQWidgets Forums

jQuery UI Widgets › Forums › Grid › Grid forever loading

Tagged: , ,

This topic contains 3 replies, has 2 voices, and was last updated by  Peter Stoev 12 years, 2 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Grid forever loading Posts
  • March 26, 2013 at 3:49 am Grid forever loading #17987

    soonkoh
    Member

    Hi there,
    I have a grid loaded without any problem in page – si_display.php.

    In this page, I have a form which I need to pass some data into it, therefore, I do like this: si_display.php?ref_no=2013-0001

    This has caused that grid to load forever.

    As soon as remove “ref_no=2013-0001” from the URL, it works again.

    In google chrome’s console, it shows that:

    Uncaught Error: Syntax error, unrecognized expression: .jqx-checkbox-ref_no=2013-0001 jquery-1.8.2.min.js:2
    Failed to load resource: the server responded with a status of 404 (Not Found)
    http://www.abc.com/jqwidgets/styles/jqx.ref_no=2013-0001.css

    The CSS in my server are:

    jqwidgets/styles/jqx.base.css
    jqwidgets/styles/jqx.classic.css

    It seems that it has been changed to jqx.ref_no=2013-0001.css

    Regards
    SoonKoh

    March 26, 2013 at 5:34 am Grid forever loading #17998

    Peter Stoev
    Keymaster

    Hi soonkoh,

    I suppose that the problem on your side is that you use the getDemoTheme function for loading a theme. That function is only for our demos and should not be used anywhere else.

    To apply a theme to a widget, see: jquery-grid-styling-and-appearance.htm.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    March 26, 2013 at 10:09 am Grid forever loading #18031

    soonkoh
    Member

    Hi Peter,

    Here’s part of my code:

    <html lang="en">
    <title>SO Items</title>
    <head>
        <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
        <link rel="stylesheet" href="http://gss.greenpacket.com/oms/jqwidgets/styles/jqx.classic.css" type="text/css" />
        <link rel="stylesheet" href="media/css/custom.css" type="text/css" />
        <link rel="stylesheet" href="media/css/custom_jquery.css" type="text/css" />
    	<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
    	
    	
    	<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
    	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
    	
        <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script>	
    	<script type="text/javascript" src="jqwidgets/jqxgrid.filter.js"></script>		
        <script type="text/javascript" src="jqwidgets/jqxdata.js"></script>	
    	<script type="text/javascript" src="jqwidgets/jqxlistbox.js"></script>	
    	<script type="text/javascript" src="jqwidgets/jqxdropdownlist.js"></script>	
    	<script type="text/javascript" src="jqwidgets/jqxgrid.pager.js"></script>
    	<script type="text/javascript" src="jqwidgets/jqxgrid.aggregates.js"></script>
    	<script type="text/javascript" src="jqwidgets/jqxgrid.edit.js"></script>
    	<script type="text/javascript" src="jqwidgets/jqxgrid.filter.js"></script>
    	<script type="text/javascript" src="jqwidgets/jqxlistbox.js"></script>    
    	<script type="text/javascript" src="jqwidgets/jqxdropdownlist.js"></script>    
    	<script type="text/javascript" src="jqwidgets/jqxcheckbox.js"></script>    
    	<script type="text/javascript" src="jqwidgets/jqxnumberinput.js"></script>    
    	<script type="text/javascript" src="jqwidgets/jqxdatetimeinput.js"></script>    
    	<script type="text/javascript" src="jqwidgets/globalization/jquery.global.js"></script>	
    	<script type="text/javascript" src="jqwidgets/jqxgrid.columnsresize.js"></script> 
    	<script type="text/javascript" src="jqwidgets/jqxdata.export.js"></script>     
    	<script type="text/javascript" src="jqwidgets/jqxgrid.export.js"></script> 
    	<script type="text/javascript" src="jqwidgets/jqxgrid.sort.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxpanel.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxgrid.storage.js"></script>
    	<script type="text/javascript" src="jqwidgets/gettheme.js"></script>		
    	<script type="text/javascript" src="jqwidgets/jqxgrid.sort.js"></script>
    	<script type="text/javascript" src="jqwidgets/jqxcalendar.js"></script>
    	<script type="text/javascript" src="jqwidgets/jqxwindow.js"></script>
    	<script type="text/javascript" src="jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    	$('.date-input').live('focus', function(){
    	$('.date-input').datepicker({dateFormat: 'yy-mm-dd'});
    	
    	});
    	
    			
                // prepare the data
                //var theme = 'energyblue';
    			var theme = getTheme();
    			var data = '<?php include("si_datasource.php");?>'; 
                var source =
                {			
                    datatype: "json",
                    datafields: [
    				    { name: 'checked', type: 'bool'},				
    				    { name: 'si_id', type: 'number'},
    					{ name: 'ref_no', type: 'string' },
    				    { name: 'name', type: 'string'  },
    				    { name: 'customer_po_no', type: 'string' },
    				    { name: 'status', type: 'string' }					
                    ],
    				//id: 'shipment_id',				
                    //url: 'si_datasource.php'
    				 localdata: data
                };      
    			var dataAdapter = new $.jqx.dataAdapter(source);
                var columnCheckBox = null;             
    			var updatingCheckState = false;			
                // initialize jqxGrid
                $("#jqxgrid").jqxGrid(
                {
    			    width: 610,
    				height:150,
    				sortable: true,
    				columnsresize: true,	
                    source: dataAdapter,
    				showfilterrow: true,	
    				filterable: true,             
    				altrows: true,                
    				theme: theme,	
    				enabletooltips: true,				
    				selectionmode: 'none', 
                    editable: true,                
    				enablehover: false,			
          			
                    columns: [
    	
    					 { text: ' ', datafield: 'checked', columntype: 'checkbox', width: 40, filterable:false },
                          { text: 'SHIPMENT ID', datafield: 'si_id', width:50, cellsformat: 'n', filterable: true, align:'center', editable:false},
                          { text: 'Serial No.', filterable:true,  filtertype: 'textbox', datafield: 'ref_no', width:100, align:'center', editable:false},					  
                          { text: 'Account', filtertype: 'textbox', datafield: 'name', width:150, align:'center', editable:false },					  
                          { text: 'PO No.', filtertype: 'textbox', datafield: 'customer_po_no', filterable: true, filtercondition:'contains', width:100, cellsalign:'left', align:'center', editable:false}, 
                          { text: 'Shipment Status', filterable:true,  filtertype: 'checkedlist', datafield: 'status', width:150, align:'center', editable:false}
                      ]
                });

    Do you see any error?

    March 26, 2013 at 10:18 am Grid forever loading #18035

    Peter Stoev
    Keymaster

    Hi soonkoh,

    As I wrote in the previous post: var theme = getTheme(); is definitely an error. In addition, make sure that you use the latest version – 2.8.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.