jQuery Grid Plugin - jqGridForum

Topic RSS

Related Topics sp_TopicIcon

TreeGrid no longer shows without Reload in FireFox 14.0.1

Tags: treegrid west-grid

11/08/2012
00:01

es101dev

New Member

Members

Forum Posts: 1

Member Since:
10/08/2012

Offline

Has anyone experienced a recent situation whereby their treegrid no longer load initially in firefox without reload?

These are the errors I am getting:

TypeError: jQuery("#west-grid").jqGrid is not a function
[Image Can Not Be Found] onSelectRow: function(rowid) {

/administrator/ (line 107)

TypeError: $.jgrid.extend is not a function
[Image Can Not Be Found] restoreRow : function(rowid, afterrestorefunc) {

grid.inlinedit.js (line 223)

TypeError: $.jgrid.extend is not a function
[Image Can Not Be Found] toggleSubGridRow : function(rowid) {

grid.subgrid.js (line 239)

TypeError: $.jgrid.extend is not a function
[Image Can Not Be Found] getChangedCells : function (mthd) {

grid.celledit.js (line 448)

TypeError: $.jgrid.extend is not a function
[Image Can Not Be Found] getUserDataItem : function( key ) {

grid.postext.js (line 58)

TypeError: $.jgrid.extend is not a function
[Image Can Not Be Found] delTreeNode : function (rowid) {

grid.treegrid.js (line 469)

TypeError: $.jgrid.extend is not a function
[Image Can Not Be Found] setColumns : function(p) {

grid.s...umns.js (line 11)




My code is as follows:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>EventStaffing101</title>
<!--  <link href="js/upload/fileuploader.css" rel="stylesheet" type="text/css">    -->
<link rel="stylesheet" type="text/css" media="screen" href="themes/redmond/jquery-ui-1.8.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/ui.multiselect.css" />
<style>
#LeftPane {
    /* optional, initial splitbar position */
    overflow:hidden;
}
/*
 * Right-side element of the splitter.
*/
#RightPane {
    padding: 0px;
    overflow: auto;
}
.ui-tabs-nav li {position: relative;}
.ui-tabs-selected a span {padding-right: 10px;}
.ui-tabs-close {display: none;position: absolute;top: 3px;right: 0px;z-index: 800;width: 16px;height: 14px;font-size: 10px; font-style: normal;cursor: pointer;}
.ui-tabs-selected .ui-tabs-close {display: block;}
.ui-layout-west .ui-jqgrid tr.jqgrow td { border-bottom: 0px none;}
.ui-datepicker {z-index:1200;}
.rotate
    {
        /* for Safari */
        -webkit-transform: rotate(-90deg);
        /* for Firefox */
        -moz-transform: rotate(-90deg); 
        /* for Internet Explorer */
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }
</style>
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.17.custom.min.js" type="text/javascript"></script>
<script src="js/jquery.layout.js" type="text/javascript"></script>
<script type="text/javascript">
//var rowNum1=20;
    //$.jgrid.no_legacy_api = true;
    //$.jgrid.useJSON = true;
</script>
<script src="js/ui.multiselect.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
    //$('#switcher').themeswitcher();
  
    $('body').layout(
    {
        resizerClass: 'ui-state-default',
        west__onresize: function (pane, $Pane) {
            jQuery("#west-grid").jqGrid('setGridWidth',$Pane.innerWidth()-2);
        }
    });
    $.jgrid.defaults = $.extend($.jgrid.defaults,{loadui:"enable"});
    var maintab =jQuery('#tabs','#RightPane').tabs({
        add: function(e, ui) {
            // append close thingy
            $(ui.tab).parents('li:first')
                .append('<span class="ui-tabs-close ui-icon ui-icon-close" title="Close Tab"></span>')
                .find('span.ui-tabs-close')
                .click(function() {
                    maintab.tabs('remove', $('li', maintab).index($(this).parents('li:first')[0]));
                });
            // select just added tab
            maintab.tabs('select', '#' + ui.panel.id);
        }
    });
    jQuery("#west-grid").jqGrid({
        url: "tree.xml",
        datatype: "xml",
        height: "auto",
        pager: false,
        loadui: "disable",
        colNames: ["id","Items","url"],
        colModel: [
            {name: "id",width:1,hidden:true, key:true},
            {name: "menu", width:150, resizable: false, sortable:true},
            {name: "url",width:1,hidden:true}
        ],
        treeGrid: true,
        caption: "EventStaffing101",
        ExpandColumn: "menu",
        autowidth: true,
        //width: 180,
        rowNum: 200,
        ExpandColClick: true,
        treeIcons: {leaf:'ui-icon-document-b'},
        onSelectRow: function(rowid) {
            var treedata = $("#west-grid").jqGrid('getRowData',rowid);
            
            if(treedata.isLeaf=="true") {
                //treedata.url
                var st = "#t"+treedata.id;
                //alert(st);
                if($(st).html() != null ) {
                    maintab.tabs('select',st);
                } else {
                    maintab.tabs('add',st, treedata.menu);
                    $(st,"#tabs").load(treedata.url);
                    
                }
            }
        }
    });
    
I'm not an expert on jQuery as this was developed by a team that is no longer in business, so easy to understand responses and comments are greatly appreciated.  By the way,
this issue does not exist in MS IE browsers.

11/08/2012
09:55

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

The error you get point me that the

is a not valid url or the jquery.jqGrid.js file does not exists in this directory.

Check with firebug if the file is loaded

Regards

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.