I'm trying to get the Ajax Toolkit rating control working in ASP.NET 4. I've added it to the page, and added the registration statement but it renders as invisible (ie: it renders on the page with display:none.
I have a standard scriptmanager on my masterpage, and a standard scriptmanagerproxy on the page itself.
I've tried putting the rating in an updatepanel, but the same thing happens.
This is my code:
<ajaxToolkit:Rating ID="ratRating" runat="server" MaxRating="5" StarCssClass="ratingStar" WaitingStarCssClass="savedRatingStar" FilledStarCssClass="filledRatingStar" EmptyStarCssClass="emptyRatingStar" OnChanged="rating_Changed" />
Which results in the following code (notice it's hidden with an inline style)
<div id="ctl00_ctl00_ctl00_cphBody_cphBody_cphBody_editRecipeForm_ratRating">
<input type="hidden" value="3" id="ctl00_ctl00_ctl00_cphBody_cphBody_cphBody_editRecipeForm_ratRating_RatingExtender_ClientState" name="ctl00$ctl00$ctl00$cphBody$cphBody$cphBody$editRecipeForm$ratRating_RatingExtender_ClientState">
<a style="text-decoration:none" title="3" id="ctl00_ctl00_ctl00_cphBody_cphBody_cphBody_editRecipeForm_ratRating_A" href="javascript:void(0)">
<span style="float:left;" class="ratingStar filledRatingStar" id="ctl00_ctl00_ctl00_cphBody_cphBody_cphBody_editRecipeForm_ratRating_Star_1"> </span>
<span style="float:left;" class="ratingStar filledRatingStar" id="ctl00_ctl00_ctl00_cphBody_cphBody_cphBody_editRecipeForm_ratRating_Star_2"> </span>
<span style="float:left;" class="ratingStar filledRatingStar" id="ctl00_ctl00_ctl00_cphBody_cphBody_cphBody_editRecipeForm_ratRating_Star_3"> </span>
<span style="float:left;" class="ratingStar emptyRatingStar" id="ctl00_ctl00_ctl00_cphBody_cphBody_cphBody_editRecipeForm_ratRating_Star_4"> </span>
<span style="float:left;" class="ratingStar emptyRatingStar" id="ctl00_ctl00_ctl00_cphBody_cphBody_cphBody_editRecipeForm_ratRating_Star_5"> </span>
</a>
</div>
I find it odd that there's no error message displayed, and I haven't explicitly hidden the control anywhere.
It's probably not invisible, but rather the images locations of the rating star classes are wrong.
Check your css classes ratingStar, filledRatingStar, and emptyRatingStar.
Related
How do I set clr-error when the input is invalid. I've set the input field to be required.
But on page load the clr-control-error message always shows and the exclamation-circle never shows even when i click into input and click away
<form class="clr-form clr-form-horizontal">
<div class="clr-form-control clr-row">
<div class="clr-control-container clr-col-4">
<div class="clr-input-wrapper">
<clr-icon shape="search"></clr-icon>
<input type="text" id="search" class="clr-input" [(ngModel)]="model" name="search" required/>
<clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
<clr-control-error>Search Input is required</clr-control-error>
</div>
</div>
</div>
</form>
what you've got is the HTML/CSS version of form controls, which don't have built in validation. We've not yet created an input-group functionality that also works with Angular, so you'll have to manually toggle the display of the error message. You can see a few demos of this here: https://github.com/vmware/clarity/blob/master/src/dev/src/app/forms/input-group/input-group.html
Here is a demo based on your example of something that works with our markup, but currently requires some manual effort on your end. Eventually this will be supported in an Angular component, but not at the moment.
https://stackblitz.com/edit/clarity-light-theme-v1-0-xfaw9m?file=src/app/app.component.html
<form class="clr-form clr-form-horizontal">
<div class="clr-form-control clr-row">
<div class="clr-control-container clr-col-6" [class.clr-error]="search.invalid && search.touched">
<div class="clr-input-wrapper">
<div class="clr-input-group">
<clr-icon class="" shape="search"></clr-icon>
<input type="text" id="search" class="clr-input" [(ngModel)]="model" name="search" required #search="ngModel" />
</div>
<clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
<div class="clr-subtext" *ngIf="search.invalid && search.touched">Search Input is required</div>
</div>
</div>
</div>
</form>
I have a list of checkboxes in the HTML span tag. In the span tag there is an input tag and a label tag. I would like to click the checkbox in the input tag which has the label text e.g. "Allow gender mismatch"
In my XPATH I can get to the label tag but I do not know how to go up 1 so i can click on the input tag.
I would like some help in getting the XPATH or CSS locator for this please.
I cannot use id="gwt-uid-1204" as this is a dynamic value. It changes when you visit the page
My XPATH to get the label text is:
//div[#id="match_configuration_add_possible_tab_match_rules_fp_flags"]/span/label[contains(text(), "Allow gender mismatch")]
The HTML snippet is:
<div id="match_configuration_add_possible_tab_match_rules_fp_flags">
<div class="gwt-Label matchruleheader">Gender and title flags</div>
<span class="gwt-CheckBox" style="display: block;">
<input id="gwt-uid-1204" type="checkbox" value="on" tabindex="0"/>
<label for="gwt-uid-1204">Gender must be present in both names</label>
</span>
<span class="gwt-CheckBox" style="display: block;">
<input id="gwt-uid-1205" type="checkbox" value="on" tabindex="0"/>
<label for="gwt-uid-1205">Gender must be consistent in both names</label>
</span>
<span class="gwt-CheckBox" style="display: block;">
<input id="gwt-uid-1206" type="checkbox" value="on" tabindex="0"/>
<label for="gwt-uid-1206">Allow gender mismatch</label>
</span>
<span class="gwt-CheckBox" style="display: block;">
<span class="gwt-CheckBox" style="display: block;">
<span class="gwt-CheckBox" style="display: block;">
-- More checkboxes
</div>
Thanks, Riaz
you have at least two possibilities:
1) use xpaths ".." to go one element up
//div[#id="match_configuration_add_possible_tab_match_rules_fp_flags"]/span/label[contains(text(), "Allow gender mismatch")]/../input
2) use xpaths "preceding-sibling":
//div[#id="match_configuration_add_possible_tab_match_rules_fp_flags"]/span/label[contains(text(), "Allow gender mismatch")]/preceding-sibling::input
Personally I like the first approach more, since it still works even when the order of sibling-elements changes. With the second approach, you always need to check if the sibling is "preceding" or "following" (then you have to use following-sibling)
You need to add /preceding-sibling::input to your current XPath. So the final solution would be:
//div[#id="match_configuration_add_possible_tab_match_rules_fp_flags"]/span/label[contains(text(), "Allow gender mismatch")]/preceding-sibling::input
This selects the desired input element, so you can click it as required.
Is there a way to style the "popup" when a field is invalid in AngularJS?
I have no idea WHERE this thing is styled? We also have Bootstrap loaded, not sure if it's there. Can't right-click to "find element" either.
That's the browser validation kicking in. Disable it as follows:
<form novalidate></form>
Edit: Example of a form using novalidate with AngularJS's validation:
<form name="form" class="css-form" novalidate>
Name:
<input type="text" ng-model="user.name" name="uName" required /><br />
E-mail:
<input type="email" ng-model="user.email" name="uEmail" required/><br />
<div ng-show="form.uEmail.$dirty && form.uEmail.$invalid">Invalid:
<span ng-show="form.uEmail.$error.required">Tell us your email.</span>
<span ng-show="form.uEmail.$error.email">This is not a valid email.</span>
</div>
</form>
I believe it is no longer possible to style these popups:
Link
last week i began developing an ASP.NET Page with Bootstrap (with LESS).
My website has an language switcher between German and English. This works fine for my own components.
But the Bootstrap sign-in form automatically uses the browser language. If an field is empty, i get a message to fill out all fields. I want to set the used language manually in all forms in Bootstrap.
Is this possible, or are there other options?
Thanks.
Edit:
here is my Code
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<div class="container">
<div class="form-signin" role="form">
<h2 class="form-signin-heading">
<asp:Localize ID="LocalizeHeading" runat="server"
meta:resourcekey="LocalizeHeadingResource1" Text="Anmeldung"></asp:Localize>
</h2>
<input ID="InputUsername" runat="server" type="text" class="form-control" placeholder="<%$ Resources: Authentification, PlaceHolderUsername %>" required autofocus>
<input ID="InputPassword" runat="server" type="password" class="form-control" placeholder="<%$ Resources: Authentification, PlaceHolderPassword %>" required>
<label class="checkbox">
<input type="checkbox" value="remember-me">
<asp:Localize ID="LocalizeRememberMe" runat="server"
meta:resourcekey="LocalizeRememberMeResource1" Text="Anmeldung speichern"></asp:Localize>
</label>
<asp:Button ID="ButtonSignIn" runat="server" Text="Einloggen"
class="btn btn-lg btn-primary btn-block" type="submit"
meta:resourcekey="ButtonSignInResource1" onclick="ButtonSignIn_Click" />
</div>
</div> <!-- /container -->
</asp:Content>
This is not a Bootstrap issue. The tooltip error is a default behaviour of HTML5 so, at the very end, it generates from the browser. The error generates since the input tag has the attribute required, then the browser will try to ensure that you place any text on it.
Please check changing the language of error message in required field in html5 contact form - in particular Rikin's answer in order to set
setCustomValidity message using javascript.
I have tried passing the hidden field value using href. Below is the code snippet for the same and it is not working. I do not want to use java script function as I want this to work in a particular scenario when java script is disabled by the user. Value of the variable is set in code behind
<form name ="hiddenform" method="get" action="a1.asp">
<input type="hidden" id="hasflash" value=" " />
<div class="header" id="check" style="color: red;">
please <a href="a1.asp?hasflash"+<%=hasflash.Value%>>upgrade your add-on software</a>
</div>
I have also tried the below code:
<div class="header" id="check" style="color: red;">
please <a href=("a1.asp?hasflash={0}",hasflash.Value)>upgrade your add-on software</a>
</div>
Try
<div class="header" id="check" style="color: red;">
please upgrade your add-on software
</div>
First you need to add runat="server" to your hidden field
<input type="hidden" runat="server" id="hasflash" Value="SomeValues" />
Then you can achieve that in 2 or more ways
please upgrade your add-on software
or
please <a href='<%= String.Format("a1.asp?hasflash={0}",hasflash.Value) %>'>upgrade your add-on software</a>