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"> <Triggers> <asp:AsyncPostBackTrigger ControlID="ddlProductsSector" EventName="SelectedIndexChanged" /> </Triggers> <ContentTemplate> <div style="float: left;"> <h2>Top Products </h2> </div> <div style="float: left; "> <asp:DropDownList ID="ddlProductsSector" AutoPostBack="true" EnableViewState="true" OnSelectedIndexChanged="ddlProductsSector_SelectedIndexChanged" runat="server" /> </div> <asp:UpdateProgress ID="prgProducts" AssociatedUpdatePanelID="upProducts" runat="server"> <ProgressTemplate> <epriLoader:Loader runat="server" /> </ProgressTemplate> </asp:UpdateProgress> <asp:ListView ID="lvTopProducts" runat="server"> <ItemTemplate> <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> </tr> </ItemTemplate> <EmptyDataTemplate> <div style="float: left; padding-top: 25px;"> There are no product records found for the criteria provided </div> </EmptyDataTemplate> <LayoutTemplate> <table id="tblTopProducts" style="width: 100%"> <thead> <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> </tr> </thead> <tfoot> <tr> <td style="border: none;"></td> <td style="border: none;"></td> <td style="border: none;"></td> </tr> </tfoot> <tbody runat="server"> <asp:PlaceHolder ID="itemPlaceholder" runat="server" /> </tbody> </table> </LayoutTemplate> </asp:ListView> </ContentTemplate> </asp:UpdatePanel> <%--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> </div> 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.
1 Answers
Answers 1
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.
0 comments:
Post a Comment