JQuery Dialog & DataList Item Command Event [Help!] [Added Sample Code ZIP]

Question

.NET    - 2008 3.5

Jquery - 1.4.2.js

I have a page that contains a DIV with a display set to none.  I attach a JQuery dialog to the DIV to display my data when a button is clicked on the page.  We'll call the DIV that is being displayed in a JQuery modal dialog 'dialog-verify'.

The dialog-verify referenced above contains an update panel 'upVerify' that contains a DataList.  This datalist is one of three datalists inside the dialog-verify, each is wrapped in their own scrollable DIV.  The DataList I am having an issue with is called dlFromTrade.  dlFromTrade contains a header, itemtemplate and footer.  Inside the itemtemplate is a second list named dltoTrade.  These datalists have a parent, child relationship.  I am using the dlFromTrade ItemDataBound event to wire up a client side event (toggle collapse) to an image button inside my dlFromTrade control.  In this manner I have created a master/detail record with an expand/collapse toggle.  All of this works as expected, but now for the fun part.

In addition to the expand/collapse ImageButton each master row in my dlFromTrade also contains a second 'Delete' ImageButton that should remove the record from the DataList when clicked.  I have given my button a CommandName of DeleteFromExchange.  I have also assigned my dlFromTrades OnItemCommand event to dlFromTrades_ItemCommand.  Unfortunately, when I click on the ImageButton to Delete the record nothing happens.  However, if I place my controls directly on the page as they are, removing the jquery modal dialog (dialog-verify) from the equation, I am receiving the ItemCommand event as expected.  The second I launch my code in a modal jquery dialog it stops working...

At the end of the day what I am attempting to accomplish is simple:

1.  I need a jquery modal dialog that contains a Master/Detail DataList

2.  Each row of my DataList should contain one or more buttons

3.  I need to handle the click event for each of these buttons

Here is the code that I am working with:

 $("#<%=btnVerify.ClientID%>").click(function() {
                $('#dialog-verify').dialog({
                    modal: true,
                    width: 800,
                    buttons: {
                        Ok: function() {
                            $(this).dialog('close');
                        }
                    }
                });
                return false;
            });

<div id="dialog-verify"  title="Verify Trades"> 
 	<asp:UpdatePanel ID="upVerify" UpdateMode="Always" runat="server">
		<Triggers>
			<asp:AsyncPostBackTrigger ControlID="dlFromTrades" EventName="ItemCommand"/>
		</Triggers>
		<ContentTemplate>
			<div style="overflow:auto; height:125px;">
                                <asp:DataList ID="dlFromTrades" OnItemCommand="dlFromTrades_ItemCommand" OnItemDataBound="dlFromTrades_ItemDataBound" runat="server">
                                    <HeaderStyle />
                                    <HeaderTemplate>
                                        <table style="padding:2px" cellpadding="0" cellspacing="0" id="tblReviewTrades">
                                            <tr class="MenuBarImage">
                                                <th>&nbsp;</th>
                                                <th style="width:153px" align="left">Account</th>
                                                <th style="width:50px" align="left">%</th>
                                                <th style="width:175px" align="left">$ Amount</th>
                                                <th style="width:43px" align="left">Shares</th>
                                                <th style="width:30px" align="left">Fund</th>
                                                <th style="width:64px" align="left">Trade Date</th>
                                                <th style="width:64px" align="left">Settle Date</th>
                                                <th>&nbsp;</th>
                                            </tr>
                                    </HeaderTemplate>
                                    <ItemTemplate>
                                            <tr class="ui-widget-header">
                                                <td style="margin:10px;" class="exchangeCol">
                                                    <asp:ImageButton ID="imgCollapse" ImageUrl="~/Images/minus.png" runat="server" />
                                                </td>
                                                <td>
                                                    <%# Eval("Account")%>
                                                </td>
                                                <td>
                                                    <%# Eval("Percent")%>
                                                </td>
                                                <td>
                                                    <%# Eval("Amount")%>
                                                </td>
                                                <td>
                                                    <%# Eval("Shares")%>
                                                </td>
                                                <td>
                                                    <%# Eval("Fund")%>
                                                </td>
                                                <td>
                                                    <%# Eval("TradeDate")%>
                                                </td>
                                                <td>
                                                    <%# Eval("SettleDate")%>
                                                </td>
                                                <td>
                                                    <asp:ImageButton ID="imgbDeleteFromExchange"  CommandName="DeleteFromExchange" ImageUrl="~/Images/delete.png" runat="server" />
                                                </td>
                                            </tr>
                                            <tr id="trToTrades" style="border:solid 1px black;" runat="server">
                                                <td>&nbsp;</td>
                                                <td colspan="8">
                                                        <asp:DataList BorderColor="Black" Width="100%" ID="dlToTrades" runat="server">
                                                            <HeaderStyle BackColor="AliceBlue"  />
                                                            <HeaderTemplate>
                                                                <table style="padding:2px">
                                                                    <tr>
                                                                        <th align="left">Account</th>
                                                                        <th align="left">%</th>
                                                                        <th align="left">$ Amount</th>
                                                                        <th align="left">Shares</th>
                                                                        <th align="left">Fund</th>
                                                                        <th align="left">Trade Date</th>
                                                                        <th align="left">Settle Date</th>
                                                                    </tr>
                                                            </HeaderTemplate>
                                                            <ItemTemplate>
                                                                    <tr>
                                                                        <td>
                                                                            <%# Eval("Account")%>
                                                                        </td>
                                                                        <td>
                                                                            <%# Eval("Percent")%>
                                                                        </td>
                                                                        <td>
                                                                            <%# Eval("Amount")%>
                                                                        </td>
                                                                        <td>
                                                                            <%# Eval("Shares")%>
                                                                        </td>
                                                                        <td>
                                                                            <%# Eval("Fund")%>
                                                                        </td>
                                                                        <td>
                                                                            <%# Eval("TradeDate")%>
                                                                        </td>
                                                                        <td>
                                                                            <%# Eval("SettleDate")%>
                                                                        </td>
                                                                        <td>
                                                                            <asp:ImageButton ID="imgEditToExchange" ImageUrl="~/Images/table_edit.png" runat="server" />
                                                                        </td>
                                                                        <td>
                                                                            <asp:ImageButton ID="imgDeleteToExchange" ImageUrl="~/Images/table_delete.png" runat="server" />
                                                                        </td>
                                                                    </tr>
                                                            </ItemTemplate>
                                                            <FooterTemplate>
                                                                </table> 
                                                            </FooterTemplate>
                                                        </asp:DataList>
                                                </td>
                                            </tr>
                                    </ItemTemplate>
                                    <FooterTemplate>
                                        </table>
                                    </FooterTemplate>
                                </asp:DataList>
                            </div>
			</ContentTemplate>
		</asp:UpdatePanel>
	</div>

If anyone can please help point me in the right direction it would be greatly appreciated.  I've been struggling on and off with this issue for over a week and have been unable to discover a solution.  I really need to be able to capture the click event of a button inside of a datalist, in an update panel being displayed in a jquery modal dialog.  

Please let me know if there are any questions, I am more than willing to do my best to answer them...

Here are some things I've tried that did not work:

1. Adding an AsyncPostBackTrigger to the update panel.  I feel this is unnecessary since my button is inside of my update panel, but I tried it anyway.

2. Adding/wiring the 'OnClick' event pragmatically inside of the dlFromTrades_ItemDataBound event.

3. Handling the buttons 'OnClick' event directly.

Thanks in advance for your support, I'm in the weeds here...  If there are any JQuery forums I should cross-post to, please mention them as well.

 

UPDATE: I have created a new project and recreated the issue so anyone interested in helping may reproduce the issue by running the code attached.  Thanks!