datatable editable is having issue with IE

Question

I am working on SharePoint 2010 with spservices, datatable, jeditable and datatable.editable. My version of the frameworks are as follows

1. IE 9, 10, 11
2. jQuery 1.7.2
3. spservices 2013.01
4. datatable 1.9.4
5. datatable editable 2.3.3
6. jedittable N/A

Now issue is editing of datatabale is working good in FireFox and Chrome but it is not working in IE when I blur from element it is not disappearing.

My code is as follows

  <link rel="stylesheet" type="text/css" href="/sites/MS/Style%20Library/en-us/CSS/forms-simple.css"/>

  <script type="text/javascript" src="/sites/ms/Style%20Library/en-us/JS/jquery.min.js"></script>
  <script type="text/javascript" src="/sites/ms/Style%20Library/en-us/JS/jquery.SPServices-2013.01.min.js"></script>
 <script type="text/javascript" src="/sites/ms/Style%20Library/MarketSurveillance.js"></script>
  <script type="text/javascript" src="/sites/MS/Style%20Library/ar-sa/JS/jquery.dataTables.min.js"></script>
 <script type="text/javascript" src="/sites/MS/Style%20Library/en-us/JS/jquery.jeditable.mini.js"></script>
<script type="text/javascript" src="/sites/MS/Style%20Library/en-us/JS/jquery.dataTables.editable.js"></script>
 <script type="text/javascript">
 $(document).ready(function () {
var oTable, anOpen = [], sImageUrl = "/sites/MS/Style%20Library/Images/", sInner;
var viewFields = "<FieldRef Name='ID' /><FieldRef Name='Title' /><FieldRef Name='TelephoneNo' /><FieldRef Name='PlaceOfProduct' />";
viewFields += "<FieldRef Name='CategoryID' /><FieldRef Name='SubCategoryID' /><FieldRef Name='Status' />";
populateGrid("/sites/ms/", "ComplaintForm", viewFields, "", handleData);

oTable = $("#tbComplaintForm").dataTable({
  "bProcessing": true,
  "aoColumns": [
     {
       "bSortable": false,
       "mDataProp": null,
       "mData": null,
       "sClass": "control center",
       "sDefaultContent": '<img src="' + sImageUrl + 'details_open.png">'
     },
    null ,
    null ,
    null ,
    null ,
    null ,
    null
  ]
});

oTable.makeEditable({
  "aoColumns": [
    null, null, null, null, null, null,
    {
      "sName": "Status",
      "indicator": "Approve/Reject Complaint Status",
      "tooltip": "Approve/Reject",
      "loadtext": "loading...",
      "type": "select",
      "onblur": "submit",
      "data": "{'0':' ', '3':'Approved','4':'Rejected'}",
      "sUpdateURL": function (value, settings) {
        var columnId = oTable.fnGetPosition(this)[2];
        var dataArray = [];
        dataArray.push([oTable.fnSettings().aoColumns[columnId].sTitle, value]);
        itemOperation("/sites/ms/", "ComplaintForm", "Update", dataArray, $(this).closest('tr').attr('id'));
        return value;
      }
    }
  ],
  "oEditableSettings": { event: 'click' }
});

$('#tbComplaintForm td.control').live('click', function () {
  var nTr = this.parentNode;
  var i = $.inArray(nTr, anOpen);

  if (i === -1) {
    $('img', this).attr('src', sImageUrl + "details_close.png");
    var nDetailsRow = oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details');
    $('div.innerDetails', nDetailsRow).slideDown();
    anOpen.push(nTr);
  }
  else {
    $('img', this).attr('src', sImageUrl + "details_open.png");
    $('div.innerDetails', $(nTr).next()[0]).slideUp(function () {
      oTable.fnClose(nTr);
      anOpen.splice(i, 1);
    });
  }
  });
 });

   function fnFormatDetails(oTable, nTr) {
var oData = oTable.fnGetData(nTr);
var _viewFields = "<FieldRef Name='Comments' /><FieldRef Name='Suggestions' />";
var qry = "<Query><Where><Eq><FieldRef Name=\"ID\" /><Value Type=\"Counter\">" + $(nTr).attr('id') + "</Value></Eq></Where></Query>";
populateGrid("/sites/ms/", "ComplaintForm", _viewFields, qry, innerData);
var sOut = sInner;
return sOut;
}

  function innerData(xData, Status) {
sInner = "";
sInner += '<div class="innerDetails"><table cellpadding="7" cellspacing="0" border="0" style="padding-left:75px;">';
if (Status == "success") {
  $(xData.responseXML).SPFilterNode("z:row").each(function () {
    sInner += '<tr><td>Comment:</td><td>' + $(this).attr("ows_Comments") + '</td></tr>';
    sInner += '<tr><td>Suggestions:</td><td>' + $(this).attr("ows_Suggestions") + '</td></tr>';
  });
}
sInner += '</table></div>';
 }

  function handleData(xData, Status) {
var datarows = "<tbody>";
var query = "";
if (Status == "success") {
  $(xData.responseXML).SPFilterNode("z:row").each(function () {
    datarows += "<tr id=" + $(this).attr("ows_ID") + "><td class='read_only'></td><td>" + $(this).attr("ows_Title") + "</td>";
    datarows += "<td>" + $(this).attr("ows_TelephoneNo") + "</td>";
    query = "<Query><Where><Eq><FieldRef Name=\"ID\" /><Value Type=\"Text\">" + $(this).attr("ows_CategoryID").replace(".00000000000000", "") + "</Value></Eq></Where></Query>";
    datarows += "<td>" + getSingleItem("http://sp2010-base", "SAS_Categories", "Category_Title_EN", query) + "</td>";
    query = "<Query><Where><Eq><FieldRef Name=\"ID\" /><Value Type=\"Text\">" + $(this).attr("ows_SubCategoryID").replace(".00000000000000", "") + "</Value></Eq></Where></Query>";
    datarows += "<td>" + getSingleItem("http://sp2010-base", "SAS_SubCategories", "Sub_Category_Title_EN", query) + "</td>";
    datarows += "<td>" + $(this).attr("ows_PlaceOfProduct") + "</td>";
    if ($(this).attr("ows_Status") == 0)
      datarows += "<td></td></tr>";
    else if ($(this).attr("ows_Status") == 1)
      datarows += "<td>In Plane</td></tr>";
    else if ($(this).attr("ows_Status") == 2)
      datarows += "<td>Checked</td></tr>";
    else if ($(this).attr("ows_Status") == 3)
      datarows += "<td>Approved</td></tr>";
    else if ($(this).attr("ows_Status") == 4)
      datarows += "<td>Rejected</td></tr>";
  });
  datarows += "</tbody>";
  $("#tbComplaintForm").append(datarows);
}
}

Complaint Name Telephone No. Category SubCategory Place Of Product Status

So what can be issue with IE

Answer 1

This may not be the answer you need, but according to your last comment, It looks like you have code that successfully works when IE's JavaScript debugger is running but not normally. This can be due to any console.log's or other kinds of "debugger only js code". Here is a possible answer to your issue: My application works in IE only in debug mode (works in other browsers)