Modal Popup events not responding

I have a modal popup control that is created dynamically along with various other controls on Page_Init. Actually it's a user control created dynamically, and part of that user control is the modal popup.

Inside the modal popup is basically just a grid view with some hyperlink columns. The problem is that none of the links ever seem to respond. The popup is shown by a serverside call to the Show() method.

I experimented and put a few buttons and various other controls, and while the button animates like it's been pressed, no server code fires. This happens reguardless of the control type; radiobuttons won't even check. This occurs in controls both inside and outside of the gridview.

Anyone run into something similar with a dynamically created modal popup?

When the controls are being created dynamically, are you attaching events to the objects that will be posting back (ie the modal popup window). I have a similar situation where I have a user control that dynamically creates buttons. The buttons did not work until I added a event handler once I created them. When you add conntrols to a page, this is done automatically, but If you create a control dynamically, you must tell the page what to do with its events when they are raised. Make sence?

-Alan

Yes, it makes sense. The standard events that are tied into the controls, Page_Load, Page_PreRender, etc. all fire fine at the right times. It's only UI events like Click that don't respond on the server side. I can get them to execute javascript (of course) but I'd like to avoid having to hack together a callback function just to get a button working. Besides wiring the buttons/links/etc with events directly from the aspx page, I've tried adding the controls dynamically also (within the dynamically created user control housing the modalpopup) and then wiring them to the events.

Adding the controls that way in the user control's Load, and Init events both yield the same results. The code gets run and the controls get created, but they do not respond to UI events.

Modal Popup Extender ?

I have created a table programatically which displays images from the database in thumbail fashion.

for (int i = 1; i <= rows; i++) {// Create a new row and add it to the table. TableRow tRow =new TableRow(); Table1.Rows.Add(tRow);for (int j = 0; j < cells; j++) {if (count >= 0) {// Create a new cell and add it to the row. TableCell tCell =new TableCell(); tRow.Cells.Add(tCell); HyperLink link =new HyperLink(); link.NavigateUrl ="~/" + images[count].FullImage; link.ImageUrl ="~/" + images[count].ThumbnailImage; tCell.Controls.Add(link); tCell.Controls.Add(new LiteralControl("<br><br><b>Title</b> : " + getproducts[count].Name +"<br>"));/*Add Checkout and add to cart Images */ HyperLink wishlistLink =new HyperLink(); wishlistLink.ImageUrl="~\\images\\Add_to_wish_list.gif"; HyperLink checkoutLink =new HyperLink(); checkoutLink.ImageUrl ="~\\images\\Add_to_my_cart.gif";/*Add the Images to the cells*/ tCell.Controls.Add(wishlistLink); tCell.Controls.Add(checkoutLink); } } }

Now I want when user clicks on thumbnail it opens a modal popup extender and displays the full image with some other information. Someone can please let me know how to do it programatically using the Hyperlink I have ?

This should give you what you needed

link.Target="_blank";

http://www.startvbdotnet.com/aspsite/controls/linkbutton.aspx

You could have the hyperlink post back and then in the code behind call ModalPopupExtender1.Show() if you really need it to pop in a modal extender. Make sure to wrap you code that will be posting back inside an update panel for the best user experience.

Hi Thukralz,

thukralz:

Now I want when user clicks on thumbnail it opens a modal popup extender and displays the full image with some other information. Someone can please let me know how to do it programatically using the Hyperlink I have ?

You should create ModalPopupExtender and its associated Panel dynamically for each HyperLink and set the ModalPopupExtender's properties on the server side. But I don't think it is a good way for its low perfermance. The improved method is that we only use one ModalPopupExtender in a page and the ModalPopupExtender is activated when the HyperLink is fired by using Javascript functions.

<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"></script><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Change Picture</title> <style> .modalBackground { background-color:Gray; filter:alpha(opacity=70); opacity:0.7; } .modalPopup { background-color:#FFD9D5; border-width:3px; border-style:solid; border-color:Gray; padding:3px; width:250px; } </style></head><body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:Image ID="Image1" runat="server" ImageUrl="~/pic/upg_Business.jpg" imgUrl="../pic/upg_HomePremium.jpg" onclick="changePicture(event.srcElement.imgUrl)"/><asp:Image ID="Image2" runat="server" ImageUrl="~/pic/upg_HomeBasic.jpg" imgUrl="../pic/upg_Ultimate.jpg" onclick="changePicture(event.srcElement.imgUrl)"/> <asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" Height="200px" Width="300px" style="display:none"> <asp:Image ID="Image3" runat="server" ImageUrl="~/pic/AJAX.gif"/> <asp:Button ID="Button2" runat="server" Text="Cancel" /> </asp:Panel> <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="Button1" PopupControlID="Panel1" CancelControlID="Button2"> </ajaxToolkit:ModalPopupExtender> <div style="display:none"> <asp:Button ID="Button1" runat="server" Text="Button" /> </div> <script type="text/javascript" language="javascript"> function changePicture(imgUrl){ $get("<%=Image3.ClientID%>").src = imgUrl; $get("<%=Button1.ClientID%>").click(); } </script> </div> </form></body></html>

I hope this help.

Best regards,

Jonathan

Modal Popup extender doesnt work (fast enough?) if used in a user control?

I created a user web control containing a blue panel which will pop up when user clicks on a text box. I use Modalpopupextender for this purpose. It is very simple!

When I reuse this control in a page, the blue panel shows up for a fraction when the page is loaded. This is very annoying cause I basically can't create my own modal dialog box and reuse for different pages. Is this a bug in the toolkit or do I need to add something to my control?

Thanks

MY CONTROL:

<%@dotnet.itags.org.ControlLanguage="C#"AutoEventWireup="true"CodeFile="TestPopUpBox.ascx.cs"Inherits="Admin_Configuration_TestPopUpBox" %>

<%@dotnet.itags.org.RegisterAssembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"TagPrefix="cc1" %>

<asp:PanelID="Panel1"runat="server"BackColor="Blue"Height="235px"Style="position: relative"

Width="556px"><asp:TextBoxID="TextBox1"runat="server"Style="position: relative"></asp:TextBox>

</asp:Panel>

PAGE:

<%@dotnet.itags.org.PageLanguage="C#"AutoEventWireup="true"CodeFile="Test.aspx.cs"Inherits="Admin_Configuration_Test" %>

<%@dotnet.itags.org.RegisterSrc="AddDeviceControl.ascx"TagName="AddDeviceControl"TagPrefix="uc1" %>

<%@dotnet.itags.org.RegisterSrc="TestPopUpBox.ascx"TagName="TestPopUpBox"TagPrefix="uc2" %>

<%@dotnet.itags.org.RegisterAssembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"TagPrefix="cc1" %>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<headrunat="server">

<title>Untitled Page</title>

</head>

<body>

<formid="form1"runat="server">

<div>

<asp:ScriptManagerID="ScriptManager1"runat="server">

</asp:ScriptManager>

This is the page<br/>

<uc2:TestPopUpBoxID="TestPopUpBox1"runat="server"/>

</div>

</form>

</body>

</html>

<cc1:ModalPopupExtenderID="ModalPopupExtender1"runat="server"TargetControlID="TextBox1"PopupControlID="Panel1">

</cc1:ModalPopupExtender>

I found another post which solves my problem.

You have to add "display:none" attribute to the panel style. I guess the code in AJAX control takes some time to iterate through all the controls on the page to find and hide the target panel.

ModalPopup and FileUpload

I created a ModalPopup with a FileUpload control inside it. After some initial frustration with trying to get the ModalPopup "OK" button to Postback to the server, I found a thread that suggested setting the UseSubmitBehavior property to false, which did the trick. However, in the click event of my OK button, FileUpload1.HasFile is false, even though I did browse for a file. Any idea why? And how to fix it? Thanks!There are a couple of threads talking about how the 60504 version of ModalPopup does its magic by moving controls around on the form and incorrectly moves things outside the <form> element. I eventually posted a solution that relies on the zIndex CSS property. Please try applying that change to your ModalPopup sources and see if it helps here. If not, please let us know! Thanks.
I tried David Anson'sfix, but it doesn't seem to be working. Perhaps I didn't insert the code right? Or something? I went to the folder where I installed Atlas and drilled down to AtlasControlToolkit/ModalPopup/.... Here I made a backup of ModalPopupBehavior.js, and then inserted the code David wrote where it clearly fit. I restarted Visual Studio in case it needed to reload or something, but it still doesn't work. I opened the DOM Inspector and sure enough the panel is still outside the form. Am I missing something? Thanks!
The change I posted about using zIndex does not move the panel (verified by others on this forum), so if you're seeing the panel be moved after attempting to apply the fix, then something about how the fix was done would seem to be in error. Please double-check what you've done and post your ModalPopupBehavior.js you're unable to get the change to take effect.