Included below is my markup for a page I have using a FineUploader control. I've abridged the code to only include the important parts. This page is two parts that both reside in an UpdatePanel. The first part is a simple table that contains rows of data, the last column of each row is a asp:LinkButton. The second part is a nested UpdatePanel that contains a div in which the FineUploader control is rendered when the page is first loaded (because the FineUploader control is strictly javascript and does not further exist in the code-behind). Also, when the LinkButton is pressed this.Page.IsPostBack is false.
The problem is that any time a LinkButton in the first part of the page is pressed, the FineUploader control simply disappears. I cannot get the code to re-render from the code-behind (with things like ClientScript.RegisterStartupScript/RegisterClientScriptBlock). I've also tried various setups with wrapping Part 1 with an UpdatePanel but still it wipes out my FineUploader control. I'm thinking I'm using update panels incorrectly, but am not sure (ASP.NET is not usually what I work in).
As an added detail, if I click a button inside the Part 2 nested UpdatePanel, my FineUploader control magically reappears.
Markup (for visibility important parts are marked with multi-line, mostly empty comment blocks):
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Setup.aspx.cs" Inherits="Some_Portal.Pages.Setup" %>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<div id="locationInfo">
<br class="clearfloat" />
<!-- Main Screen Display breaking down the types of information -->
<asp:UpdatePanel runat="server" ID="updExtensions">
<Triggers>
<asp:PostBackTrigger ControlID="btnDownloadCall" />
</Triggers>
<ContentTemplate>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<style type='text/css'>
.filename {
visibility: hidden;
height: 0;
width: 0;
display: block;
}
</style>
<!-- This portion is to enable the file uploader: -->
<link href="../js/fineuploader/fineuploader-3.5.0.css" rel="stylesheet">
<script type="text/javascript" src="../js/fineuploader/fineuploader-3.5.0.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var uploader = new qq.FineUploader({
element: $('#fine-uploader')[0],
request: {
endpoint: 'AccountSetup.aspx'
},
autoUpload: true,
multiple: false,
text: {
uploadButton: '<asp:Button ID="fineUploadButton" runat="server" CssClass="button" style="width:6;5" Text="Browse" />'
},
validation: {
allowedExtensions: ['mp3', 'wav']
}
});
});
</script>
<!-- -->
<!-- -->
<!-- Part 1 -->
<!-- -->
<!-- -->
<table width="100%" cellpadding="0" border="0px" style="border-color:white;">
<tr>
<th>Extensions</th>
</tr>
<tr>
<td style="width: 100%; border:0; border-bottom-color:white; border-bottom-style:none;">
<asp:DataGrid ID="dgExtensions" runat="server" AllowSorting="true" AllowPaging="true" PagerStyle-BorderStyle="None" PagerStyle-BorderColor="white" PagerStyle-BorderWidth="0px"
AutoGenerateColumns="false" PageSize="10" DataKeyField="id" OnPageIndexChanged="dgExtensions_OnPageIndexChanged"
PagerStyle-Mode="NumericPages" PagerStyle-HorizontalAlign="Right" OnSortCommand="dgExtensions_OnSortCommand"
Width="100%" BorderColor="White"
HeaderStyle-CssClass="GridHeader"
ItemStyle-CssClass="GridItem"
AlternatingItemStyle-CssClass="GridAltItem">
<Columns>
<asp:BoundColumn DataField="number" HeaderText="Number" SortExpression="number">
<ItemStyle HorizontalAlign="center" Width="8%" />
<HeaderStyle HorizontalAlign="center" Width="8%" />
</asp:BoundColumn>
<asp:BoundColumn DataField="extensionType" HeaderText="Type" SortExpression="extensionType">
<ItemStyle HorizontalAlign="center" Width="18%" />
<HeaderStyle HorizontalAlign="center" Width="18%" />
</asp:BoundColumn>
<asp:TemplateColumn HeaderText="Description" SortExpression="description">
<HeaderStyle Width="25%" CssClass="dgLeftPad" />
<ItemStyle Width="25%" CssClass="dgLeftPad" />
<ItemTemplate>
<asp:Literal runat="Server" ID="litExtensionDescription" Text='<%# Eval("description").ToString() %>' />
<asp:HiddenField runat="server" ID="hidExtensionID" Value='<%# Eval("id").ToString() %>' />
<asp:HiddenField runat="server" ID="hidExtensionTypeID" Value='<%# Eval("extensiontypeid").ToString() %>' />
<asp:HiddenField runat="server" ID="hidPrevDescription" Value='<%# Eval("description").ToString() %>' />
</ItemTemplate>
</asp:TemplateColumn>
<asp:BoundColumn DataField="status" HeaderText="Status" SortExpression="status">
<ItemStyle HorizontalAlign="center" Width="24%" />
<HeaderStyle HorizontalAlign="center" Width="24%" />
</asp:BoundColumn>
<asp:TemplateColumn HeaderText="">
<HeaderStyle Width="10%" />
<ItemStyle Width="10%" HorizontalAlign="center" />
<ItemTemplate>
<!-- -->
<!-- -->
<!-- Clicking this makes the Fine -->
<!-- Uploader control go away. -->
<!-- -->
<!-- -->
<asp:LinkButton runat="Server" ID="lbEditExtension" CommandArgument='<%# Eval("id").ToString() %>'
OnCommand="EditExtension" Text="Edit" Visible='<%# SetEditEnabled(Eval("extensiontypeid").ToString()) %>'/>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
<HeaderStyle BackColor="#eeeeee" />
<PagerStyle HorizontalAlign="Right" Mode="NumericPages" />
</asp:DataGrid>
</td>
</tr>
<tr>
<asp:Panel runat="server" ID="pnlNoExtensions">
<td colspan="3" align="center" style="color: Red;">
There are no extensions established for your account
</td>
</asp:Panel>
</tr>
</table>
<br />
<!-- -->
<!-- -->
<!-- Part 2 -->
<!-- -->
<!-- -->
<asp:Panel runat="server" ID="Panel1" Width="100%">
<asp:UpdatePanel runat="server" ID="updRouteGroup" UpdateMode="Conditional">
<Triggers>
<asp:PostBackTrigger ControlID="btnDisableOnHold" />
</Triggers>
<ContentTemplate>
<asp:Panel ID="pnlImpExcel" runat="Server" >
<div style="width:100%">
<table colspan="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
<th colspan="3">
On Hold Music
</th>
</tr>
<tr>
<!-- -->
<!-- FineUploader Control -->
<!-- -->
<td align="left" valign="middle"><div id="fine-uploader"></div></td>
<td align="center" valign="middle"><asp:Label ID="lblOnHoldFile" runat="server" Text="Current file: none"/></td>
<td align="right" valign="middle"><asp:Button ID="btnDisableOnHold" runat="server" style="margin-right:7px;width:87px;" Text="Disable Hold Music" CssClass="button" OnClick="btnDisableOnHold_OnClick" /></td>
</tr>
<tr><td colspan ="2" align="center"><asp:Label runat="server" ID="lblUploadError" style="color: Red;" Visible="false" /></td></tr>
</table>
</div>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<!-- The Operator Extension Panel -->
<asp:Panel runat="server" ID="Panel2">
<asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="Conditional">
<Triggers>
<asp:PostBackTrigger ControlID="btnOperatorUpdate" />
</Triggers>
<ContentTemplate>
<asp:Panel ID="Panel3" runat="Server" >
<div>
<table colspan="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
<th colspan="3">
Operator Extension
<asp:Button ID="btnOperatorUpdate" runat="server" Text="Save" CssClass="button" style="margin-right:2px;width:87px;float:right;padding-right:10px;" OnClick="btnOperatorUpdate_OnClick" />
<asp:DropDownList runat="Server" ID="ddlOperatorExtension" style="float:right;margin-right:10px;" Width="250px" AutoPostBack="false" />
</th>
</tr>
</table>
<br />
</div>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</asp:Content>
How can I make my FineUploader control stay visible?
EDIT 1: Considering this might be a page life cycle issue, I attempted a manual render of the control by adding the following:
protected void Page_Init(object sender, EventArgs e)
{
string script = "<script type=\"text/javascript\">" +
" alert('oh hey');" +
" $(document).ready(function () {" +
" var uploader = new qq.FineUploader({" +
" element: $('#fine-uploader')[0]," +
" request: {" +
" endpoint: 'AccountSetup.aspx'" +
" }," +
" autoUpload: true," +
" multiple: false," +
" text: {" +
" uploadButton: '<asp:Button ID=\"fineUploadButton\" runat=\"server\" CssClass=\"button\" style=\"width:6;5\" Text=\"Browse\" />'" +
" }," +
" validation: {" +
" allowedExtensions: ['mp3', 'wav']" +
" }" +
" });" +
" });" +
"</script>";
ClientScript.RegisterClientScriptBlock(this.GetType(), "HideOnPostback", script, false);
System.Diagnostics.Debug.WriteLine("Page_Init() run");
}
The result was that if I click the "Edit" LinkButton in Part 1, I see "Page_Init() run" in debug output, but the control still goes away and the "oh hey" js alert is never displayed. However, if I click the other button in Part 2, I see "Page_Init() run" in the debug output, I see the "oh hey" alert and the FineUploader button remains visible.
