Grid can not be used in this ('quirks') mode Error

StackOverflow https://stackoverflow.com/questions/17296327

Question

I want to make grid with jquery.I read data from xml. when I run it on Chrome browser it works.But when I try it on IE it gives this error.

Grid can not be used in this ('quirks') mode!

I write this code:

var datasource_url = "/Data/XML_Data.xml";

  function makeID(string) {
    return string.toLowerCase().replace(/\s/g, "_")
  }
  $(function() {
    $.loadGrid = function() {
      $.ajax({
        cache: false,
        url :datasource_url ,
        dataType: "xml",
        success: function(data, res) {

         var colNames = new Array;
          var colIDs = new Array;
          var colModel = new Array;
          var datas = new Array;
          var metadata = $(data).find("metadata").each(function() {
            $(this).find('item').each(function() {
              var colname = $(this).attr('name');
              var colid = makeID($(this).attr('name'));
              var coltype = $(this).attr('type');
              var collength = $(this).attr('length');
              var sorttype = null;
              var sortable = false;
              switch(coltype) {
                case "xs:double":
                  sorttype = "float";
                  sortable = true;
                  break;
                case "xs:string":
                default:
                  sorttype = "text";
                  sortable = true;
                  break;

              }
              colNames[colNames.length] = colname;
              colIDs[colIDs.length] = colid;
              colModel[colModel.length] = {name: colid, index: colid, width: 200, align: "center", sorttype: sorttype, sortable: sortable}
            });
          });
          var options = {
            datatype: "local",
            height: 500,
            colNames: colNames,
            colModel: colModel,
            multiselect: false,
            caption : "Data Grid",
            rowNum : 1000,
            rownumbers: true
          }
          $("#datagrid").jqGrid(options);
          $(data).find("data").each(function() {
            var i=0;
            $(this).find('row').each(function() {
              var idx = 0;
              var rowdata = new Object;
              $(this).find('value').each(function() {
                var ccolid = colIDs[idx];
                if (ccolid) {
                  rowdata[ccolid] = $(this).text();
                }
                idx++;
              })
              $("#datagrid").jqGrid('addRowData', i+1, rowdata)
              i++
            })
          })

        }
      })
    }
    $.loadGrid();
    /*
    $("#btnLoadGrid").click(function() { 
      //$(this).attr("disabled", "disabled")
      $.loadGrid();

    })
    */
  });


</script>

How can I fix this.

Was it helpful?

Solution

I recommend you to include

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

at the beginning of <head> of your XHTML document. It will switch off the "Compatibility View" for the page. Some time ago I included the line in all code examples which I found on the official jqGrid wiki (see here) because the problem which you describe is common.

OTHER TIPS

As mentioned in the comments, you'll need a correct doctype to force IE out of quirks mode. It looks like you are using an XHTML doctype, which is not compatible with some aspects of HTML5. Try using the HTML5 doctype on the first line of your HTML page: <!DOCTYPE html>

Here's a good article on the different doctypes and their relationship to HTML5.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top