grid not working in IE 8

[okashaParticipant]

hello

i have a problem with jqxgrid in ie8 it shows the loading image and doesnt display data, here is the problem ie says

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; BTRS105855; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2; .NET4.0C)
Timestamp: Thu, 28 Feb 2013 15:44:33 UTC

Message: ‘this._pageviews.0’ is null or not an object
Line: 7
Char: 56050
Code: 0
URI: http://localhost/portal/public/js/jqwidgets/jqxgrid.js

please help me to fix that

thank you

okasha

[Peter StoevKeymaster]

Hi okasha,

Please, provide a sample which demonstrates your issue.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[okashaParticipant]

Hi mr peter
here is the code

$(document).ready(function () {

var theme = jqwidgets_theme;
var trackSource = {
datatype: “json”,
datafields: [
{name: ‘value’},
{name: ‘label’}
],
id: ‘value’,
url: base_url+’admin/videos/sectioncode’
};
var trackDataAdapter = new $.jqx.dataAdapter(trackSource);
$(“#section_code”).jqxComboBox({
width: 200,
height: 25,
selectedIndex: 0,
source: trackDataAdapter,
displayMember: ‘label’,
valueMember: ‘value’
});

var trackSource2 = {
datatype: “json”,
datafields: [
{name: ‘value’},
{name: ‘label’}
],
id: ‘value’,
url: base_url+’admin/videos/searchfields’
};
var trackDataAdapter2 = new $.jqx.dataAdapter(trackSource2);
$(“#search_field”).jqxComboBox({
width: 200,
height: 25,
selectedIndex: 0,
source: trackDataAdapter2,
displayMember: ‘label’,
valueMember: ‘value’
});

$(‘#search_videos’).bind(‘click’, function (event)
{

var section_code=$(“#section_code”).jqxComboBox(‘getSelectedItem’);
section_code=section_code.value;
var video_title=$(“#video_title”).val();
var search_field=$(“#search_field”).jqxComboBox(‘getSelectedItem’);
search_field=search_field.value;
var source =
{
datatype: “json”,
datafields: [
{name: ‘video_code’},
{name: ‘section_title’},
{name: ‘section_code’},
{name: ‘video_title_ar’},
{name: ‘video_title_en’},
{name: ‘youtube_code’}

],data: {
section_code: section_code,
search_field: search_field,
video_title: video_title

},
url: base_url+’admin/videos/section’,
id:”video_code”,
addrow: function (rowid, rowdata, position, commit) {
var data = “insert=true&” + $.param(rowdata);
$.ajax({
dataType: ‘json’,
type:”post”,
url: base_url+’admin/videos/section’,
data: data,
cache: false,
success: function (data, status, xhr) {
rowdata[“video_code”]=data;

commit(true);
},
error: function (jqXHR, textStatus, errorThrown) {
commit(false);
}
});
},

updaterow: function (rowid, rowdata, commit) {
// synchronize with the server – send update command
var data = “update=true&” + $.param(rowdata);
$.ajax({
dataType: ‘json’,
type:’post’,
url: base_url+’admin/videos/section’,
cache: false,
data: data,
success: function (data, status, xhr) {
// update command is executed.
commit(true);
},
error: function (jqXHR, textStatus, errorThrown) {
commit(false);
}
});
},

deleterow: function (rowid, commit) {
var data = “delete=true&video_code=” + rowid;
$.ajax({
dataType: ‘json’,
type:”post”,
url: base_url+’admin/videos/section’,
cache: false,
data: data,
success: function (data, status, xhr) {
commit(true);

},
error: function (jqXHR, textStatus, errorThrown) {

}
});
},
root: ‘videosection’,
beforeprocessing: function (data) {
source.totalrecords = data.videosection_count;
}
};

dataadapter = new $.jqx.dataAdapter(source);

$(“#jqxgrid”).jqxGrid({source: dataadapter});

});

$(“#section_code”).on(‘bindingComplete’, function (event) {
$(‘#search_videos’).trigger(‘click’);
});

$(“#jqxgrid”).jqxGrid(
{
width: 1190,

theme: theme,
autoheight: true,
autorowheight:true,
pageable: true,
virtualmode: true,
rendergridrows: function () {
return dataadapter.records;
},
columns: [
{text: video_delete,datafield:’Delete’, columntype: ‘button’,width:100, cellsrenderer: function () {
return video_delete;
}, buttonclick: function (row) {

ensure_deletion_action=confirm(ensure_deletion);

if(ensure_deletion_action==true){

var selectedrowindex = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);

//var id = $(“#jqxgrid”).jqxGrid(‘getrowid’, selectedrowindex);
alert($(‘#jqxgrid’).jqxGrid(‘getrowid’, selectedrowindex));
$(“#jqxgrid”).jqxGrid(‘deleterow’, $(‘#jqxgrid’).jqxGrid(‘getrowid’, selectedrowindex));
//alert(delete_result);
//if(delete_result==true){
system_message(video_deleted);
//}

}

}},
{text: video_edit, datafield: ‘Edit’,width:100, columntype: ‘button’, cellsrenderer: function () {
return video_edit;
}, buttonclick: function (row) {

editrow = row;
var offset = $(“#jqxgrid”).offset();
$(“#popupWindow”).jqxWindow({position: {x: parseInt(offset.left) + 360, y: parseInt(offset.top) + 60},width:510,height:230});

var dataRecord = $(“#jqxgrid”).jqxGrid(‘getrowdata’, editrow);
$(“#video_code”).val(dataRecord.video_code);
$(“#video_title_ar”).val(dataRecord.video_title_ar);
$(“#video_title_en”).val(dataRecord.video_title_en);
$(“#youtube_code”).val(dataRecord.youtube_code);
alert(dataRecord.section_code);
$(“#video_section_code”).jqxComboBox(“selectItem”,$(“#video_section_code”).jqxComboBox(‘getItemByValue’, dataRecord.section_code ) );
//alert(dataRecord.section_code);

$(“#video_form_submit”).html(”+edit_video+”);
$(“#update_video”).jqxButton({theme: theme});

$(“#video_form_title”).html(edit_video_data);

$(“#popupWindow”).jqxWindow(‘show’);
}
},
{text: youtube_code, datafield: ‘youtube_code’,width:300,cellsalign:’right’,align:’right’},
{text: video_title_en, datafield: ‘video_title_en’,width:245,cellsalign:’right’,align:’right’},
{text: video_title_ar, datafield: ‘video_title_ar’,width:245,cellsalign:’right’,align:’right’},
{text: video_section, datafield: ‘section_title’,width:100,cellsalign:’right’,align:’right’},

{text: video_code, datafield: ‘video_code’,width:100,cellsalign:’right’,align:’right’}
]
});

$(“#jqxgrid”).jqxGrid(‘localizestrings’, localizationobj);

$(“#update_video”).live(“click”,function(){
var row = {};
var check = $(‘#video’).jqxValidator(‘validate’);
if (check == true) {

row[“video_code”]=$(“#video_code”).val();
row[“video_title_ar”]=$(“#video_title_ar”).val();
row[“video_title_en”]=$(“#video_title_en”).val();
row[“youtube_code”]=$(“#youtube_code”).val();
var item = $(“#video_section_code”).jqxComboBox(‘getItem’, $(“#video_section_code”).jqxComboBox(‘getSelectedIndex’) );
row[“section_code”]=item.value;
row[“section_title”]=item.label;
var selectedrowindex = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);

var id = $(“#jqxgrid”).jqxGrid(‘getrowid’, selectedrowindex);
update_result= $(“#jqxgrid”).jqxGrid(‘updaterow’, id, row);
if(update_result==true){
system_message(section_updated);
}
$(“#popupWindow”).jqxWindow(‘hide’);
}
});

$(“#search_videos”).jqxButton({theme: theme});

$(“#add_video_button”).jqxButton({theme: theme});

$(“#add_video_button”).click(function(){
$(window).scrollTop(0);
var offset = $(“#jqxgrid”).offset();
$(“#popupWindow”).jqxWindow({position: {x: parseInt(offset.left) + 360, y: parseInt(offset.top) + 60},width:510,height:230,animationType: ‘combined’,isModal: true});
//$(‘#popupWindow’).jqxWindow(‘bringToFront’);

$(“#video_code”).val(“”);
$(“#video_title_ar”).val(“”);
$(“#video_title_en”).val(“”);
$(“#youtube_code”).val(“”);

$(“#video_section_code”).jqxComboBox(“selectIndex”, 0);

//$(“#video_section_code”).jqxComboBox(‘removeAt’, 0 );
$(“#video_form_submit”).html(”);

$(“#add_video”).jqxButton({theme: theme});

$(“#video_form_title”).html(add_video);
//console.log(dataRecord);

$(“#popupWindow”).jqxWindow(‘show’);
}) ;

var trackSource = {
datatype: “json”,
datafields: [
{name: ‘value’},
{name: ‘label’}
],
id: ‘value’,
url: base_url+’admin/videos/sectioncode’
};
var trackDataAdapter = new $.jqx.dataAdapter(trackSource);
$(“#video_section_code”).jqxComboBox({
width: 200,
height: 25,
selectedIndex: 0,
source: trackDataAdapter,
displayMember: ‘label’,
valueMember: ‘value’
});

$(“#add_video”).live(“click”,function(){
var row = {};
var check = $(‘#video’).jqxValidator(‘validate’);
//row[“user_code”]=$(“#user_code”).val();
if (check == true) {
//alert(“will insert”);
//var last_video_code=parseInt( $(“#last_video_code”).val())+1;
row[“video_title_ar”]=$(“#video_title_ar”).val();
row[“video_title_en”] = $(“#video_title_en”).val();
row[“youtube_code”]=$(“#youtube_code”).val();
var item = $(“#video_section_code”).jqxComboBox(‘getItem’, $(“#video_section_code”).jqxComboBox(‘getSelectedIndex’) );
row[“section_code”]=item.value;
row[“section_title”]=item.label;
//var selectedrowindex = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);
//alert(item.value);
//var id = $(“#jqxgrid”).jqxGrid(‘getrowid’, selectedrowindex);
//alert(id);
//console.log(row);
insert_result= $(“#jqxgrid”).jqxGrid(‘addrow’, null,row);
//alert(insert_result);
if(insert_result==true){
system_message(video_added);
}
$(“#video #last_video_code”).attr(“value”, last_video_code);
//$(‘#jqxgrid’).jqxGrid(‘updatebounddata’);
$(“#popupWindow”).jqxWindow(‘hide’);
}
//console.log(row);
});

$(“#video”).jqxValidator({
rules: [
{input: ‘#youtube_code’, message: v_youtube_code, action: ‘keyup, blur’, rule: ‘required’},
{input: ‘#video_title_ar’, message: v_video_title_ar, action: ‘keyup, blur’, rule: ‘required’},
{input: ‘#video_title_en’, message: v_video_title_en, action: ‘keyup, blur’, rule: ‘required’},
{input: ‘#video_section_code’, message: v_section_code, action: ‘select’, rule: function(){
if($(“#video_section_code”).jqxComboBox(“getSelectedIndex”)==0){
return false;
}
return true;

}}

]
});

});

this problem occur only in ie

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; BTRS105855; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2; .NET4.0C)
Timestamp: Thu, 28 Feb 2013 16:10:54 UTC

Message: ‘this._pageviews.0’ is null or not an object
Line: 7
Char: 56050
Code: 0
URI: http://localhost/portal/public/js/jqwidgets/jqxgrid.js

Message: ‘value’ is null or not an object
Line: 51
Char: 5
Code: 0
URI: http://localhost/portal/public/js/admin/videos/section.js

thank you

[Peter StoevKeymaster]

Hi okasha,

We will not be able to run the provided code due to the reason that we do not have the data that you use and we do not have the HTML part of the code as well. If you want us to debug and trace your issue, then please provide a small sample which demonstrates it – a simple page with JS + HTML only.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[okashaParticipant]

Hi mr peter
here is a simple example of what i mean if you run it on IE it will not work

http://www.risemyweb.com/demonstration.rar

thank you
okasha

[okashaParticipant]

Hello Mr Peter

Please check the example and tell me where is the problem

thank you
okasha

[Peter StoevKeymaster]

Hi okasha,

In the provided code, you do not set a dataAdapter to the Grid. Your code for applying a dataAdapter was commented.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[okashaParticipant]

Hi Mr Peter

i added the data adapter in the change action of the #section_code combo box so that the data adapter is changed according to the selected section from the combo box and it is working in all browsers except IE

please check it in IE and any other browser (eg firefox)

thank you
okasha

[Peter StoevKeymaster]

Hi okasha,

The sample that you sent is not working in any browser due to the wrong initialization of the Grid.

I fixed your code and here is a working result:

$(document).ready(function () {
var combodata = [{ "value": "1", "label": "option1"},{ "value": "2", "label": "option2"}];
var trackSource = {
                    datatype: "json",
                    datafields: [
                    {name: 'value'},
                    {name: 'label'}
                    ],
                    id: 'value',
                    localdata: combodata
                };
                var trackDataAdapter = new $.jqx.dataAdapter(trackSource);
                $("#section_code").jqxComboBox({
                    width: 200,
                    height: 25,
                    selectedIndex: 0,
                    source: trackDataAdapter,
                    displayMember: 'label',
                    valueMember: 'value'
                });   
 $("#section_code").jqxComboBox("selectItem", 2);
$('#section_code').bind('change', function (event) 
{ 
    
    var section_code=$("#section_code").jqxComboBox('getSelectedItem');
    selected_value=section_code.value;
    var data = [{ "photo_code": "1", "photo_desc": "desc"}];
            var source =
            {
                datatype: "json",
                datafields: [
					 {name: 'photo_code'},
                                         
					 {name: 'photo_desc'}
					
					 
                ],data: {
section_code: selected_value
},    localdata: data
                
              
            };
            
    dataadapter = new $.jqx.dataAdapter(source);
        
$("#jqxgrid").jqxGrid({source: dataadapter});       
            
});
    var data = [{ "photo_code": "1", "photo_desc": "desc"}];
            var source =
            {
                datatype: "json",
                datafields: [
					 {name: 'photo_code'},
                                         
					 {name: 'photo_desc'}
					
					 
                ],    localdata: data
                
              
            };
            
    dataadapter = new $.jqx.dataAdapter(source);
 $("#jqxgrid").jqxGrid(
            {
                
                source: dataadapter,
                autoheight: true,
                autorowheight:true,
                pageable: true,
                virtualmode: true,
                rendergridrows: function () {
                    return dataadapter.records;
                },
                columns: [                      
                      {text: "description", datafield: 'photo_desc',cellsalign:'right',align:'right'},
                      {text: "code", datafield: 'photo_code',cellsalign:'right',align:'right'}
                  ]
            });
            
            });

In addition, I tested the above with IE7, IE8, IE9 and IE10 and the Grid is displayed correctly on my side.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Venu GopalParticipant]

hi okasha,
i had similar kind of problem with IE 9, when i open my page with mozilla it is working fine, but in IE, grid is not shown.
i have unchecked the option “Display all websites in compatibility view” under compatibility view settings in tools.
it worked for me.

[Author]

Posts