Update gridview that is inside jquery dialog (ASP.net c#)

Question

Is there a way to update the gridview that is inside a jquery dialog box? I have got the buttons functioning, however the gridview is not updating. Below is my code.

JS:

    <script type="text/javascript" language="javascript">

$(document).ready(function () {

    function BindEvents() {


        //alerts dialog
        $( "#pnlAlerts" ).dialog({            
            autoOpen: false,
            modal: true,
            width: 700,             
            open:function(){{
                $(this).parent().appendTo($("form:first"));
            }}

        });

        $('.openAlert').click(function () {        
            $( '#pnlAlerts' ).dialog( 'open' );
        });
          }

    BindEvents();

}); 

Front end:

            <asp:Panel runat="server" ID="pnlAlerts" Visible="true" class="alert-dialog">

            <asp:UpdatePanel ID="updPanelAlert" runat="server" >
                <ContentTemplate>
                    <asp:Label id="lblDatabaseStatus" runat="server" CssClass="left found" />

                    <asp:Panel id="pnlAlert" Runat="Server" Visible="true">

                        <div id="table-search">
                            <asp:Button ID="btnDelete" runat="server" Text="Delete" CssClass="btn normal-btn left" onclick="btnDelete_Click"  />
                            &nbsp;&nbsp;<asp:Button ID="btnMark" runat="server" Text="Mark as Read" CssClass="btn normal-btn left" onclick="btnMark_Click"  />
                            <!-- Loader -->
                            <asp:UpdateProgress ID="updProgress" runat="server" AssociatedUpdatePanelID="updPanelAlert" class="loader" DisplayAfter="1">
                                <ProgressTemplate>
                                        <asp:Image ID="imgPleaseWait" runat="server" ImageUrl="~/images/pleasewait.gif" />
                                </ProgressTemplate>
                            </asp:UpdateProgress>

                            <div class="nip">
                            </div>
                            <br class="clear"/>
                        </div>
                        <asp:SqlDataSource ID="sqldsAlert" runat="server" 
                            ConnectionString="<%$ ConnectionStrings:ABCDB %>" 
                            SelectCommand="sp_AlertsGet" SelectCommandType="StoredProcedure">
                            <SelectParameters>
                                <asp:ControlParameter  ControlID="lblUserID" Name="UserID" Type="String" Direction="Input" />
                                <asp:Parameter DefaultValue="null" Direction="InputOutput" Name="op_status" 
                                    Type="String" />
                            </SelectParameters>
                        </asp:SqlDataSource>
                        <asp:Panel id="pnlAlertGrid" runat="server" ScrollBars="Auto" EnableTheming="false">
                            <!-- Table data -->
                            <asp:GridView id="gvAlertGrid" runat="server"  CssClass="grid" 
                                GridLines="Vertical" DataKeyNames="AlertID" AutoGenerateColumns="False" 
                                width="100%" PageSize="50" Border="0" 
                                AllowPaging="True" AllowSorting="True" PagerSettings-Position="Bottom" 
                                DataSourceID="sqldsAlert">

                                <Columns>

                                    <asp:TemplateField HeaderText="AlertID" Visible="false">
                                        <ItemTemplate>
                                            <asp:Label ID="lblAlertID" Text='<%# Eval("AlertID")%>'  runat="server" />
                                        </ItemTemplate>
                                    </asp:TemplateField>

                                    <asp:TemplateField HeaderText="&nbsp">
                                        <itemTemplate>
                                            <asp:CheckBox ID="cbDeleteMark" width="25px" Checked="false" runat="server" Enabled="True"/>
                                        </itemTemplate>
                                    </asp:TemplateField>

                                    <asp:TemplateField HeaderText="Subject" SortExpression="AlertSubject">
                                        <itemTemplate>
                                            <asp:Label ID="lblAlertSubject" Text='<%# Eval("AlertSubject")%>' ForeColor='<%# SetColor(Eval("ReadStatus"))%>' runat="server" />
                                        </itemTemplate>
                                    </asp:TemplateField>

                                    <asp:TemplateField HeaderText="Type" SortExpression="Priority">
                                        <itemTemplate>
                                            <asp:Label ID="lblPriority" Text='<%# Eval("Priority")%>' ForeColor='<%# SetPriorityColor(Eval("ReadStatus"), Eval("Priority"))%>' runat="server" />
                                        </itemTemplate>
                                    </asp:TemplateField>

                                    <asp:templatefield headertext="Received" SortExpression="Date">
                                        <itemtemplate>
                                          <asp:label id="lblDate" ForeColor='<%# SetColor(Eval("ReadStatus"))%>'
                                            text= '<%# String.Format("{0:dd/MM/yy}",Eval("[Date]")) %>'
                                            runat="server"/> 
                                        </itemtemplate>
                                        <ItemStyle HorizontalAlign="Center" />                          
                                    </asp:templatefield>

                                </columns>
                            </asp:GridView>
                        </asp:Panel>
                    </asp:Panel>
                </ContentTemplate>
            </asp:UpdatePanel>
            <asp:Label runat="server" ID="lblUserID" Visible="false"></asp:Label>
        </asp:Panel>            

Answer 1

In order for the GridView to update you either need to have the page trigger a postback or do a server side call to DataBind on the GridView.

Another option you could try is add a hidden button in the update panel and then call:

__doPostBack('<%= Button.ClientID %>','');

This should refresh the update panel, consequently refreshing the GridView.

The jquery you have just opens and closes the panel "pnlAlerts" as a modal dialog.

If you want to edit the data in the GridView you will need EditTemplates.

Hope that helps.