ModalPopup questions?

  • Thread starter Thread starter Darth Continent
  • Start date Start date
D

Darth Continent

Hello, I'm trying to replicate the functionality presented here
specific to the ModalPopup control:

http://ajax.asp.net/ajaxtoolkit/ModalPopup/ModalPopup.aspx

I've created a C# Ajax-enabled website project, have added the
ScriptManager, ModalPopup, Panel and various Button controls, but
although I've bound the ModalPopup to the button I want to have it use
to activate my modal Panel, and though the project builds successfully,
it doesn't react in the same way as the sample.

Here's the code from my skin file:



1 <%@ Page Language="C#" trace="true" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default" %>
2
3 <%@ Register Assembly="AjaxControlToolkit"
Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
4
5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
6 <html xmlns="http://www.w3.org/1999/xhtml">
7 <head>
8 <title>Untitled Page</title>
9 </head>
10 <body>
11
12 <form runat="server">
13
14 <asp:ScriptManager ID="ScriptManager1" runat="server"
EnablePartialRendering="true"></asp:ScriptManager>
15
16 <asp:Panel ID="Panel1" runat="server" Height="50px"
Width="125px" Visible="False" >
17
18 <asp:Button ID="OkButton" runat="server"
Text="OK"></asp:Button>
19 <asp:Button ID="CancelButton" runat="server"
Text="Cancel"></asp:Button>
20
21 </asp:Panel>
22
23 <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1"
runat="server"
24 TargetControlID="btnAddServer"
25 PopupControlID="Panel1"
26 BackgroundCssClass="modalBackground"
27 DropShadow="true"
28 OkControlID="OkButton"
29 OnOkScript="onOk()"
30 CancelControlID="CancelButton" />
31
32 <br />
33 <center>
34
35
36 <asp:Panel ID="PanelMain" runat="server" Height="25px"
Width="125px" HorizontalAlign="Center">
37
38 <asp:Button ID="btnAddServer" runat="server"
Text="Add" Width="33px" /></td>
39
40 </asp:Panel>
41
42 </form>
43
44 </body>
45 </html>
46



At this point, I'm guessing that the missing piece of the puzzle lies
with the CSS stuff and/or the master page, as that I haven't brought
over from the sample project utilizing ModalPopup. Can someone please
help me pinpoint what I'm missing that is preventing this from working?

Thanks in advance for any help.
 
you made your popup panel visible=false, which means its not rendered,
making it pretty hard for client script to display it. you need to use
style="display:none", which will render the panel on the client.

-- bruce (sqlwork.com)
 
Ok, I changed Panel1 to remove Visible="false", and added the style
"display:none" attribute to the panel definition.

Now when I click the button I want to have activate the ModalPopup,
nothing seems to happen other than a page refresh. The panel doesn't
appear.

Any other ideas?!
 
Update, I looked in the Javascript console (Firefox) and some errors
occur with the following statements which appear to be generated by the
ScriptManager control.

The error for each of these <script> sections is "Sys is not defined",
and this occurs for both Internet Explorer and Firefox:

<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ScriptManager1',
document.getElementById('ctl00'));
Sys.WebForms.PageRequestManager.getInstance()._updateControls([], [],
[], 90);
//]]>
</script>

<script type="text/javascript">
<!--
Sys.Application.queueScriptReference('/ConnPanel/ScriptResource.axd?d=RK6-fke17Ft_xv-zsLR-AY1bdf-KZi2LnQ4mPZp1YXTEVXCiglsKcQ_Qh5CUmPjAZyj_wAR_EmPs-KiU1sao_A2&t=632997086300000000');
Sys.Application.queueScriptReference('/ConnPanel/ScriptResource.axd?d=RK6-fke17Ft_xv-zsLR-AY1bdf-KZi2LnQ4mPZp1YXS65mVJt-XfaOKNr_MWKpCdna8m-FdwCIXtI2BF9H6dnA2&t=632997086300000000');
Sys.Application.queueScriptReference('/ConnPanel/ScriptResource.axd?d=RK6-fke17Ft_xv-zsLR-AY1bdf-KZi2LnQ4mPZp1YXSYDpar7nTPiAhVdgYkgAdwJ8ahHioagB9EU9Bw9Nxb0D9RDm-OMPJZNanL9X3j3Kc1&t=632997086300000000');
Sys.Application.queueScriptReference('/ConnPanel/ScriptResource.axd?d=RK6-fke17Ft_xv-zsLR-AY1bdf-KZi2LnQ4mPZp1YXQAgWCy9UXscjkO7oeCv_5i9DjjjBehqpmbpp_96U35JYsA3GQ0vmYLS6_vMRxaGZlKyioceBPn24GFor9oMbKk0&t=632997086300000000');
Sys.Application.queueScriptReference('/ConnPanel/ScriptResource.axd?d=RK6-fke17Ft_xv-zsLR-AY1bdf-KZi2LnQ4mPZp1YXSCjHeHtbtXtCXgsF53qwtseLwqZkFcGv6lURTJ13w1MtRvhpIIcRiwaApU9lbfOudmza7TBXgwGPEgOxu6GOpF0&t=632997086300000000');
Sys.Application.queueScriptReference('/ConnPanel/ScriptResource.axd?d=RK6-fke17Ft_xv-zsLR-AY1bdf-KZi2LnQ4mPZp1YXQ-pJjPv1WWX29Tqq_YJ-RB8MaiDYp_43mrM5ELNZ_4HQ2&t=632997086300000000');
Sys.Application.queueScriptReference('/ConnPanel/ScriptResource.axd?d=RK6-fke17Ft_xv-zsLR-AY1bdf-KZi2LnQ4mPZp1YXT4N3BncC38XksHS79LjfVD2HMmwHrs9G2GQ5gdqd7kMr_yOgVL2qO0b60snGfSEV41&t=632997086300000000');
Sys.Application.queueScriptReference('/ConnPanel/ScriptResource.axd?d=RK6-fke17Ft_xv-zsLR-AY1bdf-KZi2LnQ4mPZp1YXQLSw2GxMS14Piky26f8wSlEVxDijLnj7JzPF-ybVhaSiS4HcZHtSLIsA2MfhyI9Es1&t=632997086300000000');
Sys.Application.add_init(function() {
$create(AjaxControlToolkit.ModalPopupBehavior,
{"BackgroundCssClass":"modalBackground","CancelControlID":"CancelButton","DropShadow":true,"DynamicServicePath":"/ConnPanel/Default.aspx","id":"ModalPopupExtender1","OkControlID":"OkButton","OnOkScript":"onOk()","PopupControlID":"Panel1"},
null, null, $get('btnAddServer'));
});
Sys.Application.initialize();
// -->
</script>
 
this generally means your web config is not setup to remap the ajax
handlers. see docs.

-- bruce (sqlwork.com)
 
This appears to have been the case, I researched the error and found a
workaround (at http://www.thecodinghumanist.com/blog/default.aspx)
which appears to have done whatever is necessary to fix the problem:

I added this to the "httpHandlers" section of my project's Web.config:

<add verb="GET" path="ScriptResource.axd"
type="Microsoft.Web.Handlers.ScriptResourceHandler" validate="false"/>

Bruce if you or anyone could please explain more about how this fixes
the error I'd appreciate it, I'm still too much of a newbie to
understand why this would do it. I mean it seems like it's adding a
handler so that GET are filtered through the ScriptResource.axd
component...?
 
Back
Top