I have the following code. It works fine on firefox but IE8 is very slow. I have managed to identify that whatever is making IE slow is in the fnDrawCallback function. Can you help me rewrite or find out why the script gets slow? Thanks.
<script type="text/javascript"> $(function () { var my_sRangeFormat = 'Enter a start date (e.g. mm/dd/yyyy) {from} Enter an end date (e.g. mm/dd/yyyy) {to}'; var url = '<%= Url.Action("LabTableAjaxHandler", "Document") %>'; $('#labTbl').dataTable({ bDeferRender: true, bJQueryUI: true, bProcessing: true, bServerSide: true, bStateSave: true, fnStateSave: function (oSettings, oData) { localStorage.setItem('DataTables_labTbl', JSON.stringify(oData)); }, fnStateLoad: function (oSettings) { return JSON.parse(localStorage.getItem('DataTables_labTbl')); }, fnServerParams: function (aoData) { aoData.push({ "name": "TableType", "value": "Lab" }); }, sAjaxDataProp: "aaData", sPaginationType: 'full_numbers', sAjaxSource: url, fnDrawCallback: function () { $('#labTbl tr').each(function () { $(this).find('select.catagorycombo').selectmenu({ menuWidth: 200, select: function (event, options) { var td = $(this).parent().parent(); var combo = td.next("td").find("select.testcombo").selectmenu(); var url = '<%= Url.Action("GetTestListDropDown", "Document") %>'; var contextKey = options.value; var text = $("option:selected", $(this)).text(); var length = combo.find('option').length; $.ajax({ type: "POST", url: url, data: { contextKey: contextKey, catagory: text }, success: function (data, textStatus, jqXHR) { var options = []; $.each(data, function (i, el) { options.push("<option value='" + el["Value"] + "'>" + el["Text"] + "</option>"); }); combo.append(options.join("")).selectmenu(); combo.selectmenu('enable'); } }); } }); $(this).find('select.testcombo').selectmenu({ menuWidth: 200 }); }); }, aoColumnDefs: [ { aTargets: [0], bSortable: false, mDataProp: function (aaData) { var display_value = '<a href="#" class="doclist-view-detail">View</a>'; return display_value; } }, { aTargets: [1], sType: 'date', mDataProp: function (oObj) { return formatJsonDate(oObj[0], 'MM/DD/YYYY hh:mm'); } }, { aTargets: [2], mDataProp: function (oObj) { return oObj[1] } }, { aTargets: [3], mDataProp: function (oObj) { return oObj[2] } }, { aTargets: [4], mDataProp: function (oObj) { return oObj[3] } }, { aTargets: [5], bSortable: false, mDataProp: function (oObj) { var r = '<div class="pcatagorycombo"><select class="catagorycombo" style="width:120px;" ><option value="' + oObj[4] + '">Select All</option></select></div>'; return r; } }, { aTargets: [6], bSortable: false, mDataProp: function (oObj) { var r = '<div class="test"><select class="testcombo" disabled="disabled" style="width:120px;"><option value="' + oObj[4] + '">Select All</option></select></div>'; return r; } } ] }) .columnFilter({ sPlaceHolder: 'head:after', aoColumns: [ null, { type: 'date-range', sRangeFormat: my_sRangeFormat, displayBlock: true, showLabels: false, showToolTips: true }, { type: "text" }, null, null, null, null ] }).fnSetFilteringDelay(); }); $('body').on('click', '.pcatagorycombo', function (e) { var url = '<%= Url.Action("GetCatagoryListDropDown", "Document") %>'; var combo = $(this).find('select.catagorycombo').selectmenu(); var contextKey = combo.val(); var length = combo.find('option').length; var loading = "<option value='Loading'>Loading...</option>"; if (length == 1) { combo.append(loading).selectmenu(); $.ajax({ type: "POST", url: url, data: { contextKey: contextKey }, success: function (data, textStatus, jqXHR) { var options = []; $.each(data, function (i, el) { options.push("<option value='" + el["Value"] + "'>" + el["Text"] + "</option>"); }); combo.find('[value="Loading"]').remove(); combo.selectmenu(); combo.append(options.join("")).selectmenu(); } }); } else { return false; } }); $('body').on('click', '.doclist-view-detail', function (e) { var catagoryCombo = $(this).closest('tr').find('.catagorycombo'); var testCombo = $(this).closest('tr').find('.testcombo'); var contextKey = catagoryCombo.find('option:selected').val(); var catagory = catagoryCombo.find('option:selected').text() == "Select All" ? "all" : catagoryCombo.find('option:selected').text(); var test = testCombo.find('option:selected').text() == "Select All" ? "all" : testCombo.find('option:selected').text(); var url = '<%= Url.Action("detailslab", "document") %>/lab?contextKey=' + contextKey + '&catagory=' + catagory + '&test=' + test; window.location = url; }); </script>