.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> </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> </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> </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!