ASP.NET Textbox Mask - c#

So I want to include a mask to my textbox. I have researched for different options and I have tried all of them but none seem to work. Im using VS2013 and C# and I want to be able to use textbox.text on my code too.
I have something like this:
<script type="text/javascript" src="/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="/js/jquery.maskedinput.js"></script>
<script type="text/javascript">
$(function () {
$("#TxtDOB").mask("999-999-9999");
});
</script>
asp:TextBox ID="TxtDOB" runat="server" CssClass="textbox1" Width="130px" />
TextBox won't recognize the mask.

I'm a bit late to the party, but adding ClientIDMode="static" should fix the issue here. By default, .Net will convert the ID ("TxtDOB" in this case) to something other than what you set it to. Adding ClientIDMode="static" tells .Net not to change the ID and make it available as-is on the client-side.
<asp:TextBox ID="TxtDOB" runat="server" ClientIDMode="static" CssClass="textbox1" Width="130px" />

Related

CalendarExtender -- don't want recently selected dates

Does anyone know if there is a way to prevent the Ajax CalendarExtender from displaying recently selected dates (like the 2018-03-05, etc. in below screenshot)? I also wasn't sure if this was a browser feature, but I have unselected all of the predictive options in my Chrome browser, cleared all history/cache, shut the browser down completely and it's still showing the dates. This is an ASP.NET, C# application.
I've never had much success with getting jQuery to work, but here is what I have so far:
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$('tbStartDate').on('click', function(e) {
e.preventDefault();
$(this).attr("autocomplete", "off");
});
$('tbEndDate').on('click', function(e) {
e.preventDefault();
$(this).attr("autocomplete", "off");
});
</script>
<asp:TextBox ID="tbStartDate" runat="server"></asp:TextBox>
<asp:CalendarExtender runat="server" TargetControlID="tbStartDate"></asp:CalendarExtender>
<asp:TextBox ID="tbEndDate" runat="server"></asp:TextBox>
<asp:CalendarExtender runat="server" TargetControlID="tbEndDate"></asp:CalendarExtender>
But I'm getting the "Uncaught TypeError: $(...).on is not a function at VendorFreightCalc.aspx:16, which points at the first jQuery line above.
Please have a look at this question:
Disable autocomplete for all jquery datepicker inputs
Basically, you want to turn off autocomplete for that field.
(UPDATE)
Maybe try the non-jquery options for turning off autocomplete.
<input type="text" name="field1" value="" autocomplete="off" />

asp.net textbox mask using jquery not working

I'm trying to use the jquery mask to apply to an ASP.NET web form textbox. Nothing I do works... what am I missing?
<script type="text/javascript" src="/js/jquery.maskedinput-1.2.2.js"></script>
<script type="text/javascript" src="/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(function() {
$("#phone").mask("999-999-9999");
});
</script>
This is the text box code:
<asp:TextBox runat="server" ID="phone" CssClass="rightsection" ToolTip="Please enter a phone number."></asp:TextBox>
<asp:RequiredFieldValidator runat="server" ControlToValidate="phone" Display="Dynamic" ForeColor="Red" Text="Required field" ValidationGroup="formfields" />
the textbox's id changes when it gets rendered to include the parent containers id, you can get the rendered id with ClientID like this
$("#<%= phone.ClientID%>").mask("999-999-9999");
The ClientID value is generated by concatenating the ID values of each parent naming container with the ID value of the control. In data-binding scenarios where multiple instances of a control are rendered, an incrementing value is inserted in front of the control's ID value. Each segment is separated by an underscore character (_).
This is the solution:
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/jquery.maskedinput.js"></script>

Textbox not show datepicker with javascript?

I'm using DevExpress develop my website...Now i'm use Aspxtextbox with jquery to display datepicker. I don't use AspxDateEdit because i can't apply my css...Here is my code:
Javascript
$(function () {
$("#<%= txtDate.ClientID %>").datepicker(
{ dateFormat: 'dd/mm/yy', minDate: 0 })
});
ASPX
<dx:ASPxTextBox Native="true" CssClass="span3" runat="server" ID="txtDate">
<ValidationSettings ErrorDisplayMode="Text" ErrorFrameStyle-ForeColor="Red" Display="Dynamic" ErrorTextPosition="Bottom" SetFocusOnError="true">
<RequiredField IsRequired="True" ErrorText="The value is required" />
</ValidationSettings>
</dx:ASPxTextBox>
When i view source code, input id = ContentPlaceHolder1_ctl00_txtDate..What's wrong in my code?
For the datepicker to work you need to reference both jQuery and THEN (note the order) -> jQuery UI.
So it will be something like this:
<script src="~/Scripts/jquery.js"></script>
<script src="~/Scripts/jquery-ui.js"></script>
<script src="~/Scripts/yourapp.js"></script>
I hope this helps.
EDIT
Also, not sure if the textbox ID is actually trimmed, so try to remove the spaces:
$("#<%=txtDate.ClientID %>")

Invoking jquery from code behind

I need to make a HyperLink blink (customer requirement unfortunately) so I've decided to use this.
Could someone point me in the right direction on how to invoke this from the code behind (C#)?
So far I've tried:
private string script1 = "<script type=\"text/javascript\" charset=\"utf-8\" src=\"javascripts/jquery.blink.min.js\"></script>";
private string script2 = "$(\".selector\").blink();";
ScriptManager.RegisterClientScriptBlock(e.Item.FindControl("hlink"), e.Item.FindControl("hlink").GetType(),
"BlinkingScript", script1, false);
ScriptManager.RegisterStartupScript(e.Item.FindControl("hlink"),
e.Item.FindControl("hlink").GetType(),
"BlinkingScript", script2, false);
..to no avail
Trying to mess around with RegisterClientScriptBlock and RegisterStartupScript is painful, and is completely unnecessary except in some extremely off-radar edge cases. Not only is it extremely difficult to maintain, it's also difficult to understand. And in this case the simple, direct approach will work much better for you.
In the <head> block of your page, add the following:
<!-- Assuming that you've already got jQuery registered... -->
<script language="javascript" type="text/javascript" src="Scripts/jquery.blink.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
// Couple of notes here:
// ".blinky" means that it will match anything with a CSS class of "blinky". This can be anything, not just hyperlinks.
// Also, I'm adding an optional object parameter to the blink() method that allows me to specify parameters that alter its behavior.
// In this case, if I just called blink() it would only blink 3 times, but I'm overriding that to blink 5 times.
$(".blinky").blink({blinks: 5});
});
</script>
Then, in the body of your page, add the CssClass="blinky" on the hyperlinks that you want to blink.
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="#" Text="Not Blinky Link" /><br />
<asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="#" Text="Not Blinky Link" /><br />
<asp:HyperLink ID="HyperLink3" runat="server" NavigateUrl="#" Text="Blinky Link" CssClass="blinky" /><br />
<asp:HyperLink ID="HyperLink4" runat="server" NavigateUrl="#" Text="Not Blinky Link" /><br />
<asp:HyperLink ID="HyperLink5" runat="server" NavigateUrl="#" Text="Blinky Link" CssClass="blinky" /><br />
<asp:HyperLink ID="HyperLink6" runat="server" NavigateUrl="#" Text="Blinky Link" CssClass="blinky" /><br />
You can also use an asp:Repeater, code-behind, etc. to construct your Hyperlink items, just as long as you set the CssClass on the ones you want to blink.

How do I get label value as a parameter into a javascript function?

Hopefully this one is not too hard to understand but I just want the label values to be inputs into a javascript function. Might be better to explain with code:
ASP.NET Label code:
<asp:Label ID="LabelCL" runat="server" Text="A single int filled in by DB"></asp:Label>
Page Source:
<span id="ctl00_cpMainContent_LabelCL">7</span>
What I would like to achieve but am not sure how to do:
<span id="ctl00_cpMainContent_LabelCL"> <script type="text/javascript">functionX(7)</script> </span>
So basically just wrap the output int in the following:
<script type="text/javascript">functionX( VALUE FROM LABEL TEXT)</script>
within the
<span></span>
Try this
<asp:Label ID="LabelCL" runat="server" />
<script type="text/javascript">
var value = document.getElementById("<%= LabelCL.ClientID %>").innerHTML;
functionX(value);
</script>
If it is called just after render you can simply use LabelCL.Text, if you need the value after and if it can be edited you can do as the exemple above.
With jQuery you can use
$("[id$=LabelCL]")
to retrieve the element.
var span = document.getElementById('ctl00_cpMainContent_LabelCL'),
text = span.firstChild;
functionX(text.textContent);
Working Demo
or if defined in the Page use script tags to render out the client id for the span using
<%= LabelCL.ClientID %>
Try this:
<asp:Label ID="LabelCL" runat="server" Text="A single int"></asp:Label>
<button onclick="displayContent(<%= LabelCL.ClientID %>)">click me</button>
<script>
function displayContent(obj) {
alert(obj.innerText);
}
</script>
You almost had it:
<asp:Label runat="server" Text="<script type='text/javascript'>document.write(functionX(7));</script>"/>
Use this piece of code
onclick="myFunction(labelName.innerText)"

Categories