Modal dialog staying invisible after buttonclick

Question

I've got this modal dialog for uploading files to the form, the problem is the dialog stays invisible even after the button click. Here's the modal window:

<div class="form-horizontal" role="form">
    <div class="modal fade" id="modalFileUpload" runat="server" tabindex="-1" role="dialog" aria-labelledby="lblID" aria-hidden="true" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="fileUploadLabel">
                        <asp:Literal runat="server" ID="ReqNumberText" Text="Искане № - Прикачи файл"></asp:Literal></h4>
                </div>
                <div class="modal-body">
                    <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
                        <ContentTemplate>
                            <asp:PlaceHolder runat="server" ID="PlaceHolder1" Visible="true">
                                <asp:LinkButton ID="btnFileUpload" ClientIDMode="Static" runat="server" class="btn btn-pireus"></asp:LinkButton><span class="glyphicon-plus"> Добавяне</span>
                                <asp:Repeater runat="server" ID="fileUploadRepeater" ClientIDMode="Static">
                                    <%--Header-и--%>
                                    <HeaderTemplate>
                                        <tr>
                                            <th scope="col"></th>
                                            <th scope="col">Тип</th>
                                            <th scope="col">Коментар</th>
                                            <th scope="col">Качил</th>
                                            <th scope="col">Изтегли</th>
                                        </tr>
                                    </HeaderTemplate>
                                    <%--Клетки--%>
                                    <ItemTemplate>
                                        <tr>
                                            <td>
                                                <asp:LinkButton runat="server" ID="fileUploadDelete" ClientIDMode="Static" CssClass="btn btn-pireus"></asp:LinkButton><span class="glyphicon-plus"></span>
                                            </td>
                                            <td>
                                                <asp:Label runat="server" ID="lblType" ClientIDMode="Static" CssClass="input-group-addon input-group-addon-pireus" Text=""></asp:Label>
                                            </td>
                                            <td>
                                                <asp:Label runat="server" ID="lblComment" ClientIDMode="Static" CssClass="input-group-addon input-group-addon-pireus" Text=""></asp:Label>
                                            </td>
                                            <td>
                                                <asp:Label runat="server" ID="lblUploadedBy" ClientIDMode="Static" CssClass="input-group-addon input-group-addon-pireus" Text=""></asp:Label>
                                            </td>
                                            <td>
                                                <asp:Label runat="server" ID="lblDownload" ClientIDMode="Static" CssClass="input-group-addon input-group-addon-pireus" Text=""></asp:Label>
                                            </td>
                                        </tr>
                                    </ItemTemplate>

                                </asp:Repeater>
                            </asp:PlaceHolder>
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </div>
                <div class="modal-footer">
                    <button class="btn" data-dismiss="modal" aria-hidden="true">Затвори</button>
                    <asp:Button ID="Button2" OnClick="StatusSaveBtn_Click"
                        Text="Запази"
                        runat="server" CssClass="btn btn-success" />
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
</div>

I'm calling it from codebehind using RegisterClientScriptBlock.

public void fileUploadDialog()
{
    ScriptManager.RegisterClientScriptBlock(Page, this.GetType(),
                                         "fileUploadScript", "$(function() {
                                          $('#modalFileUpload')
                                          .modal({show: true}); });", true);
}

Any ideas on what could be causing it? My OnClick just calls fileUploadDialog().

Answer 1

Add the ClientIDMode="Static" to following line:

<div class="modal fade" id="modalFileUpload" ClientIDMode="Static" runat="server" tabindex="-1" role="dialog" aria-labelledby="lblID" aria-hidden="true" data-backdrop="static" data-keyboard="false">

If this does not work, please provide more information on the Context, e.g. what is the postback on which the script is loaded..

Good luck!

Answer 2

modalFileUpload is not a full ID on this element. Because of runat="server" this is now a server-side control, so ASP.NET changes its ID during the runtime. To access the whole ID on the client side, use modalFileUpload.ClientID. So you script block should look like so (in the server code where you are registering the script):

"$(function() { $('" + modalFileUpload.ClientID + "').modal(..."