How do you open a modal pop up inside an update panel?

Question

I have the next requirement: show a DropDownList of multiple option for select different clients, and once I select different clients and clic a button the grid below of the dropdownlist should show the quotations of those clients that i selected, and if i click a specific column a pop up should be open showing the detail of that quotation.

There are differents scenarios:

1.- if i use a update panel and inside of it i put the dropdownlist and the grid, when i clic in that specific column the pop up doesn´t work.

2.- if i don't use a update panel everything works great, except for the refresh of the web page.

3.- if i load the grid with data before select something of the dropdownlist the pop up is working until i select something in the dropdownlist, it's how if the event fired by the dropdownlist affect in someway to the grid or popup and here everything is inside of the update panel.

¿what do you suggest me?

I have the next code for the web page:

<div id="contentMain">
        <asp:UpdatePanel ID="updPanel" runat="server">
            <ContentTemplate>
                <div style="margin-left: 190px; margin-bottom: -20px;">
                    <asp:LinkButton runat="server" ID="LinkButton1" title="Seleccionar Clientes" OnClientClick="refrescarGrid() return false;">
                <span class="btnAceptar"></span>
                    </asp:LinkButton>
                </div>
                <table align="center">
                    <tr style="text-align: center">
                        <td class="labelTitle" style="background-color: #9AA8B3; border-radius: 3px;" colspan="1">
                            Seleccionar Clientes
                        </td>
                    </tr>
                    <tr>
                        <td style="font-size: 12px">
                            <cdis:ucDropDownListMultiple ID="ddlClients2" Requerido="false" LabelText="Clientes:"
                                runat="server" TextboxClassError="listaMultipleError chosen-choices" ContainerClass="ucTextbox"
                                TextboxClassNormal="chosen-choices" InputClassError="listaMultipleErrorInput"
                                InputClassNormal="chosen-choices" OpcionAgregar="false" ValidationGroup="vlg1"
                                Width="300px" MaxSelected="20" AutoPostBack="false" />
                        </td>
                    </tr>
                </table>
                <div style="">
                    <asp:LinkButton runat="server" ID="LinkButton2" title="Seleccionar Cotizaciones"
                        OnClick="btnGetSelectedQuotations">
                <span class="btnAceptar"></span>
                    </asp:LinkButton>
                </div>
                <asp:ImageButton ID="btnSession" ImageUrl="" runat="server" OnClick="btnSession_Click"
                    Style="display: none;" />
                <div class="subSection" align="center">
                    <table align="center">
                        <tr style="text-align: center">
                            <td class="labelTitle" style="background-color: #9AA8B3; border-radius: 3px;" colspan="1">
                                Cotizaciones Iniciales por Autorizar
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <asp:ImageButton ID="ImageButton1" ImageUrl="" runat="server" OnClick="btnSession_Click"
                                    Style="display: none;" />
                            </td>
                        </tr>
                    </table>
                </div>
                <div align="center">
                    <cc1:Grid ID="grdCatalogo" runat="server" AllowAddingRecords="false" Serialize="false"
                        ShowMultiPageGroupsInfo="false" AllowFiltering="false" AllowSorting="true" AllowGrouping="False"
                        AutoGenerateColumns="false" AllowPageSizeSelection="false" AllowColumnReordering="true"
                        AllowPaging="false" Width="100%" Height="100%" AllowRecordSelection="false" ShowFooter="false"
                        FolderLocalization="/Localization" Language="es" OnDataSourceNeeded="grdCatalogo_DataSourceNeeded">
                        <ExportingSettings ExportAllPages="true" ExportGroupHeader="true" ColumnsToExport="" />
                        <PagingSettings ShowRecordsCount="false" />
                        <ScrollingSettings NumberOfFixedColumns="0" FixedColumnsPosition="Left" />
                        <ClientSideEvents OnClientCallback="loadGridScripts" ExposeSender="true" />
                        <Columns>
                            <cc1:Column DataField="DeseasAutorizar" HeaderText=" Desea Autorizar" ItemStyle-Wrap="false"
                                Width="109px" Wrap="true" HeaderAlign="center" Align="center">
                                <TemplateSettings TemplateId="tplActionCheck" />
                            </cc1:Column>
                            <cc1:Column HeaderText="Código" DataField="tQuotationClientCode" Wrap="true" HeaderAlign="center"
                                Width="100px">
                            </cc1:Column>
                            <cc1:Column HeaderText="Nombre" DataField="tQuotationClientName" Wrap="true" HeaderAlign="center"
                                Width="248px">
                            </cc1:Column>
                            <cc1:Column HeaderText="Número de Cotización" DataField="tQuotationQuotationNumber"
                                Wrap="true" HeaderAlign="center" Width="120px">
                                <TemplateSettings TemplateId="tplIndividualQuotations" />
                            </cc1:Column>
                            <cc1:Column HeaderText="Número de Solicitud" DataField="tQuotationRequestNumber"
                                Wrap="true" HeaderAlign="center" Width="120px">
                                <TemplateSettings TemplateId="tplIndividualRequest" />
                            </cc1:Column>
                            <cc1:Column HeaderText="Tipo de Trabajo" DataField="tQuotationWorkType" Wrap="true"
                                Width="250px" HeaderAlign="center">
                            </cc1:Column>
                            <cc1:Column HeaderText="Código Producto del Cliente" DataField="tQuotationClientProductCode"
                                Wrap="true" Width="153px" HeaderAlign="center">
                            </cc1:Column>
                            <cc1:Column HeaderText="Nombre del Trabajo" DataField="tQuotationWorkName" Wrap="true"
                                Width="240px" HeaderAlign="center">
                            </cc1:Column>
                            <cc1:Column HeaderText="" DataField="tQuotationQuotationId" Visible="false">
                            </cc1:Column>
                            <cc1:Column HeaderText="" DataField="tQuotationRequestId" Visible="false">
                            </cc1:Column>
                        </Columns>
                        <Templates>
                            <cc1:GridTemplate runat="server" ID="tplActionCheck">
                                <Template>
                                    <asp:CheckBox runat="server" ID="chkClientImp" EnableViewState="true" />
                                </Template>
                            </cc1:GridTemplate>
                            <cc1:GridTemplate runat="server" ID="tplIndividualRequest">
                                <Template>
                                    <a class='modal' href='<%# "catIndividualRequest.aspx?pRequestId=" + 1+ "&pTmp=1"%>'
                                        title="Actualizar Usuario">
                                        <asp:Label ID="Label1" Text='<%#Container.DataItem["tQuotationRequestNumber"]%>'
                                            runat="server" />
                                    </a>
                                </Template>
                            </cc1:GridTemplate>
                            <cc1:GridTemplate runat="server" ID="tplIndividualQuotations">
                                <Template>
                                    <a class='modal' href='<%# "catIndividualQuotation.aspx?pQuotationId=" + Container.DataItem["tQuotationQuotationId"] + "&pTmp=1"%>'
                                        title="Actualizar Usuario">
                                        <asp:Label ID="Label1" Text='<%#Container.DataItem["tQuotationQuotationNumber"]%>'
                                            runat="server" />
                                    </a>
                                </Template>
                            </cc1:GridTemplate>
                        </Templates>
                    </cc1:Grid>
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>

Code Behind:

protected void grdCatalogo_DataSourceNeeded(object sender, GridDataSourceNeededEventArgs e)
        {
            int count = 0;
            if (grdCatalogo.Rows != null)
            {
                foreach (GridRow row in grdCatalogo.Rows)
                {
                    GridDataControlFieldCell cell = row.Cells[0] as GridDataControlFieldCell;
                    if (cell != null)
                    {
                        CheckBox asignar = cell.FindControl("chkClientImp") as CheckBox;

                        if (asignar.Checked)
                        {
                            DiccionarioAsignar.Add(count, asignar.Checked);
                        }
                    }
                    count++;
                }
            }

            try
            {

                List<object> lst = new List<object>();
                if (ddlClients2.GetSelectedItems().Count > 0)
                {
                    foreach (System.Web.UI.WebControls.ListItem li in ddlClients2.Items)
                    {
                        if (li.Selected == true)
                        {
                            foreach (object obj in QuotationBLL.Get_QuotationInfoCatalogById(Convert.ToInt32(li.Value)))
                            {
                                lst.Add(obj);
                            }
                        }
                    }
                }

                grdCatalogo.DataSource = lst;
                grdCatalogo.DataBind();
                grdCatalogo.FolderStyle = "~/App_Themes/" + Page.Theme + "/styles/oboutgrid";
            }
            catch (CDISException ex)
            {
                MostrarErrorGeneral(ex.ErrorMessage);
                ErrorOboutGrid = ex.ErrorMessage;
            }
            catch (Exception exGeneral)
            {
                MostrarErrorGeneral("Ocurrió un error inesperado. Verifique la información ingresada y contacte con el encargado de la aplicación.");
                ErrorOboutGrid = "Ocurrió un error inesperado. Contacte con el encargado de la aplicación.";
            }
        }

Answer 1

It looks like you're actually hooking the "Open Modal Dialog" code on to the links in tplIndividualQuotations via JavaScript based on the class="modal"?

I believe your code to do this is only firing once on page load (using something like the jQuery $() method or similar).

The problem is that when the UpdatePanel is reloaded, this code is not going to run again and hook up the code on the new <a> elements that have been added to the page.

As you're using UpdatePanels you're going to need to hook into the ASP.NET AJAX PageRequestManager

You'll need to add a method to the endRequest event hooks that are:

Raised after an asynchronous postback is finished and control has been returned to the browser.

So you'd have something like:

<script type="text/javascript">
  Sys.WebForms.PageRequestManager.getInstance().add_endRequest(pageLoaded);

  function pageLoaded(sender, args) {
     //Code to hook up modal load here...
  }
</script>