I'm wanting to change the value of my inputs with my asp form fields so that when clicked it clears the content and if someone doesn't type any value and clicks another field it will re-add the default value again, if changed it leaves the new text.
eg. field:
<asp:TextBox ID="NameInfo" CssClass="NameInfo" Width="300" runat="server" text="Name" />
Thanks in advance for any responses. I'm a beginner at asp so I'm not sure how to do these types of features.
I believe the functionality you need would be best achieved using jQuery and a plugin. Perhaps look into http://code.google.com/p/jquery-watermark which from experience works well.
You should just need to download that library and then have something like the following within the head tags of your page:
<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript" src="/path/to/watermarkplugin.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#<%=NameInfo.ClientID").watermark('The text you want to appear');
});
</script>
Found a simple alternative:
<asp:TextBox ID="NameInfo" CssClass="NameInfo" onfocus="if(this.value == 'Name'){this.value='';}" onblur="if(this.value == ''){this.value='Name';}" Width="300" runat="server" text="Name" />
Related
I don't see any date picker in ASP.NET controls.
Anyone knows how to add it in my my webpage.
I am using VB as my programming language.
Result
I would like to thank everyone who posted the solutions, code and links which helped me to achieve this thread goal. Based on all of the source the below code is the one which works nicely.
Content1
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.min.js"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
//initialise the datepicker with the date format specified
$(".datepicker").datepicker();
});
</script>
And in
Content2
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:TextBox runat="server" ID="txt_MyDate" CssClass="datepicker" MaxLength="10" />
Add this inside your [head] Tag.
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
and use this jquery function in aspx page inside [script] tag
$(function () {
$("#datepicker").datepicker();
$("#datepicker").change(function () {
$('#btnRefresh').click();
});
and add one textbox for display selected date. and button for getting the date in sever side. like this code
<input type="text" id="datepicker" runat="server" clientidmode="Static" />
<asp:Button ID="btnRefresh" runat="server" onclick="btnRefresh_Click" ClientIDMode="Static"
Text="Refresh" AutoPostback="true" style="display:none;"/>
use this onclick event to do want you want..
You're right, there isn't anything built-in.
Personally I would recommend the jQueryUI datepicker - it's reliable and flexible, and it's javascript based, so it doesn't matter what your server-side language is.
See https://jqueryui.com/datepicker/
Once you've added the required references to jQuery and jQueryUI, in your aspx page, add a script section like this:
<script type="text/javascript" language="javascript">
$(function () {
//initialise the datepicker with the date format specified
$(".datepicker").datepicker();
});
</script>
and then add the "datepicker" class to any textbox controls on the page where you want to use the datepicker:
<asp:TextBox runat="server" ID="txt_MyDate" CssClass="datepicker" MaxLength="10" />
P.S. I can also recommend most of the rest of the jQueryUI package, there are some useful items in there which can speed up your development time and make your apps look nicer and be more usable.
You can implement a datepicker on your page with the help of the Calendar control, using javascript on your page. Try this links for simple methods to do it:
http://www.vbknowledgebase.com/?Id=150&Desc=ASP.Net-DatePicker-using-Calendar-Control
http://www.codedigest.com/Articles/ASPNET/247_DatePicker_Control_in_ASPNet.aspx
http://www.aspsnippets.com/Articles/DateTimePicker-control-for-ASPNet-TextBox-Example.aspx
I'm using Kedo UI Window in my aspx page, like shown below.
Server control inside window is loosing it's value after postback. I know Kendo is a client side library & is not responsible for state management of my server side controls but why is it causing them to loose their value???
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Test3.aspx.cs" Inherits="Test3" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.rtl.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.silver.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.mobile.all.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
</head>
<body>
<form runat="server" id="form1">
<div id="dialog">
<asp:TextBox runat="server" ID="TxtIn" />
</div>
<asp:TextBox runat="server" ID="TxtOut" />
<asp:Button runat="server" ID="Btn" Text="Submit" />
</form>
<script>
$("#dialog").kendoWindow({
actions: ["Minimize", "Maximize"]
});
$("#dialog").data("kendoWindow").center();
</script>
</body>
</html>
In Snippet above on click of Btn postback happens after which TxtOut retains it's value but TxtIn looses it, why is not clear to me. I believe it's something to do with the DOM changes that Kendo window does, not sure but. Can someone explain please, and provide any work around...
When you convert any div element into Kendo-Window at that time it remove the div from form tag and it create new div and add your existing div in it.
Please check below screenshot for more detail.
Please check the behavior of below code snippet you will get idea why the 'TxtIn' textbox not retains its value after postback.
<body>
<form runat="server" id="form1">
<asp:TextBox runat="server" ID="TxtOut" />
<asp:Button runat="server" ID="Btn" Text="Submit" />
</form>
<input type="text" id="TxtIn" />
</body>
Let me know if any concern.
I found it! Kendo provides an elegant solution to this problem. It's a configuration appendTo. Using it you can define under which element of your DOM the window should append. By default it must be body hence it was appending at it "after form tag", just changed it to my form to make it append to my form element instead, and it's working great now.
$("#dialog").kendoWindow({
actions: ["Minimize", "Maximize"],
appendTo: "form#form1" // This one does the magic
});
I need a calendar to be displayed on a textbox.
This can be achieved using ajaxToolkit: Calendar control.
I can use FilteredTextBoxExtender to ensure that it enters only valid characters.
Also I can use jQuery to ensure that the dates are valid dates only (13/13/20123 is an invalid date).
But is there a better way or ajax control (in the toolkit) for it?
Note: I am looking for a solution using ajax control toolkit. For my project, jQuery-UI is not allowed.
<ajaxToolkit:Calendar runat="server"
TargetControlID="Date1"
CssClass="ClassName"
Format="MMMM d, yyyy"
PopupButtonID="Image1" />
<ajaxToolkit:FilteredTextBoxExtender ID="ftbe" runat="server"
TargetControlID="txtDate"
FilterType="Custom, Numbers"
ValidChars="1234567890/" />
REFERENCE:
http://forums.asp.net/p/1825929/5076051.aspx/1?Re+How+to+disable+future+dates+in+ajax+calendar+extender+
Try Using jQuery UI Datepicker:
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
<div class="demo">
<p>Date: <input id="datepicker" type="text"></p>
</div>
jQuery UI Datepicker
I am developing my app in asp.net web forms. The textbox is set like this
<asp:TextBox ID="txt1" runat="server" Enabled="false" ></asp:TextBox>
and this is the corresponding HTML markup
<input name="txt1" type="text" value="1.0" id="txt1" disabled="disabled" />
It is not editable upto this point.
I enable Caret browsing in IE8 (press F7) and then this field becomes editable, though the text is grayed out and consequently gives a wrong feeling to the user that the field is editable. This does not happen if I mark the textbox as readonly, but I do not want to mark it as a readonly field. Any suggestions on how to have the textbox in disabled mode when in Caret Browsing.
Edit1: I am not looking for a solution which would change IE settings/registry, am looking for a programmatic solution as my site is a public facing website
Edit2: View states are enabled for the page and for the controls
I can get you started quickly with this script:
<script> document.onkeyup = KeyCheck;
function KeyCheck() { alert(document.getElementById("txt1").value); } </script> </script>
Put this all the way on top of the html.
Now you get hold of the keypress.
When in caret mode, IE seems to ignore the text's javascript events
Alright. I gave you a Hint to build up on. (Thanks for the -1)
Here is the HTML code that you are looking for. Make sure to populate the initialVal using ASP code.
<script>
document.onkeyup = KeyCheck;
var initialVal="1.0"
function KeyCheck()
{
if(document.getElementById("txt1").value != initialVal) {
document.getElementById("txt1").value = initialVal;
return false;
}
}
</script>
<input name="txt1" type="text" value="1.0" id="txt1" disabled="disabled" />
I have a problem in my C# ASP.NET application, where the id and name tags are modified at runtime with a prefix "MainView_" and "MainView$" respectively. So my code:
<asp:Button ID="OKToContinueCheckInButton" runat="server" CausesValidation="False" Visibility="false" Style="display: none" OnClick="btnOKToContinueCheckIn" />
<script type="text/javascript">
<!--
var answer = confirm("Some Warning");
if (answer)
document.getElementById('OKToContinueCheckInButton').click();
// -->
</script>
becomes:
<input type="submit" name="MainView$OKToContinueCheckInButton" value="" id="MainView_OKToContinueCheckInButton" Visibility="false" style="display: none" />
<script type="text/javascript">
<!--
var answer = confirm("Some Warning");
if (answer)
document.getElementById('OKToContinueCheckInButton').click();
// -->
</script>
getElementID() returns null because the name has changed. Can anyone tell me why this occurs and if there is a way to possibly disable it from changing the id and name values. Thanks!
-Sephrial
I think this would help you...
<script type="text/javascript">
<!--
var answer = confirm("Some Warning");
if (answer)
document.getElementById('<%= OKToContinueCheckInButton.ClientID %>').click();
// -->
</script>
This is the part that does the trick
<%= OKToContinueCheckInButton.ClientID %>
This is a fundamental part of the way the Asp .Net Forms model work.
The IDs are changed so that you don't have to worry about keeping IDs unique across user controls, custom controls, repeaters etc.
You can use Cyril's method. I also find JQuery suits this model very well to because you can easily reference controls by their class or position in the document.
The good news is ASP.Net 4.0 will solve this issue.
http://weblogs.asp.net/asptest/archive/2009/01/06/asp-net-4-0-clientid-overview.aspx
I think you forgot the single quotes:
document.getElementById(<%= OKToContinueCheckInButton.ClientID %>).click();
Should be:
document.getElementById('<%= OKToContinueCheckInButton.ClientID %>').click();
<asp:Button ID="OKToContinueCheckInButton" runat="server" CausesValidation="False" Visibility="false" Style="display: none" OnClick="btnOKToContinueCheckIn" />
<script type="text/javascript">
<!--
var answer = confirm("Some Warning");
if (answer)
document.getElementById(<%=OKToContinueCheckInButton.ClientID %>).click();
// -->
</script>
Write your script from the code behind. Register it as a start up script, and use the client ID of the object.
System.Text.StringBuilder script = new System.Text.StringBuilder();
script.Append("var answer = confirm('Some Warning');");
script.Append("if (answer)");
// The client ID will be what is put in the browser so it will find it.
script.AppendFormat("document.getElementById('{0}').click();", this.btnSomeButton.ClientID);
// Hook this up to the button
this.btnSomeButton.OnClientClick = script.ToString();
You must use the ClientID Property like this:
<asp:Button ID="OKToContinueCheckInButton" runat="server" CausesValidation="False" Visibility="false" Style="display: none" OnClick="btnOKToContinueCheckIn" />
<script type="text/javascript">
<!--
var answer = confirm("Some Warning");
if (answer)
document.getElementById(<%=OKToContinueCheckInButton.ClientID%>).click();
// -->
</script>
If you are willing to use jQuery, this is not a problem at all, and you wont have to worry about changing names. By using the $= (ends with) selector, this will be noe problem:
if (answer)
$("a[id$='MainView_OKToContinueCheckInButton']:first").click();
jQuery selectors are very easy to work with
Thanks for all of your responses, I think I understand why the values are replaced. However, when I attempted the solutions above, it gives an error because it produces the following HTML with a '_' instead of a '$'. I was using, document.getElementById(<%= OKToContinueCheckInButton.ClientID %>).click();
<input type="submit" name="MainView$OKToContinueCheckInButton" value="" id="MainView_OKToContinueCheckInButton" Visibility="false" style="display: none" />
<script type="text/javascript">
<!--
var answer = confirm("Some Warning");
if (answer)
document.getElementById(MainView_OKToContinueCheckInButton).click();
// -->
</script>