jQuery UI Widgets Forums Grid Problems with IE9 and JSON, no problems in chrome!

Tagged: , ,

This topic contains 4 replies, has 2 voices, and was last updated by  rchasqueira 11 years, 10 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author

  • rchasqueira
    Participant

    Hi,

    I was testing my jqxgrid with chrome and it works like a charme (really great job!!!), but now i’m testing it with IE 9, and the same page doesn’t have the same result. I’m getting the results from json, that gives me an array of two records. In chrome if i click form filter button with no specific filter, it shows the two lines, on IE no result found…

    If i filter with ID=’%1%’, chrome gives two records (correct), IE just gives one record (wrong). The array it’s well constructed, it’s just IE that is messing the grid.

    I also have another grid that open’s on first grid rowselect, in chrome it shows two relational lines(correct), in IE none (wrong)…

    Can you please help me? Did i forgot something or it’s an IE bug that you are aware of?

    Thanks in advanced!

    This is part of the code:

            $(document).ready(function () {
                var theme = "";
    			
    			$("#jqxgrid").css("cursor", "pointer");
    			
    			$("#NewEquip").click(function() {
                    $("#NewEquip").attr('href','GToolsEquipDetail.cshtml');
    				$("#NewEquip").colorbox({iframe:true, width:"1020px", height:"450px"});
                });
    
                $("#EditEquip").click(function() {
                
                    var rowID = $("#jqxgrid").jqxGrid('selectedrowindexes');
                    if (rowID!=""){
                        $("#EditEquip").attr('href','GToolsEquipDetail.cshtml?ID=' + $("#ID_EQUIP").val());
    					$("#EditEquip").colorbox({iframe:true, width:"1020px", height:"450px"});
                    }
    				else{
    					alert("Não existe nenhum equipamento seleccionado");
    				}
                });
    			
    			$("#DelEquip").click(function () {
    			
    				var rowID = $("#jqxgrid").jqxGrid('selectedrowindexes');
    				if (rowID!=""){
    					var row = $("#jqxgrid").jqxGrid('getrowdata', rowID);
    					if (confirm("Tem a certeza que deseja eliminar o equipamento " + row.ID_EQUIP + " - " + row.DESCRICAO + " ?")){
    						$("#CenterContent").load('GToolsActions.cshtml?op=1&EQUIP=' + row.ID_EQUIP);
    					}
    				}
    				else{
    					alert("Não existe nenhum equipamento seleccionado");
    				}
    			});
    
                $("#tabs li").click(function() {
    
                    if (!$(this).hasClass('active')){
    
    		            //	First remove class "active" from currently active tab
    		            $("#tabs li").removeClass('active');
    
    		            //	Now add class "active" to the selected/clicked tab
    		            $(this).addClass("active");
    
    		            //	Hide all tab content
    		            $(".tab_content").hide();
    
    		            //	Here we get the href value of the selected tab
    		            var selected_tab = $(this).find("a").attr("href");
    
    		            //	Show the selected tab content
    		            $(selected_tab).fadeIn();
                        $(selected_tab).css("visibility", "visible");
    
    		            //	At the end, we add return false so that the click on the link is not executed
    		            return false;
                    }   
    	        });
    
                var source =
                {
                    datatype: "json",
                    datafields: [
                                { name:'ID_EQUIP', type: 'String' },
                                { name:'DESCRICAO', type: 'String' },
                                { name:'NUM_AUXILIAR', type: 'String' },
                                { name:'N_SERIE', type: 'String' },
                                { name:'ID_TIPO_EQUIP', type: 'String' },
                                { name:'TIPO_EQUIP', type: 'String' },
                                { name:'ACTIVO', type: 'String' },
                                { name:'CATEGORIA', type: '' },
                                { name:'DELEGACAO', type: '' },
                                { name:'DT_ABATE', type: '' },
                                { name:'DT_ENTRADA', type: '' },
                                { name:'EMAIL_DELEGADO', type: '' },
                                { name:'EMAIL_SUPERVISOR', type: '' },
                                { name:'EMAIL_UTILIZADOR', type: '' },
                                { name:'ENTIDADE_CERTIF', type: '' },
                                { name:'ID_CATEGORIA', type: '' },
                                { name:'ID_DELEGACAO', type: '' },
                                { name:'ID_DELEGADO', type: '' },
                                { name:'ID_ENT_CERTIF', type: '' },
                                { name:'ID_MARCA', type: '' },
                                { name:'ID_MODELO', type: '' },
                                { name:'ID_SECTOR', type: '' },
                                { name:'ID_SUPERVISOR', type: '' },
                                { name:'ID_UTILIZADOR', type: '' },
                                { name:'INSPECCAO', type: '' },
                                { name:'LOGISTICA', type: '' },
                                { name:'MARCA', type: '' },
                                { name:'MODELO', type: '' },
                                { name:'NOME_DELEGADO', type: '' },
                                { name:'NOME_SUPERVISOR', type: '' },
                                { name:'NOME_UTILIZADOR', type: '' },
                                { name:'OBSERVACOES', type: '' },
                                { name:'PERIODICIDADE', type: '' },
                                { name:'PRECO', type: '' },
                                { name:'SECTOR', type: '' },
                                { name:'SH', type: '' },
     { name: 'SH_DESC', type: ''} 
                    ],
                    url: 'Xml.cshtml?VID=8&filtrar=1'
    
                };
    
                        var dataAdapter = new $.jqx.dataAdapter(source);
    
    			
                $("#jqxgrid").jqxGrid(
                {
                    source: dataAdapter,
                    theme: 'classic',
                    width: '99%',
                    theme: theme,
                    pagesize: 5,
                        
                            pageable: true,
                            pagesizeoptions: ['5','10'], 
                            autoheight: true,
                        
                    sortable: true,
                    filterable: true,
                    //showfilterrow: true,
                    altrows: true,
                    columnsresize: true,
                    selectionmode: 'singlerow',
    
                    columns: [
    { text: 'ID Equip', filtertype: 'textbox',  datafield: 'ID_EQUIP',  width: '10%', cellsalign: 'center', align: 'center'}, { text: 'Descrição', filtertype: 'textbox',  datafield: 'DESCRICAO',  width: '30%', cellsalign: 'left', align: 'center'}, { text: 'Nº Aux.', filtertype: 'textbox',  datafield: 'NUM_AUXILIAR',  width: '10%', cellsalign: 'center', align: 'center'}, { text: 'Nº Série', filtertype: 'textbox',  datafield: 'N_SERIE',  width: '15%', cellsalign: 'center', align: 'center'}, { text: 'Tipo', filtertype: 'textbox',  datafield: 'ID_TIPO_EQUIP',  width: '8%', cellsalign: 'center', align: 'center'}, { text: 'Descrição', filtertype: 'textbox',  datafield: 'TIPO_EQUIP',  width: '20%', cellsalign: 'center', align: 'center'}, { text: 'Activo', filtertype: 'textbox',  datafield: 'ACTIVO',  width: '7%', cellsalign: 'center', align: 'center'}, {hidden:'true',  text: 'CATEGORIA', filtertype: '',  datafield: 'CATEGORIA',  width: '10%', cellsalign: '', align: ''}, {hidden:'true',  text: 'DELEGACAO', filtertype: '',  datafield: 'DELEGACAO',  width: '10%', cellsalign: '', align: ''}, {hidden:'true',  text: 'DT_ABATE', filtertype: '',  datafield: 'DT_ABATE',  width: '10%', cellsalign: '', align: ''}, {hidden:'true',  text: 'DT_ENTRADA', filtertype: '',  datafield: 'DT_ENTRADA',  width: '10%', cellsalign: '', align: ''}, {hidden:'true',  text: 'EMAIL_DELEGADO', filtertype: '',  datafield: 'EMAIL_DELEGADO',  width: '10%', cellsalign: '', align: ''}, {hidden:'true',  text: 'EMAIL_SUPERVISOR', filtertype: '',  datafield: 'EMAIL_SUPERVISOR',  width: '10%', cellsalign: '', align: ''}, {hidden:'true',  text: 'EMAIL_UTILIZADOR', filtertype: '',  datafield: 'EMAIL_UTILIZADOR',  width: '10%', cellsalign: '', align: ''}, {hidden:'true',  text: 'ENTIDADE_CERTIF', filtertype: '',  datafield: 'ENTIDADE_CERTIF',  width: '10%', cellsalign: '', align: ''}, {hidden:'true',  text: 'ID_CATEGORIA', filtertype: '',  datafield: 'ID_CATEGORIA',  width: '10%', cellsalign: '', align: ''}, {hidden:'true',  text: 'ID_DELEGACAO', filtertype: '',  datafield: 'ID_DELEGACAO',  width: '10%', cellsalign: '', align: ''}, {hidden:'true',  text: 'ID_DELEGADO', filtertype: '',  datafield: 'ID_DELEGADO',  width: '10%', cellsalign: '', align: ''}, {hidden:'true',  text: 'ID_ENT_CERTIF', filtertype: '',  datafield: 'ID_ENT_CERTIF',  width: '10%', cellsalign: '', align: ''}, {hidden:'true',  text: 'ID_MARCA', filtertype: '',  datafield: 'ID_MARCA',  width: '10%', cellsalign: '', align: ''}, {hidden:'true',  text: 'ID_MODELO', filtertype: '',  datafield: 'ID_MODELO',  width: '10%', cellsalign: '', align: ''}, {hidden:'true',  text: 'ID_SECTOR', filtertype: '',  datafield: 'ID_SECTOR',  width: '10%', cellsalign: '', align: ''}, {hidden:'true',  text: 'ID_SUPERVISOR', filtertype: '',  datafield: 'ID_SUPERVISOR',  width: '10%', cellsalign: '', align: ''}, {hidden:'true',  text: 'ID_UTILIZADOR', filtertype: '',  datafield: 'ID_UTILIZADOR',  width: '10%', cellsalign: '', align: ''}, {hidden:'true',  text: 'INSPECCAO', filtertype: '',  datafield: 'INSPECCAO',  width: '10%', cellsalign: '', align: ''}, {hidden:'true',  text: 'LOGISTICA', filtertype: '',  datafield: 'LOGISTICA',  width: '10%', cellsalign: '', align: ''}, {hidden:'true',  text: 'MARCA', filtertype: '',  datafield: 'MARCA',  width: '10%', cellsalign: '', align: ''}, {hidden:'true',  text: 'MODELO', filtertype: '',  datafield: 'MODELO',  width: '10%', cellsalign: '', align: ''}, {hidden:'true',  text: 'NOME_DELEGADO', filtertype: '',  datafield: 'NOME_DELEGADO',  width: '10%', cellsalign: '', align: ''}, {hidden:'true',  text: 'NOME_SUPERVISOR', filtertype: '',  datafield: 'NOME_SUPERVISOR',  width: '10%', cellsalign: '', align: ''}, {hidden:'true',  text: 'NOME_UTILIZADOR', filtertype: '',  datafield: 'NOME_UTILIZADOR',  width: '10%', cellsalign: '', align: ''}, {hidden:'true',  text: 'OBSERVACOES', filtertype: '',  datafield: 'OBSERVACOES',  width: '10%', cellsalign: '', align: ''}, {hidden:'true',  text: 'PERIODICIDADE', filtertype: '',  datafield: 'PERIODICIDADE',  width: '10%', cellsalign: '', align: ''}, {hidden:'true',  text: 'PRECO', filtertype: '',  datafield: 'PRECO',  width: '10%', cellsalign: '', align: ''}, {hidden:'true',  text: 'SECTOR', filtertype: '',  datafield: 'SECTOR',  width: '10%', cellsalign: '', align: ''}, {hidden:'true',  text: 'SH', filtertype: '',  datafield: 'SH',  width: '10%', cellsalign: '', align: ''}, {hidden:'true',  text: 'SH_DESC', filtertype: '',  datafield: 'SH_DESC',  width: '10%', cellsalign: '', align: ''}
                    ]
                });
                
                $("#excelExport").click(function () {
                    $("#jqxgrid").jqxGrid('exportdata', 'xls', 'jqxGrid');           
                });
    
                $("#csvExport").click(function () {
                    $("#jqxgrid").jqxGrid('exportdata', 'csv', 'jqxGrid');
                });
    .... 
    
    This is the json result:
    
    [{"ID_EQUIP":"D000001","DESCRICAO":"sadasdas","NUM_AUXILIAR":"123123","N_SERIE":"123123","ID_TIPO_EQUIP":"ANR","TIPO_EQUIP":"Analizador de Rede","ACTIVO":"S","CATEGORIA":"Dispositivos de Monitorização e Medição","DELEGACAO":"Algarve","DT_ABATE":null,"DT_ENTRADA":"2013-01-17","EMAIL_DELEGADO":null,"EMAIL_SUPERVISOR":"Alberto.Proenca@otis.com","EMAIL_UTILIZADOR":"Rui.Abreu@otis.com","ENTIDADE_CERTIF":"OTIS","ID_CATEGORIA":"1","ID_DELEGACAO":"41","ID_DELEGADO":null,"ID_ENT_CERTIF":"3","ID_MARCA":"1","ID_MODELO":"2","ID_SECTOR":"MT","ID_SUPERVISOR":"06110","ID_UTILIZADOR":"01125","INSPECCAO":"N","LOGISTICA":"N","MARCA":"Amprobe","MODELO":"RS-5","NOME_DELEGADO":null,"NOME_SUPERVISOR":"ALBERTO DOS SANTOS PROENCA","NOME_UTILIZADOR":"ALCINO RUI PINTO ARAUJO ABREU","OBSERVACOES":"","PERIODICIDADE":12,"PRECO":null,"SECTOR":"Montagem","SH":"9021","SH_DESC":"PROMOCAO E PUBLICIDADE"},{"ID_EQUIP":"F000001","DESCRICAO":"sdfsdfdsf","NUM_AUXILIAR":"324234234","N_SERIE":"21312313","ID_TIPO_EQUIP":"ARC","TIPO_EQUIP":"Ar Condicionado","ACTIVO":"S","CATEGORIA":"Ferramentas Elétricas","DELEGACAO":"Atelda","DT_ABATE":null,"DT_ENTRADA":"2013-01-07","EMAIL_DELEGADO":null,"EMAIL_SUPERVISOR":"antonio.m.santos@otis.com","EMAIL_UTILIZADOR":"Rui.Abreu@otis.com","ENTIDADE_CERTIF":"ISQ","ID_CATEGORIA":"2","ID_DELEGACAO":"16","ID_DELEGADO":null,"ID_ENT_CERTIF":"1","ID_MARCA":"2","ID_MODELO":"3","ID_SECTOR":"LG","ID_SUPERVISOR":"06105","ID_UTILIZADOR":"01125","INSPECCAO":"N","LOGISTICA":"N","MARCA":"Beha","MODELO":"UNITEST","NOME_DELEGADO":null,"NOME_SUPERVISOR":"ANTONIO MANUEL FILIPE DOS SANTOS","NOME_UTILIZADOR":"ALCINO RUI PINTO ARAUJO ABREU","OBSERVACOES":"","PERIODICIDADE":12,"PRECO":null,"SECTOR":"Logística","SH":"902","SH_DESC":"COMUNICACAO E IMAGEM"}]
    

    Peter Stoev
    Keymaster

    Hi rchasqueira,

    If you enter the following string in the filter textbox:

    “ID=’%1%’”, the filter’s value would be set to “ID=’%1%’” .

    For example, for the default “contains” filter condition, the Grid will loop through all cells and will check whether the current cell value contains the “ID=’%1%’” string. That’s how it works in all browsers.

    Btw. type: ” is invalid type and type: ‘String’ should be written as type: ‘string’.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    rchasqueira
    Participant

    Hi Peter,

    Thanks for your response, but i think i didn’t explain my self very well.

    I have a form in the page with some fields to filter the results to list on the grid. When i click the submit button, i build a string a that I put in JQXGRID URL parameter. This string calls a page that reads the parameters, queries the database and returns an JSON array to build the grid.

    The GRID is build with the result from the form and then i can use the filter of the jqxgrid.

    There is no problem with the filter, the result is correct and well formed and chrome handles with perfectly, but IE9 in some cases doesn’t returns any value at all…

    I can’t understand this…I have browser console opened in both browsers, but there’s no error return in either one…


    Peter Stoev
    Keymaster

    Hi rchasqueira,

    IE caches Ajax calls so that may be an issue, if you dynamically make such calls. In the “source” object you can set “cache: false”.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    rchasqueira
    Participant

    Hi Peter!

    Sorry for the delay.

    That was the case, with “Cache: false”, my problems are gone.

    Thanks for your help. You rock!

    Ricardo

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.