Modal Popup extender

I am trying to show and hide a modal popup in auser control which is called under contentpage of masterpage , as aseparate page the sample works fine but when embed this sample in usercontrol or content page or master page i get the error say this._popupis null or not an object

The following is the code
<script type="text/javascript" language="javascript">
var _popup;

function validate(){
// find the popup behavior
this._popup = $find('mdlPopup');
// show the popup
this._popup.show();
// kick-off the webservice, registering our callback
PageMethods.ValidateCreditCard($get('txtNumber').value, this.callback);
}

function callback(result){
// hide the popup
this._popup.hide();

// let the user know if their credit card was validated
if(result){
alert('congrats, your Number is valid!');
}
else{
alert('sorry, your Number is not valid!');
}
}

</script>
<script runat="server">
/// <summary>
///
/// </summary>
/// <param name="number"></param>
/// <returns></returns>
[System.Web.Services.WebMethod]
public static bool ValidateNumber(string Number)
{

bool isValid = false;
try
{

if(Number=="234")
{
isValid=true;
}

}
catch {}

return isValid;
}
</script>

Thanks

Are you using the $find command correctly? See the documentation:http://www.asp.net/ajax/documentation/live/ClientReference/Sys/ApplicationClass/SysApplicationFindComponentMethod.aspx.

It states "Use the findComponent method to get a reference to a Component object that has been registered with the application through theaddComponent method.".

Also, your problem could be that the client ID isn't 'mdlPopup' since it is a apart of a container control.

-Damien

Modal Popup Extender and show/hide

Hi @dotnet.itags.org.all, misters

I am able to wire up an AJAX ModalPopup and everything works fine. But now I want to do the following:

- Before that ModalPopup is shown, I want execute function javascript (custom javascript)

- When the ModalPopup hides, I want execute function javascript (custom javascript)

Any suggestions for my issue ?

Thanks in advance for any help, that will be appreciated and very grateful. I have lastest version of Ajax Toolkit.

Greetings

I assume you are showing the mpe from a button (TargetControlID) and a close closing froma button (CancelControlID). If you change to showith the mpe from javascript and hiding from javascript you can accomplish your needs.

Add:

<script language="javascript">

function showModal(){

//custom code

$find('ModalPopupExtender1').show();

}

function hideModal(){

//custom code

$find('ModalPopupExtender1').hide();

}

</script>

Step 1: Add a style="display:none" attribute to the targetControlID

Setp 2: Remove the cancelcontrolID from the mpe

Step 3: Create a new button outside the popupcontrol ad add the atrribute onclientclick="showModal(); return false;"

Step 4: Create a button inside the popup with the attribute onclientclick="hideModal(); return false;"

This is crude, but it just the steps, obviously you will need to customize to make it work in your app.

-Alan

Modal Popup Hide Not showing Drop Downs again

HI

I am calling .Hide on my modal popup which does hide the modal popup but the drop downs dont appear again.
This is of course only an IE6 issue but there are a fair few people out there with that!

I have tried chaning the visibility style attribute of the drop downs on the server but no joy.

Any ideas?

Steve

My IE 6.0.2900.2180 service pack 2 is running fine... below is my test code.

<%@.Page

Language="C#"%>

<%@.Register

Assembly="AtlasControlToolkit"

Namespace="AtlasControlToolkit"

TagPrefix="atlasToolkit"%>

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

<scriptrunat="server">

protectedvoid Page_Load(objectsender,EventArgs e)

{

}

protectedvoid Okay_Validate(objectsender,EventArgs e)

{

if(DummyBox.Text =="")

{

ErrorMessage.Visible =true;

ErrorMessage.Text ="DummyBox is required";

ModalPopupProperties1.Show();

}

else

{

//do yourstuffs.

}

}

protectedvoid HideViaServer_Click(objectsender,EventArgs e)

{

ModalPopupProperties1.Hide();

}

</script>

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

<headrunat="server">

<title>UntitledPage</title>

<styletype="text/css">

.modalBackground

{

background-color:Gray;

filter:alpha(opacity=70);

opacity:0.7;

}

.modalPopup

{

background-color:#ffffdd;

border-width:3px;

border-style:solid;

border-color:Gray;

padding:3px;

width:250px;

}

</style>

</head>

<body>

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

<atlas:ScriptManagerID="ScriptManager"runat="server"EnablePartialRendering="true"/>

<div>

<atlas:UpdatePanelID="Update"runat="server"Mode="Always">

<ContentTemplate>

<asp:ButtonID="Button1"runat="server"Text="Popup"/>

<br/>

<asp:PanelID="Panel1"runat="server"CssClass="modalPopup">

<asp:LabelID="ErrorMessage"runat="server" Visible="false"/>

<asp:DropDownListID="testdropdown"runat="Server">

<asp:ListItem>test1</asp:ListItem>

<asp:ListItem>test2</asp:ListItem>

</asp:DropDownList>

Dummy Box :<asp:TextBoxID="DummyBox"runat="server"/>

<br/>

<asp:ButtonID="FakeOk"style="display:none" runat="server"Text="OK"/>

<asp:ButtonID="FakeCancel"style="display:none" runat="server"Text="Cancel"/>

<br/>

<asp:ButtonID="TheRealDeal_Ok"runat="server"Text="OK Validate"OnClick="Okay_Validate"/>

<asp:ButtonID="TheRealDeal_Cancel"runat="server"Text="Hide"OnClick="HideViaServer_Click"/>

</asp:Panel>

<atlasToolkit:ModalPopupExtenderID="ModalPopupExtender1"runat="server">

<atlasToolkit:ModalPopupProperties

TargetControlID="Button1"

PopupControlID="Panel1"

BackgroundCssClass="modalBackground"

OkControlID="FakeOk"

CancelControlID="FakeCancel"

ID="ModalPopupProperties1"

/>

</atlasToolkit:ModalPopupExtender>

</ContentTemplate>

</atlas:UpdatePanel>

</div>

</form>

</body>

</html>

I have exactly the same problem and my IE6 build is the same as the poster above.

I noticed from his code however that he has put his dropdownlist in an updatepanel, mine was in a table for easy positioning.

surrounded the table in an updatepanel and the problem went away, the dropdownlist still hides when you show the modal poup, but it reappears again when the modalpopup is hidden.

hopefully there will be a fix for this nasty bug soon.

Si

Modal Popup with asynchronous postback

Does anyone know how to call an modal popup and get it to "show" when an asynchronous postback begins and "hide" when the asynchronous postback is complete. I am basically tring to do what I see on codeplex when you login or do a search. I have tried this a few differnet ways following articles on web perform a similar (but not exact) situation, but I can't seem to get it to work.

Hi Audley9,

To make a ModalPopupExtender shown when sending a asynchronous postback and make it hidden when the asynchronous postback finished, please add these code to your page.

 <script type="text/javascript" language="javascript">Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler); Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); function BeginRequestHandler(sender, args){ $find("ModalPopupExtender.BehaviorID").show(); } function EndRequestHandler(sender, args){ $find("ModalPopupExtender.BehaviorID").hide(); } </script>

I hope this help.

Best regards,

Jonathan

Modal window with update panel stops working after its shown and hidden once

I'm having some trouble with the modal window tool. It behaves perfectly the first time i show it, and the first time I hide it, then although the updatepanel postback behaviour still works (and the text field in the example below is still updated) the modal window doesn't fire the onOkScript or hide as it does the firsttime.

Does anyone have any ideas?

<div><asp:LinkButtonID="lbCommunityProfile"runat="server">Community Profile</asp:LinkButton></div><atlas:UpdatePanelID="updatePanel2"runat="server"Mode="Always"><ContentTemplate><asp:LabelID="lTest"runat="server"Text="NoneSet"></asp:Label></ContentTemplate></atlas:UpdatePanel><atlasToolkit:ModalPopupExtenderID="ModalPopupExtender1"runat="server"><atlasToolkit:ModalPopupPropertiesTargetControlID="lbCommunityProfile"PopupControlID="Panel1"BackgroundCssClass="modalBackground"DropShadow="true"OkControlID="OkButton"onOkScript="__doPostBack('ctl00$ContentPlaceHolder$lbCommunityProfile','');alert('go');"CancelControlID="CancelButton"/></atlasToolkit:ModalPopupExtender><asp:PanelID="Panel1"CssClass="modalPopup"runat="server"><atlas:UpdatePanelID="updatePanel1"runat="server"Mode="Conditional"><ContentTemplate>

This is panel 1

<asp:TextBoxID="tbTest"runat="server"></asp:TextBox><asp:ButtonID="OkButton"runat="server"Text="OK"OnClick="OkButton_Click"UseSubmitBehavior="false"></asp:Button><asp:ButtonID="CancelButton"runat="server"Text="Cancel"></asp:Button></ContentTemplate></atlas:UpdatePanel></asp:Panel>

and in the aspx.cs file

protectedvoid OkButton_Click(object sender,EventArgs e)

{

string str = tbTest.Text;

lTest.Text =

"set" + tbTest.Text +"end";

}

Also just wondering what the javascript is to close a modal window. I understand you can use the ok and cancel buttons. I'd like to have a x in the top right of my window and have that close.

Is this with the June CTP of Atlas?
yes the most recent ctp

yes the july ctp

The June CTP is currently (this may change very soon) the most recent Atlas release. It has a problem whereby UpdatePanel updates under Firefox break all extenders. It sounds like you're hitting this problem. Atlas is aware of it and should have a new release out soon to correct the problem. Thanks for your patience!

Just wondering if any progress has been made on this topic?

The July CTP of Atlas fixes the problem mentioned above.
I am experiencing this problem with the July CTP. Appears to notnecessarilybe fixed. I've got a lot of other things goin on in the same page... I'm going to try and issolate the issue.