Showing posts with label extender. Show all posts
Showing posts with label extender. Show all posts

Wednesday, March 28, 2012

modal popup and login

i have a login link, upon clicking it, the modalpopup extender will appear, the problem is the validation of the data...when i click on the login buton, nothing is happening..im very new in using asp.net ajax and not that familiar with javscript. should i create a javascript to pass the validation?or is there any other easy way to do this?

thank you.Smile

Hi,

According to my test, the validation in the login control works when it's placed in a modal popup panel.

Here is my code:

<%@. 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"> protected void Button3_Click(object sender, EventArgs e) { TextBox tb = new TextBox(); Panel1.Controls.Add(tb); ModalPopupExtender1.Show(); } protected void Page_Load(object sender, EventArgs e) { } protected void Button6_Click(object sender, EventArgs e) { ModalPopupExtender1.Hide(); }</script><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title> <script type="text/javascript"> function changeID(newOkControlID) { var ext = $find("ModalPopupExtender1"); if (ext._OkControlID) { $removeHandler($get(ext._OkControlID), 'click', ext._okHandler); ext._okHandler = Function.createDelegate(ext, ext._onOk); ext._OkControlID = newOkControlID; $addHandler($get(ext._OkControlID), 'click', ext._okHandler); } } </script></head><body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> </div> <asp:Button ID="Button1" runat="server" Text="Popup via client" /> <asp:Button ID="Button3" runat="server" OnClick="Button3_Click" Text="Popup via Server" />  <input id="Button5" type="button" value="Change OK Button ID" onclick="changeID('button4');" /> <asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px"> <asp:Panel ID="Panel2" runat="server" Style="cursor: move;background-color:#DDDDDD;border:solid 1px Gray;color:Black"> <div> <p>Choose the paragraph style you would like:</p> </div> </asp:Panel> This is popup control<asp:Login ID="Login1" runat="server"> </asp:Login> <br /> <input id="Button2" type="button" value="button" /> <input id="Button4" type="button" value="button" /> <asp:Button ID="Button6" runat="server" OnClick="Button6_Click" Text="Hide via Server" /></asp:Panel>     <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" OkControlID="Button2" PopupDragHandleControlID="Panel2" PopupControlID="Panel1" runat="server" TargetControlID="Button1"> </ajaxToolkit:ModalPopupExtender> <script type="text/javascript"> Sys.Application.add_load(modalSetup); function SetFocusOnControl() { $get("Login1_UserName").focus(); } function modalSetup() { var modalPopup = $find('ModalPopupExtender1'); modalPopup.add_shown(SetFocusOnControl); // modalPopup.show(); }</script> </form></body></html>

Modal Popup creation problem

I have a project that has several asp .net AJAX controls including a Tab Panel extender, a couple of updatepanels, and a modalpopup. Everything was doing OK (except for the tab panel that keeps disappering on hover over) until I added the modal popup. The page will load but I noticed that I was getting an "Done, but with errors on page" warning and the calendar that sets everything in motion didn't work.

It appears that the modalpopup isn't being created properly at runtime. I see this error message when I follow the error message in Firefox (Firebug):

this._popupElement has no properties
http://mycomputer/mysite/ScriptResource.axd?d=SpCqOYElt5QoLvf_3bBsv_BcFBS3DknA98So9KH3qtFJpwGddMmhi5Fqd8Ekf5Yggy7J5Sw9EaHCqlfKI150bSF4O1S83qGJROU-7k6SGQc1&t=633121015687656250
Line 66

Which further expands to:

initialize()ScriptResource.ax... (line 66)

Sys$Component$endUpdate()ScriptResource.ax... (line 2702)

Sys$Component$create(function(),Object BackgroundCssClass=modal CancelControlID=btnClose,null,null,input#Trigger)ScriptResource.ax... (line 2856)

(no name)()livereports.aspx (line 217)

_handler(Object _disposableObjects=[4] _components=Object,Object)ScriptResource.ax... (line 2503)

Sys$_Application$_doInitialize()ScriptResource.ax... (line 3792)

(no name)()

Why isn't there a comma between Object BackgroundCssClass=modal & CancelControlID=btnClose? Where are all of the properties that I set? This is how the modalpopupextender is set up in my project:

I am totally lost since I don't see much difference in the source code between mine and the AJAX samples function:

Mine:

Sys.Application.add_init(function() {

217 $create(AjaxControlToolkit.ModalPopupBehavior, {"BackgroundCssClass":"modal","CancelControlID":"btnClose","DropShadow":true,"DynamicServicePath":"/scmghd/livereports.aspx","OkControlID":"btnClose","PopupControlID":"gvResults","PopupDragHandleControlID":"pnl1","id":"ModalPopupExtender2"}, null, null, $get("HiddenModalTrigger"));

218});

AJAX Sample:

Sys.Application.add_init(function() {

314 $create(AjaxControlToolkit.ModalPopupBehavior, {"BackgroundCssClass":"modalBackground","CancelControlID":"ctl00_SampleContent_CancelButton","DropShadow":true,"OkControlID":"ctl00_SampleContent_OkButton","OnOkScript":"onOk()","PopupControlID":"ctl00_SampleContent_Panel1","PopupDragHandleControlID":"ctl00_SampleContent_Panel3","dynamicServicePath":"/AJAX/AjaxControlToolkit/Samples/ModalPopup/ModalPopup.aspx","id":"ctl00_SampleContent_ModalPopupExtender"}, null, null, $get("ctl00_SampleContent_LinkButton1"));

315});

This is the way I have the modalpopup set in Visual Web Dev:

<cc1:ModalPopupExtenderID="ModalPopupExtender2"runat="server"BackgroundCssClass="modal"TargetControlID="Trigger"PopupDragHandleControlID="pnl1"PopupControlID="gvResults"CancelControlID="btnClose"OkControlID="btnClose"DropShadow=true>

</cc1:ModalPopupExtender>

Again any help is appreciated!

I hate to be a bother but this project is very important...any help would greatly be appreciated.

Thanks

Modal PopUp Extender

Based on the video example about using modal Popupextender. But the only changes i did is replace the option controls to textbox controls. The flow will only display the text on what I've inputted on the textbox in the modal window. The problem is how am I going to refresh the value of the textbox to null everytime I clicked the button to popup the modalwindow?

This might help:http://forums.asp.net/t/1137922.aspx

Modal popup extender and multiple dropdownlists

Hi,

My requirement is that-On a panel,which acts as modal pup up extender,I have multipledropdownlists(cascading),so on selecting one,an autopostback happens,and then the modal pop up disappears.How can I handle,autopostbacksfrom modalpopup so that,the popup does not disappear.

In general, wrapping content in an UpdatePanel is the way to hide the postback of that content. ModalPopup allows UpdatePanels to be within the popup content, so that should work here, too.

Modal Popup Extender and Iframe

Hi @dotnet.itags.org.all, misters

I would like to show a ModalPopupExtender in my page. I have an iframe in the page that shows an PDF file.

The trouble for me, when ModalPopup is shown the iframe appears above it and I cannot see contents of Modal Popup (only dropdownlist appears above)

Thanks in advance for any help. I have lastest version of Ajax Toolkit.

Greetings

I dont Quite have the same problem but it does involve the modal popup extender and i have an IFrame. I would like to display te modal popup in the parent of the IFrame. In other words when clicking on the link in the IFrame the popup should cover the whole screen not just the Iframe. I would also then need to select a value from the popup and pass it back to the Iframe. Is this possible anyone, its killing me. While im at another problem im having is that i have the ajax slider control inside a scrolling DIV but when that DIV is scrolled the ajax slider moves with the scroll instead of just staying wher it belongs. Help me please


I have exactly the same problem, the PDF object is covering my ModalPopup, I tried setting the modalpopu z-index higher than the iframe, but that didn't work, have anyone a working solution?Thanks!WL

Modal popup extender and divs

Good day!

First I have to say that the ajax control toolkit is great! Lots and lots of good stuff in there.

Now, I have designed a site that has a header, content and a footer div (to avoid frames, but to simulate the effect.. if there is a better way, please let me know).
The divs are positioned absolutely, and their locations are to some parts calculated during display-time. Here's a small diagram, to help you understand better.

<html><head></head>
<body><form>
<div id="divHeader">...</div>
<div id="divContent">
<div id="anotherDiv">...</div><modalpopupextender />
</div>
<div id="divFooter">...</div>
</form></body></html>

Very simplified, but it displays my setup.

Now to the problem. The modal popup extender displays a black opaque panel, to darken the inaccessible content. With this setup however, it only blocks out the divContent div, not the header nor the footer divs.

Any ideas of how to solve this?

That should not cause the modal background to not cover the header and footer. Could you possibly post a small complete code sample that reproduces this issue?


Ok then. I made a small sample site. I have no hosting, so Ill paste the code here. The codefile only contains the eventhandler btnShowPopup_Click, and all it does is ModalPopupExtender1.Show();. If you want to, I can zip the entire project to a file instead, but I think its more accessible this way, since its not very much code.

So, here we go (with excuses for poor formatting):

<%@. Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %
<%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title
<script type="text/javascript">
window.onload = Init;
function SetContentSize()
{
divContent.style.top = divHeader.offsetHeight;
}

function Init()
{
window.onresize = SetContentSize;
SetContentSize();
}

</script>
<style type="text/css">
.modalBackground {
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div id="divHeader" style="position:absolute; left: 0px; right: 0px; top:0px; height: 100px;
background-color: #ffcc00; text-align: center; vertical-align: middle;">
This is the header div.<br />
This will not be covered by the extenders overlay.
</div>
<div id="divContent" style="position:absolute; left: 0px; right: 0px; bottom: 0px;
background-color: #ffee99; text-align: center; vertical-align: middle;">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
This is the content div.
<asp:Button ID="btnShowPopup" runat="server" Text="Show popup" OnClick="btnShowPopup_Click" />
<asp:Panel Style="border-right: gray 1px solid; border-top: gray 1px solid; display: none;
vertical-align: top; border-left: gray 1px solid; color: black; border-bottom: gray 1px solid;
background-color: #dddddd" ID="pnlPopup" runat="server" HorizontalAlign="Left">
This is text inside the popup!
<asp:Button ID="btnClose" runat="server" Text="Close" />
</asp:Panel>
<asp:Button Style="visibility: hidden" ID="btnHidden1" runat="server"></asp:Button>
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" DropShadow="true"
CancelControlID="btnClose" BackgroundCssClass="modalBackground" PopupControlID="pnlPopup"
TargetControlID="btnHidden1">
</cc1:ModalPopupExtender>
</ContentTemplate></asp:UpdatePanel>
</div>
</form>
</body>
</html>


I should add; Even though the script in my example fills no real function, it does in the live version where my divHeader has a variable height. I included it to be more true to the original.


It seems to be a problem. Thanks for providing a repro. Work Item8796 tracks it.

Thank you for the attention.
I tried replacing the modal popup with an ordinary div. I think one can summarize the problem like this: Internet Explorer can NOT position an absolutely positioned div outside of the absolutely positioned div in which it resides. Therefore, I believe this to be more of a browser problem, than an ajax problem.

I have not tested this on Firefox / Opera / etc.. It would be interesting to see if they can handle it.

Jeez, I just read what I wrote above.. I assure you though; it makes sense if you think about it. Angel

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 - Setting Focus

Hi,

I have HostModalPopup.aspx webform with a ShowModalWindow button (When clicked shows a Modal Popup Window) and there are some text boxes after the button.

The Modal Pop Up window has 3 controls: a text box field, a submit button and a close button.

1) When the Modal Popup window is shown, I would like to be able to setfocus to the textbox. I thought I should be able to do this with document.getElementById('TextBox1').focus() on some event that gets triggered when the modal popup window is made visible, but I could not find any such DHTML event.

2) The taborder/tabindex of the controls in HostModalPopup.aspx, once the ShowModalWindow is opened and closed, no longer works. If I set the focus to one of the textboxes and hit tab the cursor goes to address bar instead of going to a textbox with next tabindex. I am using AJAX Control Kit verion 1.0.10606.0

Any help is greatly appreciated.

- Surya

Use ScriptManager1.SetFocus(TextBox1)


http://www.asp.net/AJAX/Documentation/Live/mref/O_T_System_Web_UI_ScriptManager_SetFocus.aspx

http://msdn2.microsoft.com/en-us/e04ah0f4


Thank you guys!

The ScriptManager.SetFocus did it for the first issue.

-Surya

Modal Popup Extender - how to set values on main page

Hi

I've got a Modal Popup Extender that shows a Pane and greys out the main page in the background. The main page has a Label (Label1) on it and the Pane (Pane1) that is being popped up has a Text Box (Text1) on it.

I want the user to fill in some text in the Text Box on the popped up Pane, and when the user clicks Button1 (the OK button on the Pane), it should take TextBox1.Text and place it in Label1.Text.

How do I do this? I'm using C#. Sorry, I know this is a basic questions for all you AJAX guru's out there. :)

Thanks in advance!

Regards
Edward

try javascript,

label1.value = textbox1.value;

Modal Popup Extender

hi

i have used ModalPopupExtender on my web page and it is really good but the problem is if i click any button then it close the panel.

is it possible to use some validation control on the panel like i want to insert data into database, also i want to add a close button on the panel, without click close button that panel will be enable on the page.

thanks is advance

You can add a UpdatePanel in your panel, and put your detailviews in this UpdatePanel.

All the behavior you do in the UpdatePanel will not effect other controls that out side of this Panel.

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

Hi,

I have one page on that one button is there, when I click the button am calling one function and after executing that function am using Response.write method to show popup and download the genreated file by that function.

But problem iss when I click upon that button am showing modal popup but that pop is not going off when response.end occurs.

I used one function in client script and tried to call with code as,

Page.ClientScript.RegisterStartupScript(Me.GetType(),"Sample", _

"<script language=""javascript"" type=""text/javascript"">" & vbNewLine & _

"Sample()" & vbNewLine & _

"</script>")

ans that sample function code is,

function Sample()

{

var modal = $find('ModalPopupExtender2');

modal.hide();

}

but this function is not getting called.

My main concern is to hide that modal popup when that save/download dialog gets disappered or cancelled.

Can anybody give me the solution over this.

Please.

Thanks,

Rohit

Hi Rohit,

Would you please use these code?

Page.ClientScript.RegisterClientScriptBlock(Page.GetType(), "SampleKey", "sample()", true);

If it doesn't work, please review its generated HTML code. You can post your workable and tiny repro here.

Best regards,

Jonathan

Modal Popup Extender Flash

I'm using the MPE to display a panel that contains a gridview.
It works fine, except that when the page loads (whether it be IE or Mozilla), the panel containing the gridview is visible for a split second and then the MPE hides it. It's kind of confusing to a user - does anybody know how to fix this?

Surround the panel with a div as such:

<div id="divModalPopup" style="display:none"> <asp:Panel ID="pnlModalPopup" runat="server" Height="50px" Width="667px" BackColor="White"><!-- Some content --> </asp:Panel></div>

Thanks,
Chad

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.

Modal Popup Extender blinks on page on initial page load

Hello,

I am getting some undesirable behavior from the modal popup extender control. Everything works fine except for the fact that when i load or reload the page, you can see the modal popup box at the bottom of the page blink for about 1 second and then disappear. Why does it do this? Has anyone else seen this before? I would rather not see the box blink at the bottom of the page when loading the page, it just looks weird. Other than that, it appears fine when i click my button. Its just annoying to see it on the page load.

Any ideas here?

usually you need to set the style='display:none'


awsome...that did the trick...in the panel tag i did this:

<asp:Panel ID="pnlModalCheckUser" runat="server" Height="110px" Width="250px" CssClass="modalPopup"style="display:none">

even though style didn't come up as a valid property for the asp:panel tag in intellisense. But it works, i'm assuming it just passed the style along to the processed div tag.

Thanks a bunch!

Modal Popup Extender and validation

Hi All,

I have a page utilising the ModalPopupExtender and was hoping that someone could give me some guidance as to how I can get, if it is possible, the client side validation to fire before the ModalExtender does?

I.e. I would like the Modal Popup to only display if validation passes.

Any thoughts would be greatly appreciated

Pete

Is there a way to set the event firing order or a dependecy for an ajax event event? e.g. before you do B you must successfully do A first.

Surely the validation rules must be honoured?


I just answered a very similar question:http://forums.asp.net/ShowPost.aspx?PostID=1505722

Hi

The above link no longer works - any chance of reposting the solution to this please?

Thanks

Ben

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 Extender and set focus

I want to set focus on a textbox inside the modal popup extender when it is made visible and I cant for the life of me find an appropriate way to do this!

The popupcontrol is not good because when I add the attribute onclick it gets run before the textbox is made visible!

Any clues?

Cheers

Ross

Sorry, I hate to bump this but could really do with knowing how this can be done.

Ross


You can try registering a clientside startup script that sets focus to the text box. Or you can use the clientside script to open the modal popup and then set the focus.

#1:

page.ClientScript.RegisterStartupScript(me.getType(), "setfocus", "<script language=""javascript"">$get('textbox1').focus();</script>")

#2:

<script language="javascript">

function openModal(){

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

$get('textbox1').focus();

}

</script>

The ids of the mpe and the textbox will need to be the client rendered id, so if you are using a masterpage or if this is in a user control, you will need to get the clientid from the server or from the output of the page prior to implimenting the code.

Let me know if need anyhting else.

-Alan


the solution in this article worked for me (although i would like to see something much better)

http://www.aspdotnetcodes.com/ModalPopup_Postback.aspx

then you add something similar to the following in the Page_Load event:

btn.Attributes.Add("onclick","fnSetFocus('" + control.ClientID +"');");


hi

go to the following link

http://forums.asp.net/t/1103365.aspx

Modal Popup Extender and Page Refresh ?

I use Modal Popup Extender and there are two buttons, login button and cancel button...Everytime any of the buttons are clicked whole page is refreshed. I want to stop that for cancel button, but don't know how that will work for login as I want some underlying events to happen when that is clicked.

How can I achieve the above functionality ?

Wrap the modalpopup in an updatepanel to take advantage of partial postbacks. You can also assign the cancel button as the cancelcontrolid of the modalpopup so that it will close the popup using JS without a postback.

Modal Popup Extender and OkControID

Hello misters,

I have a page ASPX with ModalPopupExtender control, with the following properties:

TargetControlID="btnAnyadirObs"
PopupControlID="Panel1"


OkControlID="btnAnyadirObsAceptar"
CancelControlID="btnAnyadirObsCancel"
OnOkScript="onYes()"
OnCancelScript="onCancel()"

I have a Panel (Panel1) with two buttons: btnAnyadirObsAceptar and btnAnyadirObsCancel.

The buttons have Click event (code-behind .cs).

My trouble is that it is not execute Click event for button btnAnyadirObsAceptar (the OkControlID). I want to press the button OK in modal popup extender and I call Click event (server event of code-behind, file .cs).

Only execute onYes function javascript but it fails because typeof(Sys.WebForms.PostBackAction) == "undefined"

For javascript function onCancel() , $("Label1") fails.

See all code below, please.


The code begins here:

<asp:Label ID="Label1" runat="server" />

... more code...

<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server"

TargetControlID="btnAnyadirObs"
PopupControlID="Panel1"
OkControlID="btnAnyadirObsAceptar"
CancelControlID="btnAnyadirObsCancel"
OnOkScript="onYes()"
OnCancelScript="onCancel()"

DropShadow="true" PopupDragHandleControlID="Panel3">
</cc1:ModalPopupExtender>

<asp:Panel ID="Panel1" runat="server" Style="display: none">

<asp:Panel ID="Panel3" runat="server"><div>TITLE</div></asp:Panel>


<filtros:EmbeddedUserControlLoader ID="UCObservacionesPopup" runat="server" AssemblyName="TareaRetenida.UC"
ControlClassName="UCRetenidaCentrolControlObservacionesPopup" ControlNamespace="TareaRetenida.UC" />


<controles:Boton ID="btnAnyadirObsAceptar" runat="server" CausesValidation="false" Text="Resx OK" OnClick="btnAnyadirObsAceptar_Click" />

<controles:Boton ID="btnAnyadirObsCancel" runat="server" CausesValidation="false" Text="Resx Cancel" OnClick="btnAnyadirObsCancel_Click" />


</asp:Panel>

The javascript functions:

function onYes()

{

var idBoton= "MY CLIENTID OF BUTTON OK";
if (typeof(Sys.WebForms.PostBackAction) != "undefined")
{
var postBack = new Sys.WebForms.PostBackAction();
postBack.set_target(idBoton);
postBack.set_eventArgument('');
postBack.performAction();
}

}

function onCancel()
{
//no postback necessary
try
{
$('Label1').innerText = 'Action canceled';
}
catch(err)
{
alert('onCancel' + "Error " + err.description);
}
}

Thanks in advanced, greetings regards

Hi,

you need to clear the OKControlID property otherwise the postback won't be propagated to the server.

Grz, Kris.


I am having the same issue. I cleared the OKControlID and now my js is not running? Is there something else I need to do?

Hi Alice,

myNameIsAlice:

I cleared the OKControlID and now my js is not running?

which js isn't running? Know that clearing the OKControlID just makes it a normal postbacking control again.

Grz, Kris.