Because of how my page is set up, I can not send postBack events and reload the page with controls in new positions. Therefore, I need to move controls around using javascript.
If I were to have 3 radio buttons on my UI, and when one of the radio buttons is clicked in the list, I want to be able to slide the other radio buttons down and have the clicked radio button show new text boxes, drop down lists, etc, to gain more information from the user. Code example:
(When no radio buttons are clicked)
<asp:RadioButton ID="radioYes" GroupName="group1" Text="Yes, I'll give you more information." runat="server" /><br />
<asp:RadioButton ID="radioMaybe" GroupName="group1" Text="Not sure yet." runat="server" /><br />
<asp:RadioButton ID="radioNo" GroupName="group1" Text="Nope." runat="server" /><br />
Once the 'yes' radio button is pushed, I want to have 'maybe' and 'no' slide down and leave room as if I had this coded up:
<asp:RadioButton ID="radioYes" GroupName="group1" Text="Yes, I'll give you more information." runat="server" /><br />
<asp:Label ID="labelName" Text="Name" runat="server" /><br />
<asp:TextBox ID="textBox" runat="server" /><br />
<asp:RadioButton ID="radioMaybe" GroupName="group1" Text="Not sure yet." runat="server" /><br />
<asp:RadioButton ID="radioNo" GroupName="group1" Text="Nope." runat="server" /><br />
And the opposite effect could happen too: When 'yes' is unclicked, the radio buttons slide back up.
Maybe you can use jQuery slideToggle(),or ajaxtoolkit PopupControl http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/PopupControl/PopupControl.aspx
My english is very poor ,But if you want have slide down you can use this.
Related
net application, in that i have many required field text boxes in Tabcontrol in both tab panels.
when i have clicked submit button, it only focus current tab text box controls,
but when i filled all the current tab panel controls then press submit button,
i want to focus the next tab panel text box which is empty,
but it can't focus on another tab panel textbox.
i don't know how to focus this, please any body let me know.
required="required"
<td><asp:Label ID="lblCustomerMobileNo" runat="server" Text="Customer Mobile No" CssClass="label"></asp:Label></td>
<td><asp:TextBox ID="txtCustomerMobileNo" runat="server" CssClass="smalltextbox" PlaceHolder="Customer Mobile No" Width="100px" MaxLength="10" OnKeypress="javascript:return onlyNumbers(event,this.value);"
required="required" /> </td>
when i am in TAB 4, i press save button it focus required text box.
but i filled customer mobile no, and then press save button TAB 0 also having some required field text boxes but its not focus..
you can use javascript function to check fields and focus in tab which has empty field.
or in server side check fields and set active tab
If you use the build-in aspnet Validation Controls, you have the SetFocusOnError property.
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ErrorMessage="Field is required" ValidationGroup="myForm" ControlToValidate="TextBox1"
SetFocusOnError="true"></asp:RequiredFieldValidator>
<br />
<asp:Button ID="Button1" runat="server" Text="Button" ValidationGroup="myForm" />
What I'm doing is creating a list of tickets using a ListView. One of the controls in the item template is a link button that shows the header of the ticket. When the user clicks the link button, I want to open a modal window that shows the ticket in readable format. To get the ticket, I'll be passing that page a variable and it'll do the rest; nothing complicated. The page will have 3 buttons and the windows needs to close when you click one of them.
Now, I figured out how to use the ModalPopupExtender from the Ajax tookit more or less. You create the panel in it's own div which stays hidden. I created a click event that basically uses a webclient to download the html from the page and insert it into that div's innerHtml. This seems to work the first time. But as soon as you click a different link, the page pukes and says something about it being in an illegal state.
I'm not sure if I'm going about this wrong, and I can't find any decent examples of how to do this. Well there's one, but the english is hard to understand and it's in VB instead of C#. Any help?
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<form id="form1" runat="server">
<div><asp:toolkitscriptmanager id="ToolkitScriptManager1" runat="server"> </asp:toolkitscriptmanager>
<br />
<asp:modalpopupextender dropshadow="true" okcontrolid="btnOk" cancelcontrolid="btnClose" runat="server" popupcontrolid="Panel1" id="ModalPopupExtender1" targetcontrolid="Button1" />
<asp:panel id="Panel1" runat="server" cssclass="modalPopup" style="display: none;"> This is basic modal popup. <br /><br />
<asp:Button ID="btnOk" runat="server" Text="Ok" /> <asp:Button ID="btnClose" runat="server" Text="Close Me" />
<iframe src="http://www.google.com"></iframe>
</asp:panel>
<asp:button id="Button1" runat="server" text="First Modal Popup" />
</div>
</form>
I am wondering why this, submitting on pressing enter, is only working on ie and not on google chrome...
This is the code I use actually :
<div class="TxtBox">
<asp:Panel ID="lepanel" runat="server" DefaultButton="Connect">
<asp:TextBox ID="TxtUserLogin" runat="server" TabIndex="1" Text="login" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="*"
Display="Static" ControlToValidate="TxtUserLogin"></asp:RequiredFieldValidator>
<asp:TextBox ID="UserPass" runat="server" TabIndex="2" Text="password" TextMode="Password" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="*"
Display="Static" ControlToValidate="UserPass"></asp:RequiredFieldValidator>
<asp:LinkButton ID="Connect" runat="server" OnClick="Connect_Click" TabIndex="3">connect</asp:LinkButton>
</asp:Panel>
<asp:Label ID="MsgError" runat="server" />
<div class="ForgottenPass">
forgotten password ?
</div>
<div class="RememberMe">
<asp:CheckBox runat="server" ID="chkBoxRemember" />
stay signed in
</div>
</div>
A LinkButton renders as a HTML anchor tag.
HTML anchor tags do not submit HTML forms. Therefore when you click Enter, this is not actioning any submit button.
A Button renders as HTML <input type="submit" />
An ImageButton renders as HTML <input type="image" />
These elements will both action your form.
Therefore changing LinkButton to Button or ImageButton is the best solution.
Using a LinkButton is also bad for users who do not have javascript enabled.
This is a known issue, when you add as default a link button (actually a link) and not a real button then there is a case that is not trigger properly.
So if you change it to real button you make it work.
I am trying to bypass the ConfirmButtonExtender depending on the value of another field in the page.
Basically, when a user click on my "Cancel" button, I normally display a modalpopup using the confirmbuttonextender and the modalpopupextender to display a dialog box confirming that they wish to cancel any changes they have made and return to the prior screen. If they click Yes, the button's onclick event fires which calls some code in the codebehind and redirects the user to another page. If they click no, it just returns to the same page, with no changes.
However, in some situations, I know that my user is unable to perform any edits (they aren't allowed to) and for those users, I don't want to display the "Are you sure you want to leave you will loose any changes" dialog box.
I've set a hidden checkbox field named "cbAllowEdit" to indicate whether the user is allowed to edit the fields or not.
I was trying to use the technique found at link text to get this working but it just doesn't even seem to be firing the button's onclientclick event at all.
Here is my code.
ASPX & Javascript
<asp:CheckBox ID="cbAllowEdit" runat="server" Checked="true" />
<asp:Button ID="btnCancel" runat="server" CausesValidation="false"
OnClick="btnCancel_Click" Text="Cancel" OnClientClick="disableSubmit();return false;" />
<ajaxToolKit:ConfirmButtonExtender ID="ConfirmButtonExtenderbtnCancel"
runat="server" DisplayModalPopupID="ModalPopupExtenderbtnCancel"
TargetControlID="btnCancel" BehaviorID="ConfirmButtonExtenderbtnCancel" />
<ajaxToolKit:ModalPopupExtender ID="ModalPopupExtenderbtnCancel" runat="server"
BackgroundCssClass="modalBackground" CancelControlID="btnCancelCancel"
OkControlID="btnConfirmCancel" PopupControlID="ConfirmCancelPanel"
TargetControlID="btnCancel" />
<asp:Panel ID="ConfirmCancelPanel" runat="server" CssClass="modalWindow"
Height="200" Width="450">
<p class="confirmMessage">
Are you sure you want to navigate away from this record?
</p>
<div align="center">
<p class="feedbackError">If you have made any changes to the record since the last time
you saved, they will be lost.</p>
<asp:Button ID="btnConfirmCancel" runat="server" Text="Yes" Width="75" />
<asp:Button ID="btnCancelCancel" runat="server" Text="No" Width="75" />
</div>
</asp:Panel>
<script type="text/javascript">
function disableSubmit() {
if (document.getElementById('<%= cbAllowEdit.ClientID %>').checked) {
return checkSubmit();
}
else {
return true;
}
}
function checkSubmit() {
var confirmButton = $find('ConfirmButtonExtenderbtnCancel');
confirmButton._displayConfirmDialog();
}
</script>
Code behind:
/// <summary>
/// Runs when the btnCancel button is clicked.
/// </summary>
protected void btnCancel_Click(object sender, EventArgs e)
{
Page.Response.Redirect("~/Searches/LookupCode/Default.aspx");
}
any ideas on what I am doing wrong?
As Chris said, you don't have to have a ConfirmButtonExtender and ModalPopupExtender (although this looks like a way round the fact that the JavaScript confirm() function is limited to OK and Cancel buttons in its' dialog - noted as a technique for the future :-) )
If you know in your code-behind that the user isn't going to be doing any editing (as evidenced by your cbAllowEdit control), then you should be able to just disable the ConfirmButtonExtender:
ConfirmButtonExtenderbtnCancel.Enabled = false;
Then clicking the Cancel button should take you into your code-behind function without confirmation at all.
EDIT: The ConfirmPopupExtender shouldn't be pointing to the btnCancel. Instead, it should be pointing to a hidden button (this is what the example in the link does).
<asp:Button ID="btnCancel" runat="server" CausesValidation="false"
OnClick="btnCancel_Click" Text="Cancel" OnClientClick="disableSubmit();return false;" />
<!-- This is the Hidden Buttons that you need to add and reference in the ConfirmButtonExtender -->
<asp:Button ID="HiddenButtonConfirm" runat="server" Text="" style="display:none;" />
<asp:Button ID="HiddenButtonModal" runat="server" Text="" style="display:none;" />
<ajaxToolKit:ConfirmButtonExtender ID="ConfirmButtonExtenderbtnCancel"
runat="server" DisplayModalPopupID="ModalPopupExtenderbtnCancel"
TargetControlID="HiddenButtonConfirm" BehaviorID="ConfirmButtonExtenderbtnCancel" />
<!-- You'll also want the ModalPopup to point to a seperate hidden button. -->
<ajaxToolKit:ModalPopupExtender ID="ModalPopupExtenderbtnCancel" runat="server"
BackgroundCssClass="modalBackground" CancelControlID="btnCancelCancel"
OkControlID="btnConfirmCancel" PopupControlID="ConfirmCancelPanel"
TargetControlID="HiddenButtonModal" />
This javascript might work:
var confirmbtn = $find('ConfirmButtonExtenderID');
confirmbtn.enabled =false;
//ConfirmButtonExtenderID needs to be the name of your ConfirmButtonExtender ID [:$]
I want to show a modal popup when a user click on an asp button. The user must select an option of a panel. The value of the option selected must be saved to an input hidden and then the asp.net button must do a PostBack.
Can I do that?
Thank you!
It is possible for a ModalPopupExtender to be displayed using a postback. You'll need an invisible target control. The extender is attached to this hidden control.
<asp:Button runat="server" ID="btnShowModal" Text="Show"
OnClick="btnShowModal_Click" />
<asp:Button runat="server" ID="HiddenForModal" style="display: none" />
<ajaxToolKit:ModalPopupExtender ID="Modal1" runat="server"
TargetControlID="HiddenForModal" PopupControlID="PopupPanel" />
In your message handler in code-behind, you'll show the ModalPopupExtender:
Modal1.Show();
And in the code you're using to dismiss the Modal, call the ModalPopupExtender's Hide function:
Modal1.Hide();
I use this method for showing a modal that displays detailed data that I retrieve from a database based on what's selected in a GridView.
Add your Button or LinkButton
<asp:Button ID="MyButton" Text="Click Here" runat="server" />
Add a Panel to hold your options with a DropDownList
<asp:Panel ID="MyPanel" runat="server">
<asp:DropDownList ID="MyDropDown" runat="server">
<asp:ListItem Value="1" Text="Option 1" />
</asp:DropDownList>
<asp:Button ID="SaveBtn" Text="Save" OnClick="Save_Click" runat="server" />
<asp:Button ID="CancelBtn" Text="Cancel" runat="server" />
</asp:Panel>
Add your ModelPopupExtender
<act:ModalPopupExtender ID="Mpe1" TargetControlID="MyButton"
CancelControlID="CancelBtn" PopupControlID="MyPanel" runat="server" />
Then add your code behind to the SaveBtn Button
public void SaveBtn_Click(object sender, EventArgs e) {
string selectedOption = MyDropDown.SelectedValue;
}
Finally, I've decided to use jQuery to show a ModalPopUp. The following question has the answer to this question:
jQuery UI's Dialog doesn't work on ASP.NET
If you are not agree, tell me.