AjaxToolkit ModalPopupExtender - How To Set Focus To A Control In The Popup Panel
Jan 7, 2010
When the user pushes the Button, I'd like to display a modal dialog box to capture a couple of values from text boxes and submit these values to the server. When the modal box is shown, I'd like the cursor to be placed in the txtFirst textbox. How do I do this? I've had trouble with registerscript commands before, so if one is needed, I hope the syntax, if you provide it, is correct.
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="MyModalSimple.aspx.vb" Inherits="MyModalSimple" %>
<%@ 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 runat="server">
<title></title>
<script type="text/javascript">
function onOk() {
form1.submit();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Button ID="Button1" runat="server" Text="Button" />
<cc1:modalpopupextender id="Button1_ModalPopupExtender" runat="server" targetcontrolid="Button1"
popupcontrolid="pnlModal" okcontrolid="btnOK" cancelcontrolid="btnCancel" DropShadow="true" OnOkScript="onOk();">
</cc1:modalpopupextender>
<asp:Panel ID="pnlModal" runat="server" Style="display: None1"
BackColor="#CCCCCC">
<br />
<table>
<tr>
<td>
<asp:Label ID="lblFirst" runat="server" Text="First"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtFirst" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblLast" runat="server" Text="Last"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtLast" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
</td>
<td align="right">
<asp:Button ID="btnOK" runat="server" Text="OK" />
<asp:Button ID="btnCancel" runat="server" Text="Cancel" />
</td>
</tr>
</table>
<br />
<br />
</asp:Panel>
</div>
</form>
</body>
</html>
Also, how could I change the above code so that the modal dialog was displayed as a result of a selection of a dropdownlist item? If I set the targetcontrolid="DropDownList1", the dialog box is display when it drops rather than when a selection is made
View 1 Replies
Similar Messages:
Feb 25, 2010
I use ajaxToolkit:ModalPopupExtender to show a modal window panel. The panel among other things contains a "Submit" button. I would like to call a code behind function on Submit. First I tried this:
[Code]....
But btnSubmitOnHold_Click() is never called. Then I replaced OnClick="btnSubmitOnHold_Click" with OnClientClick="SubmitPutOnHold" and added
<script type="text/javascript">
function SubmitPutOnHold()
{
alert('blah');
}
</script>
This alert also never shows up. Finally, I tried
<ajaxToolkit:ModalPopupExtender ID="OnHoldModalPopupExtender" runat="server" TargetControlID="btnPutOnHold" PopupControlID="pnlOnHold" BackgroundCssClass="modalBackground" DropShadow="true" OkControlID="btnSubmitOnHold" CancelControlID="btnCancelOnHold"
OnOkScript="SubmitPutOnHold" >
</ajaxToolkit:ModalPopupExtender>
View 2 Replies
Apr 19, 2010
I use a modalpopupextender to show a popup when the user clicks on a button.
<ajaxToolkit:ModalPopupExtender ID="mpe1" runat="server" TargetControlID="statusInfoLb" PopupControlID="statusInfoPanel" DropShadow="false"
OkControlID="okBtn" OnOkScript="onOk()">
</ajaxToolkit:ModalPopupExtender>
<asp:Panel ID="statusInfoPanel" runat="server" Height="185px" Width="454px" SkinID="Panel_Notification2" DefaultButton="okBtn">
The panel has an OK-Button to dispose the popup. It is also possible to click Return to dispose the popup, because the panel has the property DefaultButton="okBtn".
But this only works when the popup has the focus, which is not so from the start. How do I get the popup panel to have the focus when it shows? I would like to use jQuery.
View 1 Replies
Jan 4, 2010
In my application i use iframe (to be more specific; Greybox tool). Sometimes i had an unkown error when i open page in iframe. Then i applied this fix : [URL] and that unknown error disseppeared. But i have another problem now:( I am using following script to focus to the first textbox whenever my input pages are opened in iframe.
aField = document.getElementById('txt_PID');setTimeout("aField.focus()", 50);
After i applied previous fix, i get this error when i load page in iframe for the first time :
Can't move focus to the control because it is invisible, not enabled, or of type that does not accept focus.
Here, txt_PID doesnt contain any ajaxtoolkit things. (also Enabled= true and Visible=true etc.) . Last thing, my current test page contains just 3 controls: txt_PID just plain Asp.TextBox ajaxHTMLEditor another textboxt with MaskedEditExtender. If i remove HTMLEditor from page; i dont get that error( Can't move focus...) and also i dont get first error which i applied that fix in toolkit.
View 2 Replies
May 7, 2010
I am loading tabs (using ajaxcontrol tookit) dynamically and populating UserControls and inside tabs.
Now, I have only the below code in aspx. How to maintain the tab focus?
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
</asp:UpdatePanel>
View 2 Replies
Jul 27, 2010
I'm using modal popup extender and panel with calendar in it. Click the "Next / Previous Month" closes the modal popup. How do I tell the modal popup to ignore click events in a calendar control inside the panel targeted for popup? I'm confused because when using extender before, you had to click OkButton or Cancel to close popup. I have update panel for reason. I just minimized the code for easy review.
[Code]....
View 5 Replies
Oct 1, 2010
How can i set focus on the first textbox control in a popup (modal)? It's a login window.
I tried javascript, but that failed.
View 5 Replies
Oct 11, 2010
I am stuck in the set focus field in field in ajaxtoolkit : Tab at codebehind when button click.
[Code]....
View 5 Replies
Jan 21, 2010
In a panel (panelOrder, visible=false), there are three text box, txtA, txtB and txtC. Once click a button, code fires:
panelOrder.visible = true
txtA.focus
But, focus never work. I change to Javascript, still no luck. What is wrong?
View 5 Replies
Dec 8, 2010
I need to select my field data using a 3 step drownlist process (shown in the following screenshot):
But I can't find a way to get the Model SelectedValue and SelectedItem when Select is clicked. After it's selected it has to be filled in the Autofield on the background, and when close is pressed the original value has to be reloaded.
This is my ASP Code:
[Code]....
View 2 Replies
Nov 9, 2010
I'm having a bit of an issue in my ASP.Net application moving focus from a textbox in one user control to a text box in the next user control on the page after postback. I've searched high and low over the last several days to find a solution but, for whatever reason, have been unable to do so.
I have a page that has user controls loaded dynamically to allow a user to enter data.The number and type of user controls loaded to the page is determined at run time based on a database query.It is possible than many controls of the same type can be loaded. Each user control has its own update panel. Within the update panel of each control is a regular asp panel. Inside of the regular panel there are at least 2 server controls (any other controls that may exist in the user control are not affected by this issue) - a text box and a button.The defaultbutton property of the regular panel is set to the ID of the button within the user control. The desired behavior is to allow the user to enter data into the textbox on one user control hit enter to save the data on that user control the application will set focus to the textbox of the next user control on the page after the data from the "current" user control has been saved. Other considerations;
The application uses master pages. We make extensive use of ajax and the ajaxtoolkit in the application. I am using Visual Studio 2010 and .Net 4 The issue - when first entering the page, one can enter data into the first textbox and press the enter key. Data from "current" user control is correctly saved and focus is correctly moved to the next user control on the page.
Data can be entered into the textbox of "new" user control and when the enter key is pressed, the data is correctly save. The focus appears to move correctly to the next user control on the page.Data cannot be entered into the textbox of the control. Pressing the enter key will not save the data (because none was entered) but the focus will move to the textbox of the next user control on the page.
Data can be entered into the textbox of the user control. When the enter key is pressed, the data is correctly saved and the focus appears to move correctly to the textbox of the next control on the pageBasically, steps 3 and 4 are repeated until the end of the user controls on the page, alternating between being able to enter data and not. Other items of note When one is able to enter data into the textbox of a user control, one can correctly tab through the textboxes of each user control until the end of the page When one is not able to enter data into the textbox of a user control, pressing the tab key will take the focus to the address bar of the browser.
I created a much simplified example of the scenario described above and was able to consistently reproduce the "bad" focus behavior. All of the ajax toolkit controls and code where stripped out of the sample to rule the toolkit out as a cause. The behavior still occurs without the toolkit.
I am including the code for default.aspx and WebUserControl1.ascx.
[Code]....
[Code]....
[Code]....
[Code]....
View 2 Replies
Feb 17, 2010
Iam new to Ajax Asp.Net
Iam facing a problem in ModalPopupExtender, i have made a usercontrol to show a popup frame and made popheader for dragging the header. but iam unable to find the panel id for PopupDragHandleControlID. can anyone tell me how to do. user control
[Code]....
View 1 Replies
Aug 4, 2010
I want to set focus on a textbox inside the modal popup extender when it is visible.
View 3 Replies
Sep 27, 2010
i put PopUpcontrolExtender in my page to learn more about this toolkit base on the Ajax tutorial but ,when i click on the button, popup modal form popped up and disapear by itself fast, here is my code:
<%
<%
@
Page
Language="VB"
AutoEventWireup="true"
CodeFile="Default.aspx.vb"
Inherits="_Default" %>@
Register
Assembly="AjaxControlToolkit"
Namespace="AjaxControlToolkit"
TagPrefix="ajaxToolkit" %>
<!
<
<
DOCTYPE
html
PUBLIC
"-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">html
xmlns="http://www.w3.org/1999/xhtml">head
runat="server">
</
<
<title>Untitled
Page</title>head>body>
<form
id="form1"
runat="server">
<asp:ScriptManager
ID="ScriptManager1"
runat="server"
/>
<asp:TextBox
ID="TextBox1"
runat="server"></asp:TextBox><br
/>
<div>
<ajaxToolkit:CalendarExtender
ID="CalendarExtender1"
runat="server"
TargetControlID="TextBox1">
</ajaxToolkit:CalendarExtender>
<br
/>
<asp:TextBox
ID="TextBox2"
runat="server"
TextMode="Password"></asp:TextBox>
<ajaxToolkit:PasswordStrength
ID="PasswordStrength1"
runat="server"
TargetControlID="TextBox2">
</ajaxToolkit:PasswordStrength>
<br
/>
<br
/>
<br
/>
<asp:Button
ID="btnok"
runat="server"
Text="Pop Up Test"
Width="96px"
/>
<br
/>
<asp:Panel
ID="Panel1"
runat="server"
BackColor="#FFFFC0"
Width="184px">
<asp:Label
ID="Label1"
runat="server"
Text="This is Test"
Width="264px"
CssClass="ModalPopup"></asp:Label><br
/>
<asp:Button
ID="btnPopupOk"
runat="server"
Text="Ok"
/></asp:Panel>
<ajaxToolkit:PopupControlExtender
ID="PopupControlExtender1"
PopupControlID="panel1"
OffsetX="500"
OffsetY="100"
runat="server"
TargetControlID="btnok"
>
</ajaxToolkit:PopupControlExtender>
<br
/>
<ajaxToolkit:DropShadowExtender
ID="DropShadowExtender1"
runat="server"
Opacity="75"
TargetControlID="Panel1">
</ajaxToolkit:DropShadowExtender>
</div>
</
</
</form>body>html>
and also i can not put DropShadow="true" in my PopupControlExtender because i will get this Error: "AjaxControlToolkit.PopupControlExtender' does not have a public property named 'DropShadow'"
View 9 Replies
Dec 30, 2011
I make a panel rund corner using Ajaxtoolkit roundcorner. It works fine Now I use CSS file with this panel but roun corner do not work. Is it possible make Ajaxtoolkit working with CSS?
View 12 Replies
Apr 9, 2010
I've created a multiple uploadfile user control - upload_multiple_files.ascx:
[Code]....
which has an update panel ID = up_upload_multiple_files this user control will be placed inside a modalpopupextender. My question is when I click in any button AddFile, RemvFile, Upload there's a postback so the page is reloaded and the modalpopupextender disapears Is there a way to to troubleshoot this?
View 8 Replies
Jan 13, 2010
I wish to write a modal dialog box for my project, similar to this http://obout.com/editor_new/howto_sc.aspx.Which is very simple:When a user click on a button,the page will make a call to a web service and when it is done,a Movable Modal Dialog box will show and populated with my data, along with buttons and scripts for those buttons.It seems that the panel and popup extender can show the popup but it is not movable.Should I do it with AJAX tool kit or using pure Javascript, I see a few sample on the web, but it is kind OF complicated.
View 5 Replies
Jul 7, 2010
In the save button click I have the following code.
[Code]....
[Code]....
ModelPopupExtender pops up immediately after clicking the Save button without executing AddClient.How do I make it to pop up after AddClient has been executed?
View 8 Replies
Feb 3, 2011
[Code]....
Modalpopupextender not displaying the popup window
View 7 Replies
Feb 18, 2010
I want to authenticate a user using model popup extender. So I wrote a program to do this. Everything OK when user enter the correct details. But user enters the wrong detail, it should shows in a lablel in a popup panel. It shows; but the problem is it close the popup . But I want to keep the popup if the user enters the wrong details. How can I do this?
View 5 Replies
Nov 24, 2010
I have a page which displays a modal popup window.
In the popup window I have a textbox and 2 radio buttons. How can I set focus to the textbox when this popup window is displayed.
View 4 Replies
Jan 14, 2011
I need to set focus on a textbox in parent form after the pop extender closes. I am setting the focus before showing the popup, but when the popup closes, it is lost.
View 1 Replies
May 7, 2015
There is a Ajax ModalPopup in one of my web page and 2 buttons inside modal pop up.
HTML code:
<asp:Label ID="lbl" runat="server"></asp:Label>
<cc1:ModalPopupExtender ID="mpe" runat="server" PopupControlID="pnlPopup" TargetControlID="lbl" BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
<asp:Panel ID="pnlPopup" runat="server" CssClass="modalPopup" >
[Code] ......
I want that when I click on "button 1", I automatically jump to certain <div> tag (at the bottom of Modal pop up) which is related to "button 1" similarly, when I click on "button 2", I automatically jump to certain <div> tag (at the bottom of Modal pop up) which is related to "button 2"...
View 1 Replies
Feb 26, 2014
i have created a class as follows which will create a dynamic popup
public static void createModal() {
Button btnShow = new Button();
btnShow.ID = "btnCancel";
Panel p = new Panel();
p.ID = "ModalPanel";
p.Height = Unit.Percentage(300);
p.Width = Unit.Percentage(800);
[Code]......
And in my page my design is as follows
<asp:ScriptManager ID="script" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="up" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
<%--<Triggers>
<asp:PostBackTrigger ControlID="btnShow" />
</Triggers>--%> <ContentTemplate>
<asp:Button ID="btnShow" runat="server" Text="Open" OnClick="btnShow_Click"></asp:Button>
</ContentTemplate>
</asp:UpdatePanel>
This is my code on button click to show the popup
protected void btnShow_Click(object sender, EventArgs e) {
common.createModal(btnShow);
}
If i didnot include the trigger on the page modal is not showing, but if I include the trigger modal popup is showing, can this be achieved with out registering the triggers.
View 1 Replies
Jul 17, 2015
how to get modal popup value in current webpage from modal popup access.
View 1 Replies
