I am trying to use the server control for an asp checkbox:
<asp:CheckBox ID="generalInformation"
ClientIDMode="Static"
class="SetupChecklist"
name="generalInformation"
CssClass="SetupChecklist"
runat="server" />
However it does not seem to be retaining the class, which I need it to do. Am I missing something?
Here is how it renders on the web page:
<input type="checkbox"
name="ctl00$ContentPlaceHolder1$generalInformation"
id="generalInformation">
ah.......
this is the problem:
runat="server" checkbox is render to span + input...
the span gets the class not the input....
<span class="SetupChecklist" class="SetupChecklist" name="generalInformation">
<input id="generalInformation" type="checkbox" name="generalInformation" /></span>
You might want to use the CssClass property instead:
<asp:CheckBox ID="generalInformation"
ClientIDMode="Static"
name="generalInformation"
CssClass="SetupChecklist"
runat="server" />
Edit: I've only just seen that you've already tried it. Ok, CssClass actually applies the class to a span that wraps the check box, so try this instead:
generalInformation.InputAttributes("class", "SetupChecklist");
It will render the HTML like below.
<span class="SetupChecklist" class="SetupChecklist" name="generalInformation">
<input id="generalInformation" type="checkbox" name="generalInformation" />
</span>
Assuming that you are trying to design the input tag.
Now your style sheet can be like below for the <input> tag
<style type="text/css">
.SetupChecklist input
{
border:0px;
}
</style>
Originally, the span tag was occupying the class information.
remove the class attribute and just use the CssClass
Related
I have an ASPX that has a repeater. Inside the repeater is a text box with a JQuery datepicker attached to it. The text box's ID is static, so it is the same for all of those items within the repeater. However, when I make a change to the second or subsequent repeater item's date box using a datepicker, it changes the first item's date box and leaves the one actually attached to the selected datepicker alone.
Other than the obvious solution of "don't define items with the same ID," which results in another problem that will probably end up in another question, is there a way to fix this problem?
This example
<asp:Repeater runat="server"
ID="rptWhatever"
ClientIDMode="Predictable">
<ItemTemplate>
<asp:TextBox runat="server"
ID="tbxWhoCares"
CssClass="ImaDatePicker">
</asp:TextBox>
</ItemTemplate>
</asp:Repeater>
Will render the textbox to something like:
<input id="tbxWhoCares" type="text" class="ImaDatePicker"/>
So regardless of the id you should be able to do this in your script:
$(".ImaDatePicker").datepicker();
The problem with non-unique ID's is a big one but should be an easy fix if you set the attributes in the Repeater to ClientIDMode="Predictable" and leave the same attribute in the TextBox to its default.
Update
It seems jquery UI datepicker requires a unique id.
So you can select multiple inputs using a common css class but the id's must be unique otherwise you run into that problem.
It shouldn't work that way...but it does.
Alternatively you could just use the native <input type="date" ... />
$(function() {
$(".ImaDatePicker").datepicker();
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" rel="stylesheet"/><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<input id="tbxWhoCares" type="text" class="ImaDatePicker" />
<input id="tbxWhoCares" type="text" class="ImaDatePicker" />
<input id="tbxWhoCares" type="text" class="ImaDatePicker" />
<br><br><br>
<input id="tbxWhoCares_1" type="text" class="ImaDatePicker" />
<input id="tbxWhoCares_2" type="text" class="ImaDatePicker" />
<input id="tbxWhoCares_3" type="text" class="ImaDatePicker" />
This markup:
<asp:TextBox ID="txtAddress" CssClass="s175" runat="server" MaxLength="30" placeholder="Street"></asp:TextBox>
is rendered as:
<input name="ctl00$LeftColumnContent$txtAddress" type="text" maxlength="30" id="LeftColumnContent_txtAddress" class="s175 text" placeholder="Street">
But on another project, this markup: (exactly the same)
<asp:TextBox ID="txtAddress" CssClass="s175" runat="server" MaxLength="30" placeholder="Street"></asp:TextBox>
causes this to happen:
<input name="ctl00$ContentPlaceHolder1$txtAddress" type="text" maxlength="30" id="ContentPlaceHolder1_txtAddress" class="s175" placeholder="Street">
Why is the "text" class not getting applied? It's class="s175" vs class="s175 text".
You can apply skins to controls in asp.net, http://msdn.microsoft.com/library/ykzx33wh.aspx , if there is a default skin in this particular project it might explain why the class is being added. Check for a .skin file in the project.
It's getting added from javascript. I think it's this:
jquery.uniform.js
function doInput(elem){
$el = $(elem);
$el.addClass($el.attr("type"));
storeElement(elem);
}
i have a system that generates unique numbers for reference..here is my function in jquery:
function random() {
return Math.floor(Math.random() * 100000000);
}
function generateRandomNumber() {
$("#GenerateCode").val(random());
}
window.onload = function () {
generateRandomNumber();
}
here is my mark up(asp):
<div id="step3" class="formwiz">
<h4>Step 3: Reference Number</h4>
<br clear="all" />
<p>
<label>Reference Number</label>
<span class="field">
<input type="text" id="GenerateCode" name="GenerateCode" class="smallinput" disabled="disabled" /> <small style="color: red">Please write the numbers at the back of your check</small>
</span>
</p>
</div>
this function works fine with html (input)...but when i shifted from input to ast textbox, the numbers are not posted in the textbox...do i need to use getelementbyid.?
please help...
Try using a class instead so change the class attribute to:
class="smallinput random"
and change the javascript to:
$(".random").val(random());
I would take a wild guess that you're actually using ASP.NET and not classic ASP and you try to change the text box to:
<asp:TextBox id="GenerateCode" runat="server" CssClass="smallinput" Enabled="False" />
In such case, the generated ID might be different than what you give it, if the textbox is part of control, placeholder or something like this.
To ensure same ID use ClientIDMode and set it to Static:
<asp:TextBox id="GenerateCode" runat="server" ClientIDMode="Static" CssClass="smallinput" Enabled="False" />
Now the jQuery code should work fine again.
Is there any way to set a CSS class on an input item in a radio button list? I'd like to reference these form values by class in jQuery.
Given an ASP.NET RadioButtonList with classes set on the ListItems:
<asp:RadioButtonList ID="RadioButtonList" runat="server">
<asp:ListItem class="myClass" Text="Yes" Value="1" />
<asp:ListItem class="myClass" Text="No" Value="0" />
</asp:RadioButtonList>
Will render as:
<span id="RadioButtonList" class="radioButtonListField myClass">
<span class="myClass">
<input id="RadioButtonList_0" type="radio" value="1"
name="RadioButtonList"/>
<label for="RadioButtonList_0">Yes</label>
</span>
<span class="myClass">
<input id="RadioButtonList_1" type="radio" value="0"
name="RadioButtonList"/>
<label for="RadioButtonList_1">No</label>
</span>
</span>
Unfortunately, the "myClass" class is added to the <span> that contains the radio button item, not the <input> itself. How could I get it to look like this instead:
<span id="RadioButtonList" class="radioButtonListField myClass">
<span>
<input id="RadioButtonList_0" class="myClass" type="radio" value="1"
name="RadioButtonList"/>
<label for="RadioButtonList_0">Yes</label>
</span>
<span>
<input id="RadioButtonList_1" class="myClass" type="radio" value="0"
name="RadioButtonList"/>
<label for="RadioButtonList_1">No</label>
</span>
</span>
(This does not even get into the issue of adding the classes to dynamically bound RadioButtonLists.)
Yes, RadioButtonList renders horrible HTML.
Anyway, it's still easy to get them from jQuery.
Try
$('span.myclass input:radio')
Above will get all the radio buttons inside the span with class 'myclass'.
An alternative you may want to try to do is change your CSS class to accomindate the Server Control Rendering.
So in your CSS instead of the following:
.myClass { ... }
You Use this:
.myClass input { ... }
I don't know if you can set the class attribute (via class or CSSClass) in a declarative manner; however, the above should give you a work around.
untested
$('.myclass input:radio').each(function() {
this.css({'style-name':'style-value'})
)};
once the list is rendered, you can possibly manipulate the css client side using the above statement.
Using .NET you could create an event handler to the RowBinding event. This would allow you to access the individual controls within each item in the list. Once you pull the RadioButton control, you could programaticaly set it's CssClass to apply your class on the RadioButton level.
You could also use jquery to find the radio button controls that have myClass applied, and then apply another class to that.
Third, you could just change the definition of MyClass to also specify that it's only applied to input elements under elements that have MyClass applied.
the desigeek response is pretty good..
To get this to work for radiobuttons I had to do this on document.ready()
$('#<%=radRisksMarginTrading.ClientID %>_0').addClass("validate[required]");
$('#<%=radRisksMarginTrading.ClientID %>_1').addClass("validate[required]");
I'm sure there is a much better way to do it by looping but I need a quick fix for 5 radiobutton lists..
How this code should be (asp.net standard)?
<label for="jobno">Job#</label>
<input id="TextBox_JobID" name="jobno" runat="server"/>
<input type="button" value="Show Job" class="fbutt"
id="Button_showJob" onserverclick="Button_showJob_ServerClick"
runat="server" />
</p>
<p>
<asp:Label ID="Label_error" runat="server" class="error"></asp:Label></p>
I think the for attribute is not ok, or not written in correct way?
The value of the for attribute must match the id of a form control (such as an input element or a select element), not the name.
As the textbox is marked runat="server", I would suggest using the ClientID property of the control:
<label for="<%=TextBox_JobID.ClientID%>">Job#</label>
Then if you use master pages/user controls etc, you can be sure it will always contain the right value.
It should probably read
<label for="TextBox_JobID">Job#</label>