How can I force a jQuery faded-in user control to remain after click events?

Question

I have a basic page to which I'm adding an uploader control based on Bulk Uploader at c-sharpcorner.com and the control is in a jQuery-faded div based on yesdegisn

The Bulk Uploader has two server side event handlers for two buttons--Add and Remove. After clicking these buttons, the fade disappears and you're back to the basic page--if the user needs to add more files, this is not desirable. The ArrayList of files added to a ListBox is maintained, but I have to click the "fade-in" link (LinkButton id="lnkDocumentUpload") to display this window again.

I also need the control to POST to UploadPost.aspx, and it doesn't work either. Clicking the upload button(<asp:Button ID="btnUpload" runat="server" />) has the same behavior described above--fade disappears, data is retained, and no POST. I've surrounded the control with

<form id="frmUpload" action="~/UploadPost.aspx">
...
    <asp:Button ID="btnUpload" runat="server" Text="Upload"/>
</form>

A LinkButton activates the fade in jQuery via

$("#lnkDocumentUpload").click(function() {
    centerPopup();
    loadPopup();
});

MyUploader markup:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="MyUploader.ascx.cs" Inherits="Controls.MyUploader" %>
<form id="frmUpload" action="~/UploadPost.aspx">
<table>
    <tr>
        <td style="width: 163px">
            <span style="font-size: 10pt; font-family: Verdana"><strong>
            Select file to upload:</strong></span></td>
        <td style="width: 324px">
            <asp:FileUpload ID="fUpload" runat="server" />&nbsp;<asp:Button ID="btnAdd" runat="server" Text="Add"
              OnClick="btnAdd_Click" /></td>
    </tr>
    <tr>
        <td style="width: 163px">
        </td>
        <td style="width: 324px">
            <asp:ListBox ID="lstFiles" runat="server" Width="324px"></asp:ListBox>
            </td>
    </tr>
    <tr>
        <td style="width: 163px">
        </td>
        <td style="width: 324px">
            <asp:Button ID="btnRemove" runat="server" Text="Remove" OnClick="btnRemove_Click" />
            &nbsp;<asp:Button ID="btnUpload" runat="server" Text="Upload"/></td>
    </tr>
    <tr>
        <td colspan="2">
            <asp:Label ID="lblMessage" runat="server" Font-Names="Verdana" Font-Size="Small"
              ForeColor="Red"></asp:Label></td>
    </tr>
</table> 

MyUploader codebehind:

public partial class MyUploader : System.Web.UI.UserControl
{

    protected static ArrayList arrFiles = new ArrayList(); // has to be static since Adding and then reusing

    protected void Page_Load(object sender, EventArgs e)
    {
    }

    protected void btnAdd_Click(object sender, EventArgs e)
    {
        try
        {
            if (Page.IsPostBack)
            {
                arrFiles.Add(fUpload);
                lstFiles.Items.Add(fUpload.PostedFile.FileName);
            }
        }
        catch (Exception ex)
        {
            lblMessage.Text = "An error has occured while adding file" + ex.Message;
        }
    }

    protected void btnRemove_Click(object sender, EventArgs e)
    {
        if (lstFiles.Items.Count != 0)
        {
            arrFiles.Remove(fUpload);
            lstFiles.Items.Remove(lstFiles.SelectedItem.Text);
        }
    }
}

Answer 1

I'm guessing your ASP.NET Bulk Uploader control works by doing a postback to the server, which refreshes the page. When the page reloads, the popup is in its default faded-out state.

There might be a property of the Bulk Uploader named something like "AutoSubmit" that you can set to False and then later submit all the user's file choices in bulk.

Or, you can make the uploader's server-side event handler put some data into the page HTML which the client JS can read, and then the client JS can figure out that if the page was reloaded due to an upload, then fade the dialog back in.