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

.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;
            });

 
 	
		
			
		
		
			
                                
                                    
                                    
                                        
                                            
                                        
                                            
                                                 
                                                Account
                                                %
                                                $ Amount
                                                Shares
                                                Fund
                                                Trade Date
                                                Settle Date
                                                 
                                            
                                    
                                    
                                                
                                                    
                                                
                                                
                                                    <%# Eval("Account")%>
                                                
                                                
                                                    <%# Eval("Percent")%>
                                                
                                                
                                                    <%# Eval("Amount")%>
                                                
                                                
                                                    <%# Eval("Shares")%>
                                                
                                                
                                                    <%# Eval("Fund")%>
                                                
                                                
                                                    <%# Eval("TradeDate")%>
                                                
                                                
                                                    <%# Eval("SettleDate")%>
                                                
                                                
                                                    
                                                
                                            
                                            
                                                 
                                                
                                                        
                                                            
                                                            
                                                                
                                                                    
                                                                
                                                                    
                                                                        Account
                                                                        %
                                                                        $ Amount
                                                                        Shares
                                                                        Fund
                                                                        Trade Date
                                                                        Settle Date
                                                                    
                                                            
                                                            
                                                                        
                                                                            <%# Eval("Account")%>
                                                                        
                                                                        
                                                                            <%# Eval("Percent")%>
                                                                        
                                                                        
                                                                            <%# Eval("Amount")%>
                                                                        
                                                                        
                                                                            <%# Eval("Shares")%>
                                                                        
                                                                        
                                                                            <%# Eval("Fund")%>
                                                                        
                                                                        
                                                                            <%# Eval("TradeDate")%>
                                                                        
                                                                        
                                                                            <%# Eval("SettleDate")%>

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!

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Justin Andrews16y ago

I solved the issue by adding a single line of code (emphasized below):


// Launch Modal Dialog On Button Click

$("#<%=btnVerify.ClientID%>").click(function() {

	if (Page_IsValid) {

		$('#dialog-verify').dialog({
			modal: true,
			width: 800,
			buttons: {
			Ok: function() {
				$(this).dialog('close');
			}
		}

	});

	$('#dialog-verify').parent().appendTo($("form:first"));

	return false;

	}

	return false;

});

Here is the single line of code I added: $('#dialog-verify').parent().appendTo($("form:first"));
This line of code enables me to handle the ItemCommand even on an ImageButton click inside of my DataList that is being displayed inside of a JQuery Modal Dialog.