i have a required fields in the 2nd and 3rd ajax accordion panels. i have the setfocus=true on my required field validator the the appropriate panel does not automatically open.
is there a way i can get it to open the panel, where the next required field is located?
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Accordion
ID="Accordion1"
runat="server">
<Panes >
<asp:AccordionPane runat="server" >
<Header>General Information </Header>
<content>
<asp:textbox id="textbox1" runat="server"/>
</content>
</asp:AccordionPane>
<asp:AccordionPane runat="server" >
<Header>Other Information </Header>
<content>
<asp:textbox id="textbox2" runat="server"/>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" SetFocusOnError="true" runat="server"
ErrorMessage="error on textbox 2" ControlToValidate="textbox2" ForeColor= "Red" ValidationGroup="main">*</asp:RequiredFieldValidator>
</content>
</asp:AccordionPane>
<asp:AccordionPane runat="server" >
<Header>More Information </Header>
<content>
<asp:textbox id="textbox3" runat="server"/>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" SetFocusOnError="true" runat="server"
ErrorMessage="error on textbox 3" ControlToValidate="textbox3" ForeColor= "Red" ValidationGroup="main">*</asp:RequiredFieldValidator>
</content>
</asp:AccordionPane>
</asp:accordion>
//the rest of the code here
//i typed this up, so please forgive if not everything is case sensitive
in this case, if i am on the first Pane, and click on the "validate" button, the required fields are in the second and third panes. the validation does fail, like it should, but the user is not taken to the textbox2 or textox3 (which are empty). how can i code it so that the focus is automatically set to the next failed textbox when the validation fails? it does work if i already have pane 2 open when i click on the "validate" button, in which case the focus is set to textbox2. but then again, if i put something in textbox2 and validate again, textbox3 fails, but the focus is not set.
hope this makes sense.
Its not strait forward to keep open two accordion panel at a time. Basically that control was not designed that way. You can use the collapsible panels instead.
But this article specifies a way to do that
http://www.c-sharpcorner.com/uploadfile/Zhenia/keeping-multiple-panes-open-in-accordion-web-control/
Also here are the link to open accordion panels using JavaScript.
http://forums.asp.net/t/1194270.aspx
jQuery Accordion - open specific section on pageload
Hope this helps
Related
I have a form with Required field validator controls to validate if the control is empty or not. I put the CausesValidation="True" in the submit button to prevent the form from saving data if there's required field empty and give an appropriate error message.
However, whenever I click submit, nothing happened: NO error message and the form is not saved either.It just stays there without any event occurring.
Also, i noticed even ALL required fields are correctly filled up, it still does nothing upon submitting, unless if I put the CausesValidation="False", then only I am able to submit the form (but no validations take place, which is not what I want).
here's my code:
My Control to validate:
<asp:TextBox runat="server" ID="TxtCostCenter" Text='<%# Bind("CostCenter") %>' MaxLength="254"
Size="254" SkinID="InputBox" />
<asp:RequiredFieldValidator ID="RfvTxtCostCenter" runat="server" ControlToValidate="TxtCostCenter"
Display="Dynamic" ErrorMessage="<%$ Resources:WebResources, ErrorFieldIsRequired %>" />
also my Submit button (there are two submit buttons though, 1 is at the top and the other is at the bottom of the page):
top:
<asp:LinkButton ID="LinkInsert" runat="server" ToolTip="<%$ Resources:WebResources, ButtonSave %>"
CausesValidation="true" CommandName="Update">
bottom:
<asp:LinkButton ID="LinkButton2" runat="server" ToolTip="<%$ Resources:WebResources, ButtonSave %>"
CausesValidation="true" CommandName="Update">
I also tried the ValidationGroup="val" but it still does not work.
I have two drop down lists where one is inside an update panel and the other is outside.When the Index is changed on ddlFaculty the whole page is posted back instead of a partial for the contents in the update panel.
I have read in the ASP docs that sometime validation controls bog down update panels but im not too sure if that's the problem here.
<div class="form-group">
<asp:Label runat="server" AssociatedControlID="ddlFaculty" CssClass="col-md-2 control-label">Faculty</asp:Label>
<div class="col-md-10">
<asp:DropDownList ID="ddlFaculty" EnableViewState="true" class="form-control" CausesValidation="false" runat="server" autopostback="true" aria-expanded="true" ValidationGroup="g4" OnSelectedIndexChanged="ddlFaculty_SelectedIndexChanged">
<asp:ListItem Value="null">Select Faculty</asp:ListItem>
<asp:ListItem Value="Arts">Faculty of Arts</asp:ListItem>
<asp:ListItem Value="Business">Faculty of Business</asp:ListItem>
<asp:ListItem Value="Health">Faculty of Health</asp:ListItem>
<asp:ListItem Value="Industries">Faculty of Service Industries</asp:ListItem>
<asp:ListItem Value="Trades">Faculty of Trades</asp:ListItem>
<asp:ListItem Value="Maori">Te Wananga Maori</asp:ListItem>
</asp:DropDownList>
<asp:RequiredFieldValidator runat="server" ControlToValidate="ddlFaculty" ValidationGroup="g4"
CssClass="text-danger" Display="Dynamic" ErrorMessage="The faculty field is required." />
</div>
</div>
<div class="form-group">
<asp:Label runat="server" AssociatedControlID="ddlCourse" CssClass="col-md-2 control-label">Course</asp:Label>
<div class="col-md-10">
<asp:UpdatePanel runat="server" id="UpdatePanel1" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label runat="server" id="lblfaculty"></asp:Label>
<asp:DropDownList runat="server" CssClass="form-control" ID="ddlCourse" ValidationGroup="g7" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddlFaculty" EventName="SelectedIndexChanged"/>
</Triggers>
</asp:UpdatePanel>
<asp:RequiredFieldValidator runat="server" ControlToValidate="ddlCourse" ValidationGroup="g7"
CssClass="text-danger" Display="Dynamic" ErrorMessage="The course field is required." />
</div>
</div>
Try using the AsyncPostBackTrigger property of the UpdatePanel.
See: How to stop UpdatePanel from causing whole page postback?
Did you try setting Button1 as an AsyncPostBackTrigger in the Triggers section, set the ChildrenAsTriggers property to true and the UpdateMode property to Conditional
Other solutions:
User control inside update panel causing full page postback
Full postback happens if your UpdatePanel cannot render its contents to a (e.g., when it is situated inside of ). So check you html inside of UpdatePanel, you might find the answer there (also, look for some incorrect xhtml, like incorrectly closed elements).
UpdatePanel causes full page postback
Unless you know of known issues that your site has when running in XHTML mode (and which you don't have time yet to fix), I'd always recommend removing the section from your web.config file (or you can explicitly set it to "Transitional" or "Strict").
This will make your HTML output standards compliant. Among other things, this will cause the HTML from your server controls to be "well formed" - meaning open and close tag elements always match. This is particularly important when you are using AJAX techniques to dynamically replace the contents of certain HTML elements on your page (otherwise the client-side JavaScript sometimes gets confused about container elements and can lead to errors). It will also ensure that ASP.NET AJAX works fine with your site.
It turns out that the page was infact sending a partial postback but I had mistaken the scroll to the top of the page when the postback had been recieved as a full page post back
I have an ASP.NET website and I have a forgot password page where the user enters their email address in a text box and when they click the button to retrieve password, the event runs as fine.
Only problem is if the user types in their email address and presses ENTER instead, it runs a search (I have a search bar at the top of the page) and so the result comes back as 'search query not found'. But this search bar at the top is on a different ASP.NET page.
So anyway, I want the event onclick to run when the user presses enter and not run a search query. Does anyone have any ideas? I've searched on this site but not really found the answer I need.
There are couple ways you can do this. If it is a webform and you have your textbox wrapped with an asp:panel you can do as below:
<asp:Panel ID="p" runat="server" DefaultButton="myButton">
<%-- Text boxes here --%>
<asp:Button ID="myButton" runat="server" />
</asp:Panel>
If its not a webform or you want to move away from that try below:
<asp:TextBox ID="TextBox1" runat="server" onkeypress="return EnterEvent(event)"></asp:TextBox>
<asp:Button ID="Button1" runat="server" style="display:none" Text="Button" />
function EnterEvent(e) {
if (e.keyCode == 13) {
__doPostBack('<%=Button1.UniqueId%>', "");
}
}
And in the codebehind fire your button click in the page load based on the parameters of the postback.
Specify the "defaultbutton" property to the ID of (event you want to fire).
You can specify the "defaultbutton" property at the Form level (in the form tag)
Or else you can define them at panel level in the tag.
The form level setting is overridden at the panel level setting.
The Event Handler for the specified button gets fired simulating a true submit button functionality.
<form id="sampleform" runat="server" defaultbutton="button1">
<div>
<asp:TextBox ID="textBox1" runat="server"></asp:TextBox>
<asp:Button ID="button2" runat="server" Text="Cancel" OnClick="Button2_Click" />
<asp:Button ID="button1" runat="server" Text="Ok" OnClick="button1_Click" />
<asp:Panel ID="panel1" runat="server" defaultbutton="Button5">
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
<asp:Button ID="Button5" runat="server" Text="Button5" OnClick="Button5_Click" />
</asp:Panel>
</div>
</form>
In this example, Button1 is the default button for the form (Type something in Textbox 1 and hit enter, button1_Click gets fired). But for "Panel 1", default button will be Button 5 (Type in Textbox3 or Textbox 5 and hit enter).
You can have any number of panels with different default button for each panel.
Adding an ASP Panel around the text box and button with the id of the button name as the property for DefaultButton was the best way to do this.
<asp:Panel ID="p" runat="server" DefaultButton="myButton">
<%-- Text boxes here --%>
<asp:Button ID="myButton" runat="server" />
</asp:Panel>
i have successfully completed my web application for an organization and it works up to expectations but i noticed one problem and tried to cure it via searching on Google and asking seniors but none of these helped much.
Problem:
I have multiple drop downs lists on page, in which selecting value in one drop down triggers the loading of another drop down i.e. Country > cities situation, problem is that whenever i click any value it scrolls page to the top and i have to scroll back again then again and again which realy looks bad and unprofessional. Please help me.
Code:
<asp:UpdatePanel ID="updGridViewSMS" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<br />
<asp:Panel ID="pnlBoxesDropDowns" runat="server">
<label style="width:400px">Relevant Region</label>
<asp:DropDownList ID="ddlRegions" runat="server" CssClass="DropDown_Width" Width="147px" OnSelectedIndexChanged="ddlRegions_SelectedIndexChanged" AppendDataBoundItems="True" AutoPostBack="true" >
<asp:ListItem Value="-1" Selected="True">-Select-</asp:ListItem>
</asp:DropDownList>
<asp:RequiredFieldValidator ID="ReqFieldValidatorRegions" runat="server"
ControlToValidate="ddlRegions" ErrorMessage="Region is Required" InitialValue="-1"
ForeColor="Red" ValidationGroup="Complaints">Region is Required</asp:RequiredFieldValidator>
<label style="width:400px">Relevant District</label>
<asp:DropDownList ID="ddlDistricts" runat="server" CssClass="DropDown_Width" Width="147px" OnSelectedIndexChanged="ddlDistricts_SelectedIndexChanged" AutoPostBack="true">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="ReqFieldValidatorDistricts" runat="server"
ControlToValidate="ddlDistricts" ErrorMessage="Region is Required" InitialValue="-1"
ForeColor="Red" ValidationGroup="Complaints">District is Required</asp:RequiredFieldValidator>
<label>Relevant P.Station</label>
<asp:DropDownList ID="ddlPoliceStations" runat="server" Width="147px" CssClass="DropDown_Width">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="ReqFieldValidatorPoliceStations" runat="server"
ControlToValidate="ddlPoliceStations" ErrorMessage="Police Station is Required" InitialValue="-1"
ForeColor="Red" ValidationGroup="Complaints">Police Station is Required</asp:RequiredFieldValidator>
<label>Priority</label>
<asp:DropDownList ID="ddlPriority" runat="server">
<asp:ListItem Text="Top" Value="1"></asp:ListItem>
<asp:ListItem Text="Normal" Value="2"></asp:ListItem>
</asp:DropDownList>
</asp:Panel>
<br />
<br />
<asp:Timer runat="server" Interval="60000" ID="RefreshSmsComplaints" OnTick="RefreshSmsComplaints_Tick" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="RefreshSmsComplaints" EventName="Tick" />
</Triggers>
</asp:UpdatePanel>
help please.
The core issue here is that you are posting back to the server on every dropdown select. This means that the web page reloads, because it is your webserver that updates the HTML versus the more modern way to do things which is to have javascript do it on the client. Here is a hacky, imperfect, but quick solution:
In the browser, inspect your html DOM. Each of your dropdown ASPX tags should have been replaced with something along the lines of
<select id="ctl000$ddlDistricts"...
You can use url hashtags to scroll to that area by appending #ctl000$ddlDistricts to the url. Since the server knows which control was posted, it can get the control's client-side ID, and write it into the following javascript (preferably at the bottom of the page).
<script type="text/javascript">
location.href='#' + <%=PostedControl.ClientID %>
</script>
Why is this imperfect? Because it will scroll your page to a point where the dropdown is at the top edge of the browser. This means that if a user selects the dropdown with it halfway down the page, once the page reloads, that will be at the top. At the very least, however, your dropdowns will then be within view.
Your original question indicated that you wanted the page to look "professional" and while this gets the job done, it is imperfect, as will all solutions be when you are dealing with classic ASPX webforms-style postbacks. Specifically, your dropdowns have something that looks like this:
OnSelectedIndexChanged=MyFunction
What this tells the ASPX form is, in essence, "when you render this dropdown control into HTML, add something into the tag like onChange="postMyFormBackToServerCausingReloadAndPageScroll. What you really want, perhaps, is to have it do onChange=GetNewDropdownFromServerAndReplaceOnPageWithoutReload. That involves more knowledge than I can add to an already long answer, but here are some helpful links:
http://www.codeproject.com/Articles/691298/Creating-AJAX-enabled-web-forms (a bit old but probably a good stepping stone)
http://www.codedigest.com/Articles/jQuery/318_Doing_AJAX_with_jQuery_in_ASPNet.aspx (a slightly more modern way to do it, but you do more yourself with this method as opposed to relying on .NET)
Lastly, the fully modern way to do things that involves completely rewriting your page
http://www.codeproject.com/Articles/575397/An-Absolute-Beginners-Tutorial-on-ASP-NET-MVC-for (not sure if this is the right article for you, just google for ".NET MVC")
I'm making dynamic radio buttons by using ASP.NET. Where there a validation control that I want to align side of this radios buttons.
Code:
<asp:RadioButtonList
ID="tiposeg"
runat="server"
RepeatColumns="3">
<asp:ListItem>a</asp:ListItem>
<asp:ListItem>b/asp:ListItem>
</asp:RadioButtonList>
<asp:RequiredFieldValidator ID="RequiredFieldValidator15"
ControlToValidate="tiposeg"
ErrorMessage='<% # foo.ErrorMessages.EmptyField %>'
runat="server"
/>
The problem is: if making by using <asp:RadioButtonList, the <asp:RequiredFieldValidator is displayed into next line, unlike if I do it by using "HTML pure", that is displayed side of control (without need to use CSS). I hope this is clear. Thanks in adavnce.
EDIT
in other words, it's possible put the <span> generated by asp:RequiredFieldValidator inside <table> generated by <asp:RadioButtonList?
EDIT 2
My current ASP.NET code;
<asp:RadioButtonList
ID="RadioButtonList1"
runat="server"
RepeatColumns="3">
<asp:ListItem>abcd</asp:ListItem>
<asp:ListItem>xyz</asp:ListItem>
</asp:RadioButtonList>
</li>
<li style="display:inline">
<asp:RequiredFieldValidator
ID="ReqiredFieldValidator1"
runat="server"
ControlToValidate="RadioButtonList1"
ErrorMessage="select atleast one radiobutton!"
/>
The form:
What I'm getting:
What I'm expecting:
Do you really want to arrange the radio buttons in a grid with multiple rows and columns? If not, delete the RepeatColumns attribute and add RepeatLayout="Flow" and RepeatDirection="Horizontal":
<asp:RadioButtonList runat="server" ID="RadioButtonList1"
RepeatLayout="Flow" RepeatDirection="Horizontal">
This will render the radio buttons without a containing <table>, so the validator will appear to the right of the last radio button.
Could you achieve what you want by putting the controls in DIVs and floating them both left?