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 %>")
Related
I have a asp:DropDownList that needs to have a search bar for the user to search through the dropdown.
If I remove the line 'dropdownParent: $("#ModalPanelCard")' the dropdown displays and I can search on it, but it appears to be behind the modal. Once I reference the dropdownParent, I can't even select the dropdown - almost like it isn't calling the select2. Am I referencing the incorrect parent?
Frontend Code
<asp:Panel runat="server" ID="ModalPanelCard">
<div class="col-lg-6">
<asp:DropDownList ID="selCustomerCard" runat="server"></asp:DropDownList>
</div>
</asp:Panel>
Script
<script>
$('#<%= selCustomerCard.ClientID %>').select2({
dropdownParent: $("#ModalPanelCard")
});
</script>
Try the following:
<script>
$('#<%= selCustomerCard.ClientID %>').select2({
dropdownParent: $("#<%= ModalPanelCard.ClientID %>")
});
</script>
Just making sure the ID is right from ASP. ASP can add extra text to your HTML id, which is why we need to make sure it's the same ID.
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" />
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" />
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>
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)"