TrevorGoodchild TrevorGoodchild - 19 days ago 7x
ASP.NET (C#) Question

jQuery Datatables ASP.NET issue

I'm building a report dashboard using C# and JQuery Datatables. One of the reports on the page contains an update panel with a drop down list. When the user changes the selection, the data refreshes based on the ddl selection. Within each block there is also a link that makes a server side call to export the data to Excel. The problem is that after I click on the Excel export link, the drop down lists lose any functionality, as do the other Excel download links.

Here's my code:

<div id="dTopProducts" class="dashboardDiv" style="height:400px; width:485px; margin-top: 15px; margin-bottom:15px; margin-right: 15px;" runat="server">

<asp:UpdatePanel ID="upProducts" runat="server">
<asp:AsyncPostBackTrigger ControlID="ddlProductsSector" EventName="SelectedIndexChanged" />

<div style="float: left;">
<h2>Top Products&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2>

<div style="float: left; ">
runat="server" />

<asp:UpdateProgress ID="prgProducts" AssociatedUpdatePanelID="upProducts" runat="server">
<epriLoader:Loader runat="server" />


<tr style="padding-top: 5px; padding-bottom: 5px;">
<td style="padding-left: 0px;"><%# Eval("productId") %></td>
<td><%# Eval("productDesc") %></td>
<td style="text-align: right;"><%# Eval("quantity") %></td>

<div style="float: left; padding-top: 25px;">
There are no product records found for the criteria provided

<table id="tblTopProducts" style="width: 100%">

<tr style="padding-bottom: 10px; border: none;">
<th style="text-align: left; border: none; padding-left: 0px;">ID</th>
<th style="text-align: left; border: none; padding-left: 0px;">Name</th>
<th style="text-align: right; border: none;">Quantity</th>

<td style="border: none;"></td>
<td style="border: none;"></td>
<td style="border: none;"></td>

<tbody runat="server">
<asp:PlaceHolder ID="itemPlaceholder" runat="server" />



<%--Link that calls full export from funding page--%>
<a id="aTopProducts" class="invoicesLink" title="Click here to download full report" onserverclick="ExportTopProductsToExcel" runat="server">Download full Report</a>

Here's the jQuery:

function bindTopProductsTable() {

var topProductsTable = $('#tblTopProducts').dataTable(
"scrollY": "225px",
"scrollCollapse": true,

"bSort": true,
"order": [[2, "desc"]],
"paging": false,

dom: '<"toolbar">rt<"floatRight"B><"clear">',

buttons: {
buttons: [
{ extend: 'excel', text: 'Export to Excel', exportOption: { page: 'current' }, footer: true, className: 'productsExportButton' }



This code is in place to handle the update panel:

$(function () {
bindTopProductsTable(); // bind data table on first page load

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(bindTopProductsTable); // bind data table on every UpdatePanel refresh

The error I'm getting is:

Unable to get property 'style' of undefined or null reference.

This is the full error from the IE JS debugger:

j.find("thead, tfoot").remove();j.append(h(a.nTHead).clone()).append(h(a.nTFoot).clone());j.find("tfoot th, tfoot td").css("width","");n=qa(a,j.find("thead")[0]);for(m=0;m<i.length;m++)o=c[i[m]],n[m].style.width=null!==o.sWidthOrig&&""!==o.sWidthOrig?x(o.sWidthOrig):"",o.sWidthOrig&&f&&h(n[m]).append(h("<div/>").css({width:o.sWidthOrig,margin:0,padding:0,border:0,height:1}));if(a.aoData.length)for(m=0;m<i.length;m++)t=i[m],o=c[t],h(Gb(a,t)).clone(!1).append(o.sContentPadding).appendTo(r);h("[name]",

Not surprisingly, this works perfectly fine in Chrome, blows up in IE.


I figured it out. It turns out Sharepoint has a flag to prevent someone from clicking a button twice. I added this code:

function setFormSubmitToFalse() {
    setTimeout(function () { _spFormOnSubmitCalled = false; }, 3000);
    return true;

and it works fine now.