I have ASP.NET website, there is a page when user have to enter text in textbox and image should appear depends the text that is entered. Everything is working but image appears only when you press Enter, is there a way image to appear as you entering the letters not by pressing Enter?
<asp:TextBox ID="initials" runat="server" Width="50px" OnTextChanged="initials_TextChanged" AutoPostBack="true"></asp:TextBox>
Code behind:
protected void initials_TextChanged(object sender, EventArgs e)
{
if(this.initials.Text == "A") { prvwleft.ImageUrl = "~/Images/left/A1.jpg"; }
}
In asp.net, OnTextChanged event fires when you leave the focus.
In your case, you should go for KeyDown event.
Asp.net Textbox doesn't have server side KeyDown event, so we will have to do it using jquery:
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$('#initials').keypress(function () {
if ($(this).val() == "A") {
$('#prvwleft').ImageUrl = "~/Images/left/A1.jpg";
}
else {
$('#prvwleft').ImageUrl = "~/Images/left/A1.jpg";
}
})
});
</script>
You need to call onkeypress event in javascript like this
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
function tSpeedValue(txt)
{
alert("hi");
var at = txt.value;
alert(at);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server" onkeypress="tSpeedValue(this)"></asp:TextBox>
</div>
</form>
</body>
</html>
and if you want to call it in server side
<asp:TextBox ID="TextBox2" runat="server" onkeypress="__doPostBack(this.name,'OnKeyPress');" ></asp:TextBox>
and in .cs page the code should be like
protected void Page_Load(object sender, EventArgs e)
{
var ctrlName = Request.Params[Page.postEventSourceID];
var args = Request.Params[Page.postEventArgumentID];
if (ctrlName == TextBox2.UniqueID && args == "OnKeyPress")
{
TextBox2_OnKeyPress(ctrlName, args);
}
}
private void TextBox2_OnKeyPress(string ctrlName, string args)
{
//your code goes here
}
Related
enter image description hereMy tutor gave me the following task: Create a form with 3 buttons(Save(Guardar) Edit(Editar) Delete(Eliminar) ).
But my real question is this:
I need to link my text box to my button allowing me to disable it and enable it at will but I can't conect them trough code.
PS:If you answer this question try as much as you can to be specific about the terms you use since I've started learning asp.net a few days ago.
enter image description here
First, you need to create the button event.
Double click to the button on your form, then the VB will create a button event automatically.
Now, you can code.
For i.e:
private void button1_Click(object sender, EventArgs e)
{
textBox1.Enabled = false;//Disable textbox1 on the form
}
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="RedioButton.aspx.cs" Inherits="Shoping_Cart.RedioButton" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Enable Disable Textbox Using Jascript Radio Button Click</title>
<script type="text/javascript">
function EnableDisableTextBox() {
var status = document.getElementById('<%=rbtEnable.ClientID %>').checked;
if (status == true) {
document.getElementById('<%=TextBox1.ClientID %>').disabled = false;
} else {
document.getElementById('<%=TextBox1.ClientID %>').disabled = true;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server" Width="228px"></asp:TextBox>
<br />
<br />
<asp:RadioButton ID="rbtEnable" runat="server" Text="Enable" onclick="javascript:EnableDisableTextBox();" GroupName="1" />
<asp:RadioButton ID="rbtDisable" runat="server" Text="Disable" onclick="javascript:EnableDisableTextBox();" GroupName="1" />
</div>
</form>
</body>
</html>
i have created "ButtonClick" function in ASP.NET as following:
<asp:Button ID="btnLogin" runat="server" Text="Login" CssClass="button" CausesValidation="true" onclick="btnLogin_Click"/>
i want to know, is it possible to call a javascript function before and after calling asp.net button click function...???
Thanks.
Yes it's possible, here is quick example:
Java script function to call.
<script type="text/javascript">
function clientValidate() {
alert("execute before");
return true;
}
function executeAfter() {
alert("execute after");
}
</script>
Here is snapshoot for button
<asp:Button ID="btnLogin" runat="server" Text="Login" CausesValidation="true" OnClientClick="clientValidate()" onclick="btnLogin_Click"/>
Notice property onClientClick="clientValidate()", it will be trigger script before button click on the server.
On the server side:
protected void btnLogin_Click(object sender, EventArgs e)
{
ScriptManager.RegisterClientScriptBlock(this, GetType(), "none", "<script>executeAfter();</script>", false);
}
Notice executeAfter();, it will trigger javascript execution after server event.
Don't forget to place <asp:ScriptManager runat="server"></asp:ScriptManager> in your aspx file.
Hope it help
put this on your page and make sure you have a scriptmanager. these codes will handle your pre & post postbacks.
var prm, postBackElement;
if (typeof Sys != "undefined") {
prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
}
function InitializeRequest(sender, e) {
postBackElement = e.get_postBackElement();
if (postBackElement.id == "btnLogin") {
// before click codes
}
}
function EndRequest(sender, e) {
if (postBackElement.id == "btnLogin") {
// after click codes
}
}
Before:
<script type="text/javascript">
function executeBefore() {
alert("execute before");
}
</script>
<asp:Button ID="btnLogin" runat="server" Text="Login" CausesValidation="true" OnClientClick="executeBefore()" onclick="btnLogin_Click"/>
After:
<script type="text/javascript">
function executeAfter() {
alert("execute after ");
}
</script>
Add this code to your server side event:
Page.ClientScript.RegisterStartupScript(GetType(), "none", "<script>executeAfter();</script>", false);
If you don't have a master page, or are not using ajax, there is no need to add ScriptManager.
You can call Java scrip function before server side click using OnClientClick():
aspx(design)
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function Test() {
alert('client click');
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button Text="btn" runat="server" ID="btn"
OnClick="btn_Click" OnClientClick="Test()" />
</div>
</form>
</body>
</html>
.cs
protected void btn_Click(object sender, EventArgs e)
{
Response.Write("Server Click");
}
First time you can call your javascript function in Button's OnClientClick event passing your function name.
<asp:Button ID="btnLogin" runat="server" Text="Login" CssClass="button" CausesValidation="true" onclick="btnLogin_Click" OnClientClick="return functionNAME();"/>
Second time, in your button click event btnLogin_Click call js as follow
ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), "script", "<script type='text/javascript'>functionNA();</script>", false);
For calling it before, you could consider using onload function, like this example:
<body onload="myFunction()">
For calling it afterwards, just link the button to execute JS onClick?
I don't think I quite understand your intentions.
I am posting this question again, maybe this time more accurate description.
The problem is , I am using jQuery to set the Label's text value and it works fine on browser, but when I want to save it to string, it does not save it. Here is the
front End Html Code.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(window).load(function () {
var myNewName = "Ronaldo";
$('#<%= Label1.ClientID %>').text(myNewName);
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</form>
</body>
</html>
And here is the Back End C# Code On Page Load
using System;
using System.Web.UI;
public partial class _Default : Page
{
protected void Page_Load(object sender, EventArgs e)
{
string mynameCheck = Label1.Text;
if (mynameCheck=="Ronaldo")
{
Response.Write("Yes Name is Fine");
}
else
{
Response.Write("Name's not Fine");
}
}
}
The result displayed is
Name's not Fine
Ronaldo
Seems like the string is still Null. Is there any problem of rendering??
label is not input type so you can not get changed values through jquery on server side. You can use hidden field for this purpose.
Your server side code (c#) can not access the form data until your client side code (HTML/Javascript) posts it.
Why do you want to the name already at the PageLoad event?
You could add a asp:Button with an attached onClick event handler to read the value of your asp:Label.
Labels do not maintain viewstate. The server will not post that information back to the server. You can try explicitly enabling the ViewState on your Label, but if that doesn't work, you will have to store that value in a hidden field.
First Call Page Load event and after that call JQuery Window.Load event.
So if you want to set any content in Label then you can do using onClientClick of button.
For ex.
<asp:Button ID="btn" runat="server" Text="Click me" OnClientClick="SetClientValues();" />
<script type="text/javascript">
function SetClientValues() {
var myNewName = "Ronaldo";
$('#<%= Label1.ClientID %>').text(myNewName);
}
</script>
At server side button event you can get Label values that sets at client side.
protected void btn_Click(object sender, EventArgs e)
{
string mynameCheck = Label1.Text;
if (mynameCheck=="Ronaldo")
{
Response.Write("Yes Name is Fine");
}
else
{
Response.Write("Name's not Fine");
}
}
It will print Yes Name is Fine
This should do it:
<script type="text/javascript">
$(window).load(function () {
if($('#<%= Txt1.ClientID %>').val() != "Ronaldo"){
var myNewName = "Ronaldo";
$('#<%= Txt1.ClientID %>').val(myNewName);
$('#<%= Label1.ClientID %>').text(myNewName);
$('#<%= Btn1.ClientID %>').click();
}
});
</script>
<form id="form1" runat="server">
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:TextBox ID="Txt1" runat="server" style="display:none"></asp:Label>
<asp:Button ID="Btn1" runat="server" style="display:none" Click="Btn1_Click"></asp:Label>
</form>
protected void Page_Load(object sender, EventArgs e)
{
if(IsPostBack)
{
Label1.Text=Txt1.Text;
string mynameCheck = Label1.Text;
if (mynameCheck=="Ronaldo")
{
Response.Write("Yes Name is Fine");
}
else
{
Response.Write("Name's not Fine");
}
}
}
protected void Btn1_Click(object sender, EventArgs e)
{ }
Hope it helps :)
please help me, I'm trying to click a hidden button if the user press the ENTER key inside a text box. It works fine with one text box, but if I add another, java script don't work.
TextBox. ------------------------------------------------------------------------------------------
<pre>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button"
onclick="Button1_Click1" style="visibility: hidden; display: none;" />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<script type="text/javascript">
var myInput = document.getElementById("TextBox1");
if (myInput.addEventListener) {
myInput.addEventListener('keydown', this.keyHandler, false);
} else if (myInput.attachEvent) {
myInput.attachEvent('onkeydown', this.keyHandler); /* damn IE hack */
}
function keyHandler(e) {
var EnterKEY = 13;
if (e.keyCode == EnterKEY) {
if (e.preventDefault) {
document.getElementByID("Button1").click();
e.preventDefault();
}
return false;
}
}
</script>
<br />
<asp:Label ID="Label1" runat="server" Visible="False"></asp:Label>
</form>
</body>
</pre>
------------------------------------------------------------------------------
CODE BEHIND
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click1(object sender, EventArgs e)
{
TextBox2.Text = "It Works";
}
}
Try wrapping your javascript code inside of a document.onload function
window.document.onload = function(e){
var myInput = document.getElementById("TextBox1");
if (myInput.addEventListener) {
myInput.addEventListener('keydown', this.keyHandler, false);
} else if (myInput.attachEvent) {
myInput.attachEvent('onkeydown', this.keyHandler); /* damn IE hack */
}
//adding the second textbox
myInput = document.getElementById("TextBox2");
if (myInput.addEventListener) {
myInput.addEventListener('keydown', this.keyHandler, false);
} else if (myInput.attachEvent) {
myInput.attachEvent('onkeydown', this.keyHandler); /* damn IE hack */
}
function keyHandler(e) {
var EnterKEY = 13;
if (e.keyCode == EnterKEY) {
if (e.preventDefault) {
document.getElementByID("Button1").click();
e.preventDefault();
}
return false;
}
}
}
so your script is executed once the DOM tree is fully loaded
Looking at your code you only bind your keyhandler(e) function to the element TextBox1 but not on TextBox2. Try creating a new binding code also for your TextBox2.
var myInput2 = document.getElementById("TextBox2");
if (myInput2.addEventListener) {
myInput2.addEventListener('keydown', this.keyHandler, false);
} else if (myInput.attachEvent) {
myInput2.attachEvent('onkeydown', this.keyHandler); /* IE hack */
}
I am getting the dreaded exception "Cannot unregister UpdatePanel with ID 'UpdatePanel' since it was not registered with the ScriptManager" when trying to combine a popup window and some Cross-Page Posting. I've been able to reproduce the problem with a small example.
I have seen other questions that handle the Unload event for the UpdatePanel, but that doesn't seem to work with the addition of the Cross Page Posting.
How do I get around this issue?
To duplicate the issue with the code below:
Start the Setup page
Press the View Popup link
Close the popup
Press the Next button to transfer to the Target page
Press the Back button to transfer to the Setup page
Press the View link and close the popup
Press the Next button, and see the failure
Here are the highlights (forgive the length, but it should be cut-and-pastable):
Setup.aspx
<head runat="server">
<title>Setup </title>
<script type="text/javascript">
function openCenteredWindow(url, height, width, name, parms) {
//Snip setting up window location stuff
var win = window.open(url, name, winParms);
return win;
}
</script>
</head>
<body>
<h1>Setup Page</h1>
<form id="aspnetForm" runat="server">
<div>
<asp:TextBox ID="txtData" runat="server" Width="80%" Text="<%# Information %>" />
<br />
<asp:LinkButton ID="lbViewData" runat="server"
OnClientClick="aspnetForm.target='ViewDataPopup';"
Text="View In Popup" /> <br />
<asp:Button ID="btnNext" runat="server" Text="Next" OnClick="btnNext_Click" />
</div>
<div>
<br />
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:updatepanel ID="UpdatePanel" runat="server" OnUnload="UpdatePanel_Unload"></asp:updatepanel>
</div>
</form>
</body>
Setup.Aspx.cs
public partial class Setup : System.Web.UI.Page
{
protected override void LoadViewState(object savedState)
{
base.LoadViewState(savedState);
if (this.ViewState["Information"] != null)
_Information = this.ViewState["Information"].ToString();
}
protected override object SaveViewState()
{
this.ViewState["Information"] = _Information;
return base.SaveViewState();
}
protected void Page_Load(object sender, EventArgs e)
{
if (PreviousPage != null && PreviousPage is TargetPage)
{
_Information = ((TargetPage)PreviousPage).SetupData;
}
else if (!Page.IsPostBack)
{
_Information = String.Format("This test started at {0}", DateTime.Now);
}
Page.DataBind();
lbViewData.PostBackUrl = "ViewData.aspx?u=0";
lbViewData.Attributes.Add("onclick", "JavaScript:openCenteredWindow(\"ViewData.aspx?u=0\", 400, 300, \"ViewDataPopup\", 'scrollbars=yes');");
}
private string _Information;
public string Information
{
get { return _Information; }
}
protected void btnNext_Click(object sender, EventArgs e)
{
HttpContext.Current.Server.Transfer("~/TargetPage.aspx");
}
}
ViewData.aspx
<%# PreviousPageType VirtualPath="~/Setup.aspx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head runat="server">
<title>View Data</title>
<script type="text/javascript">
function fixForm() {
opener.document.getElementById("aspnetForm").target = "";
opener.document.getElementById("aspnetForm").action = "";
}
</script>
</head>
<body onload="fixForm()">
<form id="aspnetForm" runat="server">
<div>
<h2 >View Data</h2>
</div>
<asp:Label ID="lblData" runat="server" Text="<%# SetupData %>" />
</form>
</body>
ViewData.aspx.cs
protected void Page_Load(object sender, EventArgs e)
{
if (PreviousPage != null)
{
Setup setup = (Setup)PreviousPage;
this.SetupData = setup.Information ?? "Data not set in Setup Page";
}
Page.DataBind();
}
private string _setupData = "Did not get updated data";
protected string SetupData
{
get { return _setupData; }
set { _setupData = value; }
}
TargetPage.aspx
<%# PreviousPageType VirtualPath="~/Setup.aspx" %>
<body style="background-color: #9999BB">
<h1>Target Page</h1>
<form id="aspnetForm" runat="server">
<div>
<asp:Label ID="lblData" runat="server" Text="<%# SetupData %>" /><br />
<asp:Button ID="btnBack" runat="server" Text="Back" OnClick="btnBack_Click" />
</div>
</form>
</body>
TargetPage.aspx.cs
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
if (this.PreviousPage == null)
Response.Redirect("Setup.aspx");
this.SetupData = PreviousPage.Information;
}
Page.DataBind();
}
public string SetupData
{
get { return ViewState["SetupData"].ToString(); }
set { ViewState["SetupData"] = value; }
}
protected void btnBack_Click(object sender, EventArgs e)
{
HttpContext.Current.Server.Transfer("~/Setup.aspx");
}
As you can see, it's enough to have the UpdatePanel just sitting on the page and doing nothing for this error to occur.