Search code examples
c#asp.netgridviewasp.net-ajaxmodalpopupextender

ModalPopupExtender is not triggered in ASP.NET gridview image button click

I'm trying to display AJAX popup with confirmation message for the user, but when the user is clicking the button automatically goes to the button click event without displaying the message. This is what I have:

<asp:GridView ID="GridView1" OnRowCommand="GridView1_RowCommand">
   <Columns>
      <asp:TemplateField ItemStyle-HorizontalAlign="Center">
         <ItemTemplate>
            <asp:ImageButton ID="imgButton1" RowIndex='<%# Eval("PostingID") %>' CommandName="Archive" CommandArgument='<%# Eval("PostingID") %>' runat="server" ImageUrl="/images/a.png" />
            <asp:Panel ID="pnlConfirm" runat="server" CssClass="modalPanel" Style="display: none; height:160px; border-color:#B6B6B4;">
               <div>
                  <table class="featrEmpDivLoginPopup" style="height:160px; width:460px;" cellspacing="0" cellpadding="0">
                     <tr>
                        <td id="divClose" runat="server" class="topimglhs533 hedding1" style="height:30px; background-color:#d3d8d2;">
                           Message 
                        </td>
                     </tr>
                     <tr>
                        <td>
                           <div id="jsAlert1_popupBody" style="position: absolute; font-family: Verdana,Arial; font-size: 9pt; padding: 2px; text-align: left; background-color: rgb(255, 255, 255); color: black; top: 34px; width: 450px; left: 1px;">
                              <div style="padding-top:20px; padding-bottom:5px; text-align:center;">Are you sure you want to Archive this posting?<br></div>
                           </div>
                        </td>
                     </tr>
                     <tr>
                        <td style="width:100px; margin-top:5px; text-align:center;">
                           <asp:ImageButton ID="btnUpdate" CommandName="Archive" ImageUrl="~/Images/btnarchive.jpg" runat="server" />
                           <asp:ImageButton ID="btnCancel" ImageUrl="~/Images/cancel2.jpg" runat="server" />
                        </td>
                     </tr>
                  </table>
               </div>
            </asp:Panel>
            <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="imgButton1" PopupControlID="pnlConfirm"
               CancelControlID="btnCancel" BackgroundCssClass="modalBg" DropShadow="false"></ajaxToolkit:ModalPopupExtender>
            <!-- PANEL -->
         </ItemTemplate>
      </asp:TemplateField>
   </Columns>
</asp:GridView>

So I'm expecting the popup to be shown when the user will click on imgButton1 but instead it goes to the event right away in the code behind.

Is there anything wrong in this code?

Explanation added

In Firebug, I'm able to see these two errors in ScriptResource.axd:

enter image description here

Can that be related to the problem I have?

Better picture added:

enter image description here

Solution

  • The problem was that I didn't had UpdatePanel with ContentTemplate for the page. Once I did put them in place the problem was solved.