I have asp.net website. Here I have not used form tag for designing page but used div tags.
Now i want to read the key combination from user, example: if user presses keys "s+u+m" then I have to generate OnClick event of Sum Button on my ASPX page.
But it should be happen at page level not for control's key press
Also if there is an JS then please tell me where to write it as I am new in ASP.Net
Any Idea???
Thanks.
You can achieve this by control's AccessKey property.
But it will only allow 'Alt + Key' combination as you want PostBack on the key press.
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" Text="Button" AccessKey="P"
onclick="Button1_Click" />
</div>
</form>
'Alt + P' key combination on page will fire Button1_Click event.
If you want to make any key refer - js-hotkeys jquery plugin
Example: Binding 'Ctrl+P'
$(document).bind('keydown', 'ctrl+c', fnKeyCaptured);
function fnKeyCaptured()
{
__doPostBack(button.id,"OnClick");
}
Related
I am using Visual Studio 2012. It contains the following textbox:
<asp:TextBox ID="txtdate" runat="server" OnTextChanged="txtdate_TextChanged" AutoPostBack="true"></asp:TextBox>
<img src="../img/scw.gif" title='Click Here' alt='Click Here' onclick="scwShow(scwID('ContentPlaceHolder1_txtdate'),this); setcalender();" />
On clicking on the image a Calendar opens in which the user can select the date. Now if I enter the date manually by typing and then press the Enter key txtdate_TextChanged method is called but the change has to be done using the Calender. So I want to know why and how the browser/server is able to detect that the change is being done by Javascript.
And is there any way I can call the txtdate_TextChanged method in javascript.
Thanks in advance.
As you are saying that you click on the image and not the textbox it means that the textbox was never in focus and javascript functions do not trigger server side functions if they are called along with the server side functions like
<asp:Button runat ="server" ID="btn" OnClick="btn_Click" OnClientClick="return check();" />
where in javascript function check() you do your validations and return true.
So you have to do this in javascript on the onclick eventof your Calender
__doPostBack("txt_sssn_dt", "TextChanged");
I want to disable link button after user click on it.
But I made something wrong here.
Button is still enabled after click. What am I doing wrong?
<asp:LinkButton ID="submit" runat="server"
CssClass="button"
Text="OK"
OnClick="Submit_Click"
OnClientClick="this.disabled=true">
</asp:LinkButton>
Just give return false; to your JavaScript. The reason is that your asp:LinkButton is getting rendered like this.
<a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$submit','')"
class="button"
id="ContentPlaceHolder1_submit"
onclick="this.disabled = true;return false;">
OK</a>
So, if you do not give return false, these things happens
It fires the onclick event and disables the anchor tag. (anchor tag does not have a disabled property. button and input type="submit" has that property.)
It moves on to fire the postback and hits the server side click event
As there is a postback, the client side JavaScript disabling wont persist (even if it were a button)
By enforcing return false you are asking the asp:LinkButton not to do anymore processing.
P.S: I have been using PostBack Ritalin to prevent multiple clicks on asp:Button. IMO, its definitely worth a look in this case.
Use the javascript debugger to check the method is being called. LinkButtons are server generated javascript powered anchor tags & therefore can be tricky.
Try this java script function ,
On your OnClientClick
<asp:LinkButton ID="submit" CssClass="button" Text="OK" onclick="myButtonId_Click(this);return false;" ></asp:LinkButton>
add function ,
protected void myButtonId_Click(target) {
target.disabled = true;
}
Have the need to alter the behavior of pressing enter on my aspx page based on the last control that was interacted with. I have two textboxes and a dropdown. Each one of those controls has a corresponding button that takes the input and applies it to other fields on the page. Much like adding options to a master part.
Example: If button2 is pressed, the option in textbox2 would be applied, but not the option in textbox1, or the dropdown. The page is refreshed, and the user can continue to select options.
How would I alter the page to allow the user to type in text in a textbox and then hit enter to activate the code for the corresponding button. I've tried various js to set the page default, but have been unsuccesseful in changing this on the fly.
You can use ASP.Net Panel control's DefaultButton to accept enter key.
http://geekswithblogs.net/ranganh/archive/2006/04/12/74951.aspx
<asp:Panel ID="pnl1" runat="server" defaultbutton="Button1">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button1" OnClick="Button1_Click" />
</asp:Panel>
<asp:Panel ID="pnl2" runat="server" defaultbutton="Button2">
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:Button ID="Button2" runat="server" Text="Button2" OnClick="Button2_Click" />
</asp:Panel>
Set event listeners for a user modifying the inputs and set a reference to the proper button. Then have a listener for the enter button to trigger submitting the referenced button. You didn't mention jQuery or any JS framework so I'll try writing it generally for plain javascript, I'd recommend using a framework though for cross browser support.
var myButtonId = null;
var storeInputButtonId = function(buttonId) {
return function(event) {
myButtonId = buttonId;
};
};
//Do following for inputs, or your preferred event binding pattern
var fld = document.getElementById('myInputId');
//Statically refer to button id or replace with suitable algorithm
var inputButtonId = "";
if (fld.addEventListener) {
//Could bind to other events with logic based on input element type
fld.addEventListener('keyup',storeInputButtonId(inputButtonId), false);
}
//Method to trigger the button click event
function submitData(event){
//Watch for the enter button
if ( event.which == 13 ){
document.getElementById(myButtonId).click();
}
}
//Bind the listener to the enter button
var bodyElement = document.getElementsByTagName('body')[0];
if (bodyElement.addEventListener) {
bodyElement.addEventListener('keydown',submitData, false);
}
Currently in my application I am having a button and a text box. The user types something in the textbox and then presses the button. What I want is that:
The search button should should stay disabled when the page loads for the first time. I can achieve that by setting it to disabled in the code behind file.
Now I want it to remain disabled when the user types upto 2 characters. The moment the user types third character the button should get enabled automatically.
The important thing is that it has to be done without asp .net AJAX since this website will be run from old mobile phones. So only pretty basic javascript or jquery is supported.
Any help will be appreciated.
Thanks
Varun
in order to use the document.getElementById in asp.net and not have to use the full name, you should let asp.net provide it. Instead of:
document.getElementById("ctl00_ctl00_phContent_phPageContent_btnSearch")
Try:
document.getElementById('<%= btnName.ClientID %>')
Where btnName is the asp:Button Id. The <%= code will generate the actual button id, fully qualified, so you don't have to worry about things changing with the hard coded id.
I got this to work with a HTML text box, I don't think you can do it with a asp.net text box:
<head>
<script type="text/javascript">
function TextChange() {
var t = document.getElementById("Text1");
var b = document.getElementById("Button1");
if (t.value.length > 2) {
b.disabled = false;
}
else {
b.disabled = true;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="Text1" type="text" onkeyup="TextChange();" />
<asp:Button ID="Button1" runat="server" Text="Button" Enabled="False" />
</div>
</form>
</body>
If you're using jQuery, use
$(<selector>).val().length
to get the size, then you can set the button's disabled attribute with
$(<button selector>).attr('disabled',false).
I have Telerik RadGrid with a custom edit form. In my edit form there is a RadDatePicker to which I have added a custom footer template containing a 'Today' button.
In the OnClick event of the button I call a Javascript function which takes the control ID to set the selected date.
However, because the control is inside the edit form there is no variable created for it and the compiler throws an error when I try getting the client ID.
The RadDatePicker is declared with:
<telerik:RadDatePicker ID="ControlName" runat="server" SelectedDate='<%# Bind("Field") %>'>
<Calendar ID="Calendar1" runat="server">
<FooterTemplate>
<div style="width: 100%; text-align: center; background-color: Gray;">
<input id="Button1" type="button" value="Today" class="button"
onclick="GoToToday('<%= ControlName.ClientID %>')" />
</div>
</FooterTemplate>
</Calendar>
</telerik:RadDatePicker>
The error I get is CS0103: The name 'ControlName' does not exist in the current context on the line referencing the ClientID.
Is there another way in which to get the ID to pass to the Javascript function?
I resorted to wrapping the Telerik RadGrid with a RadAjaxPanel and then in the server side code for the bind event I used the Ajax panel to set some Javascript variables:
RadAjaxPanel1.ResponseScripts.Add(string.Format("window['ControlNameId'] = '{0}';", ControlName.ClientID));
I then added a client side event handler to the DatePicker: ClientEvents-OnPopupOpening="AddButtonClickEvent"
The page then includes the following Javascript to bind the click event handler using jQuery:
function AddButtonClickEvent(sender, eventArgs) {
var cal = window['ControlNameId'];
$('#Button1').bind('click', function() {
GoToToday(cal);
});
}
And it all works as expected.
Try:
OnClick=<%# "GoToToday('" + ControlName.ClientID + "')" %>
You could also set the event handler in the page_load event.
Maybe ClientEvents-OnLoad event of controls on form will help? It's not very beautiful, but seems to work.
First make script on page
<script type="text/javascript">
var textBoxFromFormClientObject;
function onTextBoxLoad(sender) {
textBoxFromFormClientObject = sender;
}
</script>
Then in aspx, for control on edit form that you need to get on client,
add event like this
<rad:RadTextBox ID="txSomeTextBoxe" runat="server"
ClientEvents-OnLoad="onTextBoxLoad"/>
So, when you press edit or insert button on grid, and form will be shown - global variable in javascript will be set. And you can use it to manipulate textbox. Only problem is that you need event like this for each control on form, if you want to manipulate all controls =(